HTML5 canvas pixelate effect - script-tutorials.com

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

01
<!DOCTYPE html>

02
<html lang="en" >

03
    <head>

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>

08
    </head>

09
    <body>

10
        <header>

11
            <h2>HTML5 pixelate effect</h2>

12
            <a href="https://www.script-tutorials.com/html5-canvas-pixelate-effect/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>

13
        </header>

14
        <div class="container">

15
            <div class="contr">

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>

20
            </div>

21
            <canvas id="panel" width="800" height="600"></canvas>

22
        </div>

23
    </body>

24
</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

01
// variables

02
var canvas, ctx;

03
var imgObj;

04
var imgd;

05
var iOpSize = 40;

06
var iMode = 0;

07
var iCDif = 80;

08
var r0, r1, r2, r3, r4, r5, r6 = 0;

09
// util functions

10
function changeMode(i) {

11
    iMode = i;

12
}

13
function getRand(x, y) {

14
    return Math.floor(Math.random()*y)+x;

15
}

16
// drawing functions

17
function clear() { // clear canvas function

18
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

19
}

20
function drawScene() { // main drawScene function

21
    clear(); // clear canvas

22
    // draw original image

23
    ctx.drawImage(imgObj, 0, 0, canvas.width, canvas.height);

24
    if (iMode) {

25
        // .. and get its data

26
        imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);

27
        var data = imgd.data;

28
        for (var y = 0; y < canvas.height; y+=iOpSize){

29
            for (var x = 0; x < canvas.width; x+=iOpSize){

30
                // different modes

31
                if (iMode == 1) {

32
                    r0 = 55 + Math.random() * 200;

33
                    r1 = r2 = r3 = r4 = r5 = r6 = 0;

34
                } else if (iMode == 2) {

35
                    r0 = 255;

36
                    r1 = r3 = r5 = getRand(-iCDif, iCDif * 2);

37
                    r2 = r4 = r6 = getRand(0, iCDif);

38
                } else if (iMode == 3) {

39
                    r0 = 255;

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);

46
                }

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;

53
                        data[i+3] = r0;

54
                    }

55
                }

56
            }

57
        }

58
        ctx.putImageData(imgd, 0, 0);

59
    }

60
}

61
// binding onload event

62
if (window.attachEvent) {

63
    window.attachEvent('onload', main_init);

64
} else {

65
    if(window.onload) {

66
        var curronload = window.onload;

67
        var newonload = function() {

68
            curronload();

69
            main_init();

70
        };

71
        window.onload = newonload;

72
    } else {

73
        window.onload = main_init;

74
    }

75
}

76
function main_init() {

77
    // creating canvas and context objects

78
    canvas = document.getElementById('panel');

79
    ctx = canvas.getContext('2d');

80
    // loading source image

81
    imgObj = new Image();

82
    imgObj.onload = function () {

83
        ctx.drawImage(imgObj, 0, 0, canvas.width, canvas.height); // Draw the image on the canvas

84
        imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);

85
    }

86
    imgObj.src = 'images/01.jpg';

87
    setInterval(drawScene, 150); // loop drawScene // 30

88
}

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.