Imágenes en blanco y negro
A continuación otro ejemplo práctico de como manipular una imagen: como convertir una imagen a blanco y negro.
Importante: si queremos experimentar manipulando imágenes en el <canvas> tenemos que hacerlo en un sitio web de verdad, como por ejemplo locahost.
| JavaScript | Descripción | Defecto | |
|---|---|---|---|
| width | imgData.width | Devuelve el ancho del objeto ImageData, en píxeles | |
| height | imgData.height | Devuelve la altura del objeto ImageData, en píxeles | |
| data | imageData.data | Devuelve un objeto conteniendo todos los datos del objeto ImageData. | |
| createImageData() | context.createImageData( ancho, alto ); | Crea un nuevo objeto ImageData en blanco. Toma dos argumentos: la anchura y la altura del objeto creado | |
| createImageData() | context.createImageData(imgData); | Crea un nuevo objeto ImageData con las mismas dimensiones que el objeto especificado por el argumanto imgData. | |
| getImageData() | context.getImageData ( x, y, ancho, alto ); | Devuelve un objeto ImageData que copia los datos de los píxeles del rectángulo especificado. | |
| putImageData() | context.putImageData( imgData, x, y, [dirtyX, dirtyY, dirtyWidth, dirtyHeight] ); | Pone los datos de la imagen (de un objeto ImageData especificado) de nuevo en el canvas. |
Vea la chuleta con las propiedades y metodos() de canvas.
Convertir una imagen a blanco y negro
Para convertir a blanco y negro una imagen en colores, hay que manipular uno por uno cada pixel de esta imagen y cambiar el color del pixel por el valor calculado de la luminosidad ( brightness ) del mismo. Podemos considerar la luminosidad como un promedio de los valores de cada color.
var luminosidad = parseInt((pixels[i] + pixels[i + 1] + pixels[i + 2])/3);
Pero hay muchas y variadas fórmulas circulando libremente por internet.
window.onload = function() {
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
var srcImg = document.getElementById("alFaro");
ctx.drawImage(srcImg, 0, 0, ctx.canvas.width, ctx.canvas.height);
var imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var pixels = imgData.data;
for (var i = 0; i < pixels.length; i += 4) {
//calcula la luminosidad percibida para este pixel
var luminosidad = parseInt((pixels[i] + pixels[i + 1] + pixels[i + 2])/3);
pixels[i] = luminosidad; // rojo
pixels[i + 1] = luminosidad; // verde
pixels[i + 2] = luminosidad; // azul
}
ctx.putImageData(imgData, 0, 0);
}
}
}