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.
Tons de cinza
Vamos começar nossos trabalhos através dos mais básicos dos efeitos. Apresentação de tons de cinza.
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.
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.
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:
Nessa interface, podemos modificar a imagem regulando a “intensidade” das cores nos sliders.
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.
13/10/2011
Muito muito bom Elemar, realmente ficou bastante simples o código.
Obrigado por compartilhar!