El negativo de una imagen
A continuación veremos un ejemplo práctico de como manipular una imagen. Para ser más exactos veremos como poner una imagen en negativo en el
<canvas>.
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.
Colores complementarios con rgb.
Llamamos colores complementarios los colores diametralmente opuestos en el circulo cromático.
Para encontrar el color complementario de un color dado en rgb, empezamos separando el color en sus componentes cromáticos.
Tomemos por ejemplo este verde: rgb(106, 177, 80). Sus componentes cromáticos son:
r (rojo) = 106
g (verde) = 177
b (azul) = 80;
A continuación calculamos el valor de cada componente cromático del color complementario ( diametralmente opuesto ), teniendo en cuenta que el valor máximo que pueden tomar estos componentes es 255.
r (rojo) = 255 – 106 = 149
g (verde) = 255 - 177 = 78
b (azul) = 255 – 80 = 175
El código rgb del color complementario es : rgb(149, 78, 175).
Invertir los colores de una imagen
Para sacar el negativo de una imagen en colores, hay que acceder uno por uno cada pixel de esta imagen y cambiar el color del pixel por el color complementario,
y esto ya sabemos como hacerlo.
Esta vez no manipulamos toda la imagen sino una zona. El método putImageData() toma en este caso siete argumentos:
- la imagen manipulada imgData,
- las coordenadas x e y de donde poner la imagen en el <canvas>
- las coordenadas dirtyX y dirtyY de donde empezar a manipular la imagen
- la anchura dirtyWidth y la altura dirtyHeight del rectángulo manipulado.
window.onload = function() {
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
var srcImg = document.getElementById("enfeinada");
// dibuja la imagen en el canvas
ctx.drawImage(srcImg, 0, 0, ctx.canvas.width, ctx.canvas.height);
//Devuelve un objeto imgData con los datos de todos los píxeles de la imagen
var imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var pixels = imgData.data;
// recorre uno a uno los pixeles de la imagen y cambia el color por el complementario
for (var i = 0; i < pixels.length; i += 4) {
pixels[i] = 255 - pixels[i]; // rojo
pixels[i + 1] = 255 - pixels[i + 1]; // verde
pixels[i + 2] = 255 - pixels[i + 2]; // azul
}
// pone la imagen modificada en el canvas
// observe que dirtyX = 25 y dirtyY = 25
ctx.putImageData(imgData, 0, 0, 25, 25, 200, 182);
}
}
}