Buenas, tengo ese problema en mi código. He logrado cargar una imagen en un canvas, pero el problema viene cuando las imágenes son muy grandes. ¿Qué sucede? La imagen aparece en el canvas pero cortada (generalmente aparece de la mitad para arriba o algo por el estilo). Creo que es por esto que, cuando deseo mostrar la información de los pixeles (el RGBA) muestra información errónea (un color donde no hay).
También quisiera hallar la manera de cargar solo una imagen en el canvas, de tal manera que cuando se quiera cargar otra imagen distinta, la anterior se borre
<!DOCTYPE html>
<html>
<head>
<style>
body {margin: 0px;}
canvas {width: 100%; height: 100%;}
</style>
<title>Proyecto</title>
</head>
<div>
<label for="image_uploads">Cargar imagen</label>
<input type="file" id="image_uploads" name="image_uploads" accept=".jpg,.jpeg,.png" multiple>
</div>
<div id="color" style="width:200px;height:50px;float:left"></div>
<div>
<label for="smoothbtn">
<input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn">
Activar suavizado de imagen
</label>
</div>
<canvas id = "can" width="1200" height="600" style="position:absolute;border:0px solid;"></canvas>
<script src="js/dat.gui.min.js"></script>
<script src="js/three2.js"></script>
<script>
var image = new Image();
var canvas = document.getElementById('can');
var ctx= canvas.getContext('2d');;
var input = document.querySelector('input');
var curFile = input.files;
var source = "";
input.style.opacity = 0;
input.addEventListener('change', updateImageDisplay);
function updateImageDisplay(){
var curFile = input.files;
var list = document.createElement('ol');
for(var i = 0; i < curFile.length; i++){
if(validFileType(curFile[i])){
source = curFile[i].name;
image.src = window.URL.createObjectURL(curFile[i]);
image.onload = function(){
ctx.drawImage(image, 0, 0);
image.style.display = 'none';
}
listItem.appendChild(image);
}
list.appendChild(listItem);
}
}
var fileTypes = [
'image/jpeg',
'image/pjpeg',
'image/png'
]
function validFileType(file){
for(var i = 0; i < fileTypes.length; i++){
if(file.type === fileTypes[i])
return true;
}
return false;
}
gui = new dat.GUI();
//MOSTRAR RGBA
var color = document.getElementById('color');
function pick(event){
var x = event.layerX;
var y = event.layerY;
var pixel = ctx.getImageData(x, y, 1, 1);
var data = pixel.data;
var rgba = 'RGBA(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')';
color.style.background = rgba;
color.textContent = rgba;
}
canvas.addEventListener('mousemove', pick);
</script>
</html>
Aqui está el código que tengo hasta ahora, muchas gracias.