Convertir a escala de grises una imagen con JavaScript

Luis del Valle Hernández

hace 10 años

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>

100

101

102

103

104

105

106

107

108

109

110

111

2331<!DOCTYPE html>

<html>

<head>

<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>

$(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>

</td>

<td>

</td>

<td>

</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.