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:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download the source files and lets start coding !
Step 1. HTML
As usual – very small HTML code
index.html
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>HTML5 pixelate effect | Script Tutorials</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/script.js"></script> </head> <body> <header> <h2>HTML5 pixelate effect</h2> <a href="https://www.script-tutorials.com/html5-canvas-pixelate-effect/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> </header> <div class="container"> <div class="contr"> <input type="radio" name="mode" onchange="changeMode(0)" checked /><label>Original image</label> <input type="radio" name="mode" onchange="changeMode(1)" /><label>Opacity channel</label> <input type="radio" name="mode" onchange="changeMode(2)" /><label>White channel</label> <input type="radio" name="mode" onchange="changeMode(3)" /><label>Color channel</label> </div> <canvas id="panel" width="800" height="600"></canvas> </div> </body> </html>
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
// variables var canvas, ctx; var imgObj; var imgd; var iOpSize = 40; var iMode = 0; var iCDif = 80; var r0, r1, r2, r3, r4, r5, r6 = 0; // util functions function changeMode(i) { iMode = i; } function getRand(x, y) { return Math.floor(Math.random()*y)+x; } // drawing functions function clear() { // clear canvas function ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); } function drawScene() { // main drawScene function clear(); // clear canvas // draw original image ctx.drawImage(imgObj, 0, 0, canvas.width, canvas.height); if (iMode) { // .. and get its data imgd = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imgd.data; for (var y = 0; y < canvas.height; y+=iOpSize){ for (var x = 0; x < canvas.width; x+=iOpSize){ // different modes if (iMode == 1) { r0 = 55 + Math.random() * 200; r1 = r2 = r3 = r4 = r5 = r6 = 0; } else if (iMode == 2) { r0 = 255; r1 = r3 = r5 = getRand(-iCDif, iCDif * 2); r2 = r4 = r6 = getRand(0, iCDif); } else if (iMode == 3) { r0 = 255; r1 = getRand(-iCDif, iCDif * 2); r2 = getRand(0, iCDif); r3 = getRand(-iCDif, iCDif * 2); r4 = getRand(0, iCDif); r5 = getRand(-iCDif, iCDif * 2); r6 = getRand(0, iCDif); } for (var y2 = 0; y2 < iOpSize; y2++){ for (var x2 = 0; x2 < iOpSize; x2++){ var i = ((y + y2) * canvas.width + x + x2) * 4; data[i+0] = data[i+0] - r1 + r2; data[i+1] = data[i+1] - r3 + r4; data[i+2] = data[i+2] - r5 + r6; data[i+3] = r0; } } } } ctx.putImageData(imgd, 0, 0); } } // binding onload event if (window.attachEvent) { window.attachEvent('onload', main_init); } else { if(window.onload) { var curronload = window.onload; var newonload = function() { curronload(); main_init(); }; window.onload = newonload; } else { window.onload = main_init; } } function main_init() { // creating canvas and context objects canvas = document.getElementById('panel'); ctx = canvas.getContext('2d'); // loading source image imgObj = new Image(); imgObj.onload = function () { ctx.drawImage(imgObj, 0, 0, canvas.width, canvas.height); // Draw the image on the canvas imgd = ctx.getImageData(0, 0, canvas.width, canvas.height); } imgObj.src = 'images/01.jpg'; setInterval(drawScene, 150); // loop drawScene // 30 }
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.
Live Demo
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.
Nice trick. Haven’t seen that one before. :)
Daniel Piechnick
Hi,
Very very nice jquery but does not work in IE8 please reply soon
Hello Sana,
Unfortunately ‘getContext’ is not supported in IE8. This outdated browser doesn’t work with HTML5 (canvas)