DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
15-05-2014

En este artículo veremos como obtener los tres canales RGB de una imagen y operarlos por separados; al igual que los en los artículos pasados, usaremos HTML5 y javaScript nativo para lograr el objetivo; el cuerpo del documento no difiere mucho de los otros ejercicios que ya hemos realizado:

Definiendo el HTML

Básicamente, tenemos un Tag Canvas:

    <canvas id="canvas">
            <p>Tu navegador no soporta Canvas.</p>
    </canvas>

Y tres Imágenes en donde serán colocados los tres canales RGB:

    <img id="r"/>
    <img id="g"/>
    <img id="b"/>

Definiendo el JavaScript

Variables globales:

    var canvas = document.getElementById('canvas');// canvas
    var ctx = canvas.getContext('2d'); // contexto

    var imgR = document.getElementById('r');// imagen que representa el canal R
    var imgG = document.getElementById('g');// imagen que representa el canal G
    var imgB = document.getElementById('b');// imagen que representa el canal B

    var srcImg = "image.png";// imagen fuente

Creamos un objeto de tipo Image y le asignamos una imagen fuente:

    img = new Image();
    img.src = srcImg;

Una vez que la imagen se haya cargado, redimensionamos el Canvas a las dimensiones de la imagen; dibujamos la imagen en el Canvas y colocamos los canales RGB por separados en la imagen invocando al método getRGB():

    // cargo la imagen
    img.onload = function() {

        // reescalamos el canvas a las dimenciones de la imagen
        canvas.width = img.width;
        canvas.height = img.height;

        // dibujamos la imagen en el Canvas
        ctx.drawImage(this, 0, 0);
        getRGB();

    };

La siguiente función permite separar los tres canales RGB de una imagen dibujada en el Canvas en tres Tags imgs:

  // pinta una imagen por canal
  function getRGB() {

      // obtenemos el ImageData
      var imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
      // obtenemos el ImageData para R
      var imgdR = ctx.getImageData(0, 0, canvas.width, canvas.height);
      // obtenemos el ImageData para G
      var imgdG = ctx.getImageData(0, 0, canvas.width, canvas.height);
      // obtenemos el ImageData para B
      var imgdB = ctx.getImageData(0, 0, canvas.width, canvas.height);

      // cada una de estos array va a tener un solo canal
      var pixR = imgdR.data;
      var pixG = imgdG.data;
      var pixB = imgdB.data;
      // va a tener los 3 canales; la usaremos 
      //para reestablecer los colores originales en el canvas
      var pix = imgd.data;

      // cambiamos el contraste
      for (var i = 0, n = pixR.length; i Canvas; canal R
      ctx.putImageData(imgdR, 0, 0);
      dataURL = canvas.toDataURL();
      imgR.src = dataURL;
      // retornamos la data modificada al Canvas; canal G
      ctx.putImageData(imgdG, 0, 0);
      dataURL = canvas.toDataURL();
      imgG.src = dataURL;
      // retornamos la data modificada al Canvas; canal B
      ctx.putImageData(imgdB, 0, 0);
      dataURL = canvas.toDataURL();
      imgB.src = dataURL;
      // retornamos la data original al Canvas; canal RGB
      ctx.putImageData(imgd, 0, 0);
  }

Analizando la función anterior...

Obtenemos la ImageData o data sobre toda la imagen dibujada en el Canvas, la cual nos permitirá operar la data que compone a la imagen a nivel de pixel en su escala RGB; puedes ver más sobre el ImageData en el siguiente enlace:

    // obtenemos el ImageData
    var imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
    // obtenemos el ImageData para R
    var imgdR = ctx.getImageData(0, 0, canvas.width, canvas.height);
    // obtenemos el ImageData para G
    var imgdG = ctx.getImageData(0, 0, canvas.width, canvas.height);
    // obtenemos el ImageData para B
    var imgdB = ctx.getImageData(0, 0, canvas.width, canvas.height);

El siguiente paso consiste en obtener todos los píxeles que componen a la imagen; esta información viene almacenado en un Array:

    // cada una de estos array va a tener un solo canal
    var pixR = imgdR.data;
    var pixG = imgdG.data;
    var pixB = imgdB.data;
    // va a tener los 3 canales; la usaremos 
    // para reestablecer los colores originales en el canvas
    var pix = imgd.data;

Esta sección de código representa el corazón del ejercicio; se obtiene un canal por vez, estableciendo los restantes en cero:

    // cambiamos el contraste
    for (var i = 0, n = pixR.length; i 

Luego de que tengamos divididos los canales; el siguiente paso consiste en guardar los tres canales RGB en imágenes separadas:

    // retornamos la data modificada al Canvas; canal R
    ctx.putImageData(imgdR, 0, 0);
    dataURL = canvas.toDataURL();
    imgR.src = dataURL;
    // retornamos la data modificada al Canvas; canal G
    ctx.putImageData(imgdG, 0, 0);
    dataURL = canvas.toDataURL();
    imgG.src = dataURL;
    // retornamos la data modificada al Canvas; canal B
    ctx.putImageData(imgdB, 0, 0);
    dataURL = canvas.toDataURL();
    imgB.src = dataURL;
    // retornamos la data original al Canvas; canal RGB
    ctx.putImageData(imgd, 0, 0);

Resultado Final


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Creando un pulso con CSS

Creando un pulso con CSS

Como dibujar con canvas y ciclos -HTML5

Como dibujar con canvas y ciclos -HTML5

Wave World con Canvas

Wave World con Canvas

Algunos artículos que te pueden interesar

La API de archivos en JavaScript - accediendo al contenido

La API de archivos en JavaScript - accediendo al contenido

En esta entrada presentaremos una API para la lectura de los archivos cargados mediante input type="file" u otros métodos como el Drag and Drop con JavaScript.

Andrés Cruz 09-02-2016

Cómo crear anillos de circulos en JavaScript y Canvas

Cómo crear anillos de circulos en JavaScript y Canvas

En esta entrada veremos cómo crear un sistema sencillo de anillos de círculos con Canvas y JavaScript; para esto se hará uso de la función requestAnimationFrame() y animar el Canvas.

Andrés Cruz 16-11-2015

Detectando la orientación del dispositivo con el API de javaScript

Detectando la orientación del dispositivo con el API de javaScript

Con esta API podemos obtener información sobre la orientación de un dispositivo, en específico.

Andrés Cruz 08-04-2014