Efeitos básicos e Color balancing usando HTML5

Posted on 13/10/2011

1


Olá pessoal, tudo certo?!

No post de hoje, continuo mostrando algumas possibilidades para manipulação de imagens usando Canvas do HTML5. De certa forma, esse post é uma continuação para Image Pixelation com Canvas do HTML5.

Há outros posts sobre HTML5.

Tons de cinza

Vamos começar nossos trabalhos através dos mais básicos dos efeitos. Apresentação de tons de cinza.

image

Eis o HTML:


              



    Grayscale
    
    


    
    
    
    
    
    




              

            

            
E… eis o script:

            

              

              
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var image = new Image();
image.src = "images/veneza.jpg";

$(image).load(function () {
    context.drawImage(image, 0, 0, 480, 360);

    var imagedata = context.getImageData(0, 0,
        canvas.width,
        canvas.height
        );

    var pixels = imagedata.data;
    var numpixels = pixels.length / 4;

    context.clearRect(
        0, 0,
        canvas.width,
        canvas.height);


    for (var pos = 0; pos < numpixels; pos++) {

        var gray = pixels[pos * 4] * 0.3 +
                pixels[pos * 4 + 1] * 0.59 +
                pixels[pos * 4 + 2] * 0.11

        pixels[pos * 4] = gray;
        pixels[pos * 4 + 1] = gray;
        pixels[pos * 4 + 2] = gray;
    }

    context.putImageData(imagedata, 0, 0);
});


              

            

            
O que fizemos:

            
    
              
  • carregamos a imagem;
    • 
              
  • carregamos a coleção de pixels;
    • 
              
  • para cada pixel, calculamos a tonalidade de cinza usando a composição clássica;
    • 
              
  • aplicamos os dados alterados de volta no canvas.
    • 
            

            
Preto e branco

            
Já sabemos como converter a imagem para tons de cinza. Agora, vamos ver como trabalhar apenas com preto e branco.

            
image

            
O html é basicamente o mesmo. A única mudança ocorre no script. Para “economizar espaço”, apresento apenas o loop principal (onde ocorreu a modificação) Observe:

            

              

              
for (var pos = 0; pos < numpixels; pos++) {

    var gray = (pixels[pos * 4]  +
            pixels[pos * 4 + 1]+
            pixels[pos * 4 + 2] ) / 3;

    var bw = (gray > 204 || gray < 51) ? 0 : 255;

    pixels[pos * 4] = bw;
    pixels[pos * 4 + 1] = bw;
    pixels[pos * 4 + 2] = bw;
}


              

            

            
A novidade está na verificação dos intervalos (preto para pixels cinzas “maiores” que 204 ou “menores” que que 51).

            
Inversão de cores (negativo)

            
Ainda mais simples é a inversão das cores.

            
image

            
Outra vez, apresento só o loop principal (onde houve a modificação). Observe:

            

              

              
for (var pos = 0; pos < numpixels; pos++) {

    pixels[pos * 4] = 255 - pixels[pos * 4];
    pixels[pos * 4 + 1] = 255 - pixels[pos * 4 + 1];
    pixels[pos * 4 + 2] = 255 - pixels[pos * 4 + 2];
}


              

            

            
Image color balancer

            
Para terminar, gostaria de apresentar algo um pouco mais “interativo”. Observe:

            
image

            
Nessa interface, podemos modificar a imagem regulando a “intensidade” das cores nos sliders.

            
image

            
Para isso, defini esses esse html:

            

              

              



    Balancer
    
    


    
    
    

        

        

        

        

        

        

    

    
    
    




              

            

            
E agora, o script. Um pouco mais complexo, mas interessante:

            

              

              
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var image = new Image();
image.src = "images/veneza.jpg";

$(image).load(function () {
    $(".sliders").slider(
    {
        min: 0,
        max: 400,
        value: 100,
        change: onchange
    });

            
    context.drawImage(image, 0, 0, 480, 360);
});

function onchange(e, ui) {
    context.drawImage(image, 0, 0, 480, 360);

    var rfactor = $("#rslider").slider("value") / 100;
    var gfactor = $("#gslider").slider("value") / 100;
    var bfactor = $("#bslider").slider("value") / 100;

    var imagedata = context.getImageData(0, 0,
        canvas.width,
        canvas.height
        );

    var pixels = imagedata.data;
    var numpixels = pixels.length / 4;

    context.clearRect(
        0, 0,
        canvas.width,
        canvas.height);


    for (var pos = 0; pos < numpixels; pos++) {

        pixels[pos * 4] = pixels[pos * 4] * rfactor;
        pixels[pos * 4 + 1] = pixels[pos * 4 + 1] * gfactor;
        pixels[pos * 4 + 2] = pixels[pos * 4 + 2] * bfactor;
    }

    context.putImageData(imagedata, 0, 0);
};


              

            

            
O código relaciona algum jQueryUI. Mas ainda assim, permanece simples. Não acha?!

            
Era isso.

            
Smiley piscando

            
            

              Etiquetado:, , , 
            

            

              Posted in: Post