HTML5 canvas pixelate effect. New great HTML5 tutorial – I going to tell you about creating pixelate photo effect with html5 (at canvas). More, this is not static effect, but it will be pixelating all time.
Here are our demo and downloadable package:
[sociallocker]
[/sociallocker]
Ok, download the source files and lets start coding !
Step 1. HTML
As usual – very small HTML code
index.html
04 |
< meta charset = "utf-8" /> |
05 |
< title >HTML5 pixelate effect | Script Tutorials</ title > |
06 |
< link href = "css/main.css" rel = "stylesheet" type = "text/css" /> |
07 |
< script type = "text/javascript" src = "js/script.js" ></ script > |
11 |
< h2 >HTML5 pixelate effect</ h2 > |
14 |
< div class = "container" > |
16 |
< input type = "radio" name = "mode" onchange = "changeMode(0)" checked />< label >Original image</ label > |
17 |
< input type = "radio" name = "mode" onchange = "changeMode(1)" />< label >Opacity channel</ label > |
18 |
< input type = "radio" name = "mode" onchange = "changeMode(2)" />< label >White channel</ label > |
19 |
< input type = "radio" name = "mode" onchange = "changeMode(3)" />< label >Color channel</ label > |
21 |
< canvas id = "panel" width = "800" height = "600" ></ canvas > |
Step 2. CSS
css/main.css
I am not sure if this is necessary to publish layout page styles today, lets keep it in package today, ok?
Step 3. JS
js/script.js
08 |
var r0, r1, r2, r3, r4, r5, r6 = 0; |
10 |
function changeMode(i) { |
13 |
function getRand(x, y) { |
14 |
return Math.floor(Math.random()*y)+x; |
18 |
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); |
20 |
function drawScene() { |
23 |
ctx.drawImage(imgObj, 0, 0, canvas.width, canvas.height); |
26 |
imgd = ctx.getImageData(0, 0, canvas.width, canvas.height); |
28 |
for ( var y = 0; y < canvas.height; y+=iOpSize){ |
29 |
for ( var x = 0; x < canvas.width; x+=iOpSize){ |
32 |
r0 = 55 + Math.random() * 200; |
33 |
r1 = r2 = r3 = r4 = r5 = r6 = 0; |
34 |
} else if (iMode == 2) { |
36 |
r1 = r3 = r5 = getRand(-iCDif, iCDif * 2); |
37 |
r2 = r4 = r6 = getRand(0, iCDif); |
38 |
} else if (iMode == 3) { |
40 |
r1 = getRand(-iCDif, iCDif * 2); |
41 |
r2 = getRand(0, iCDif); |
42 |
r3 = getRand(-iCDif, iCDif * 2); |
43 |
r4 = getRand(0, iCDif); |
44 |
r5 = getRand(-iCDif, iCDif * 2); |
45 |
r6 = getRand(0, iCDif); |
47 |
for ( var y2 = 0; y2 < iOpSize; y2++){ |
48 |
for ( var x2 = 0; x2 < iOpSize; x2++){ |
49 |
var i = ((y + y2) * canvas.width + x + x2) * 4; |
50 |
data[i+0] = data[i+0] - r1 + r2; |
51 |
data[i+1] = data[i+1] - r3 + r4; |
52 |
data[i+2] = data[i+2] - r5 + r6; |
58 |
ctx.putImageData(imgd, 0, 0); |
62 |
if (window.attachEvent) { |
63 |
window.attachEvent( 'onload' , main_init); |
66 |
var curronload = window.onload; |
67 |
var newonload = function () { |
71 |
window.onload = newonload; |
73 |
window.onload = main_init; |
76 |
function main_init() { |
78 |
canvas = document.getElementById( 'panel' ); |
79 |
ctx = canvas.getContext( '2d' ); |
82 |
imgObj.onload = function () { |
83 |
ctx.drawImage(imgObj, 0, 0, canvas.width, canvas.height); |
84 |
imgd = ctx.getImageData(0, 0, canvas.width, canvas.height); |
86 |
imgObj.src = 'images/01.jpg' ; |
87 |
setInterval(drawScene, 150); |
How to pixelate? I have thinking for some time, and understood that this is not so difficult. We will split our image to sub-regions, and then, we will change colors (or opacity) of each region separately.
Conclusion
Today’s lesson has turned a simple and interesting, isn’t it? Welcome back to read something new and interesting. Good luck in your projects.