En el tratamiento digital de imágenes el hola mundo puede ser precisamente este fragmento de código, convertir a escala de grises una imagen con JavaScript. Para ello vamos a utilizar jQuery, la librería de JavaScript que nos facilita toda la tarea. Para poder leer una imagen en JavaScript tenemos que hacer uso del método del elemento Canvas de HTML5 getImageData. Este método nos proporciona una array que contiene la información del color de cada píxel. El formato que se utiliza es RGBA donde las tres primeras letras son Red (rojo), Green (verde) y Blue (azul) y la última letra Alpha es la transparencia.
Para realizar la conversión a escala de grises he utilizado dos métodos. Por un lado obteniendo un promedio, se suman las componentes RGB y se divide por 3. Se puede apreciar en este caso que se pierde información. Esto es debido a que el ojo humano no es igual de sensible a todos los colores, es más sensible al color verde que a los otros dos y más sensible al rojo que al azul. Por eso he aplicado un segundo método donde se utiliza una ponderación de estos tres colores siendo el resultado 0.33 x R + 0.5 x G + 0.15 x B. A continuación puedes ver el resultado del ejemplo.
See the Pen <a href=»http://codepen.io/delValle/pen/VLooBq/»>VLooBq</a> by Luis (<a href=»http://codepen.io/delValle»>@delValle</a>) on <a href=»http://codepen.io»>CodePen</a>.<br />
Puedes ver todo el código a continuación para que te lo guardes y practiques con el.
2331<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<style>
#canvas1{border:1px solid #2980b9; display:none;}
#canvas2{border:1px solid #2980b9; display:none;}
#text1{display:none; color: #2980b9;}
#text2{display:none; color: #2980b9;}
#original{border:1px solid #2980b9;}
td{text-align: center;}
</style>
<script>
$(function(){
// Obtenemos el canvas
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
// Obtenemos el canvas
var canvas2=document.getElementById("canvas2");
var ctx2=canvas2.getContext("2d");
// Creamos una imagen
var image = new Image();
$("#convertir").click(function(){
// Asignamos la misma altura y ancho de la imagen al canvas
ctx1.canvas.height=image.height;
ctx1.canvas.width=image.width;
ctx2.canvas.height=image.height;
ctx2.canvas.width=image.width;
// Dibujamos la imagen en el canvas
ctx1.drawImage(image,0,0);
ctx2.drawImage(image,0,0);
// Aplicamos la escala de grises
var imgData1=ctx1.getImageData(0,0,canvas1.width,canvas1.height);
var data1=imgData1.data;
for(var i = 0; i < data1.length; i += 4) {
var grayscale= data1[i]+data1[i+1]+data1[i+2]/3;
data1[i]=grayscale;
data1[i+1]=grayscale;
data1[i+2]=grayscale;
}
// Asignamos la imagen al Canvas
ctx1.putImageData(imgData1,0,0);
// Aplicamos la escala de grises según el ojo humano
var imgData2=ctx2.getImageData(0,0,canvas2.width,canvas2.height);
var data2=imgData2.data;
for(var i = 0; i < data2.length; i += 4) {
var grayscale= 0.33*data2[i]+0.5*data2[i+1]+0.15*data2[i+2];
data2[i]=grayscale;
data2[i+1]=grayscale;
data2[i+2]=grayscale;
}
// Asignamos la imagen al Canvas
ctx2.putImageData(imgData2,0,0);
// Mostramos los canvas y los textos
$("#canvas1").fadeIn();
$("#text1").fadeIn();
$("#canvas2").fadeIn();
$("#text2").fadeIn();
});
// Lectura de imagen OJO, esto puede dar error con imágenes protegidas
image.crossOrigin = "anonymous";
image.src = "https://farm6.staticflickr.com/5589/14820347476_a0d33c26d9_t.jpg";
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<button id="convertir">Convertir</button>
</td>
<td>
<p id="text1">Promedio</p>
</td>
<td>
<p id="text2">Promedio2</p>
</td>
</tr>
<tr>
<td>
<image id="original" src="https://farm6.staticflickr.com/5589/14820347476_a0d33c26d9_t.jpg"></image>
</td>
<td>
<canvas id="canvas1" width=140 height=140></canvas>
</td>
<td>
<canvas id="canvas2" width=140 height=140></canvas>
</td>
</tr>
</tbody>
</table>
</body>
</html>Seguiremos metiendo más fragmentos de código relacionados con este tema ya que resulta muy interesante saber como podemos tratar las imágenes con JavaScript.
