Imágenes en sepia
A continuación veremos otro ejemplo práctico de como manipular una imagen. Para ser más exactos veremos como convertir una imagen a tonos de sepia.
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 la lona |
Vea la chuleta con las propiedades y metodos() de canvas.
Convertir una imagen tonos de sepia, es muy parecido a lo que acabamos de hacer para convertir una imagen a blanco y negro.
Una vez calculada la luminosidad modificaremos ligeramente el valor de cada componente de color para obtener los tonos de sepia.
No hay que olvidar que el valor máximo de cada componente cromático es de 255. Para no pasarnos de 255, utilizaremos Math.min
para escoger el mínimo entre el valor calculado del componente cromático y 255.
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 = .3 * pixels[i] + .6 * pixels[i + 1] + .1 * pixels[i + 2];
pixels[i] = Math.min(luminosidad + 40, 255); // rojo
pixels[i + 1] = Math.min(luminosidad + 15, 255); // verde
pixels[i + 2] = luminosidad; // azul
}
ctx.putImageData(imgData, 0, 0);
}
}
}