HTML5 Canvas Image Effects App – Adding Blur

HTML5 Canvas Image Effects App – Adding Blur

2 649
HTML5 Canvas Image Effects App - Adding Blur

HTML5 Canvas Image Effects App – Adding Blur

Today we continue HTML5 canvas examples, hope that you remember application which we made quite 2 weeks ago? Sure that this was very interesting to you to investigate image processing functions. Today I decided to continue and added new filter here – Blur.

Here are our demo and downloadable package:

Live Demo
download in package

Ok, download the example files and lets start coding !


Step 1. HTML

Here are all html of my demo

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/script.js"></script>
<title>HTML5 Canvas Image Effects App - Adding Blur (demo)</title>
</head>
<body>
    <div class="example">
        <h3><a href="http://www.script-tutorials.com/html5-canvas-image-effects-app/">HTML5 Canvas Image Effects demo (adding blur effect) | Script Tutorials</a></h3>

        <div class="column1">
            <input type="button" onclick="resetToGrayscale()" value="Grayscale" /><br />
            <input type="button" onclick="resetToColor()" value="Color" /><br />
            <input type="button" onclick="resetToBlur()" value="Blur(1)" /><br />
            <input type="button" onclick="reset()" value="Reset" /><br />
            <input type="button" onclick="changeGrayValue(0.1)" value="Lighter" /><br />
            <input type="button" onclick="changeGrayValue(-0.1)" value="Darker" /><br />
            Red: <input type="button" onclick="changeColorValue('er', 10)" value="More" />
            <input type="button" onclick="changeColorValue('er', -10)" value="Less" /><br />
            Green: <input type="button" onclick="changeColorValue('eg', 10)" value="More" />
            <input type="button" onclick="changeColorValue('eg', -10)" value="Less" /><br />
            Blue: <input type="button" onclick="changeColorValue('eb', 10)" value="More" />
            <input type="button" onclick="changeColorValue('eb', -10)" value="Less" />
            Blur: <input type="button" onclick="changeBlurValue(1)" value="More" />
            <input type="button" onclick="changeBlurValue(-1)" value="Less" /><br />
        </div>
        <div class="column2">
            <canvas id="orig" width="500" height="333"></canvas>
            <canvas id="panel" width="500" height="333"></canvas>
        </div>
        <div style="clear:both;"></div>
    </div>
</body>
</html>

Make attention, that since today I made 2 canvas objects. First one will contain original image – second one – our effects. Also I added 3 new buttons. First – to switch to Blur effect, next 2 – increase / decrease blur level.

Step 2. CSS

Here are used CSS styles.

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:730px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}

h3 {
    text-align:center;
}

.column1 {
    float:left;
    padding-right: 10px;
    text-align:right;
    width:185px;
}
.column2 {
    float:left;
    width:500px;
    background-color:#888;
    padding:10px;
}

input[type=button] {
    margin:5px;
}

Step 3. JS

Now – most interesting – its inner functionality (HTML5 canvas script).

js/script.js

var canvas;
var context;
var iW = 0; // image width
var iH = 0; // image height
var p1 = 0.99;
var p2 = 0.99;
var p3 = 0.99;
var er = 0; // extra red
var eg = 0; // extra green
var eb = 0; // extra blue
var iBlurRate = 0;
var func = 'color'; // last used function

window.onload = function() {
    // creating context for original image
    canvasOrig = document.getElementById('orig');
    contextOrig = canvasOrig.getContext('2d');

    // draing original image
    var imgObj = new Image();
    imgObj.onload = function () {
        iW = this.width;
        iH = this.height;
        contextOrig.drawImage(imgObj, 0, 0, iW, iH); // draw the image on the canvas
    }
    imgObj.src = 'images/01.jpg';

    // creating testing context
    canvas = document.getElementById('panel');
    context = canvas.getContext('2d');
};

function Grayscale() {
    func = 'grayscale'; // last used function
    var imgd = contextOrig.getImageData(0, 0, iW, iH);
    var data = imgd.data;

    for (var i = 0, n = data.length; i < n; i += 4) {
        var grayscale = data[i] * p1 + data[i+1] * p2 + data[i+2] * p3;
        data[i]   = grayscale + er; // red
        data[i+1] = grayscale + eg; // green
        data[i+2] = grayscale + eb; // blue
    }
    context.putImageData(imgd, 0, 0);
}

function Color() {
    func = 'color'; // last used function
    var imgd = contextOrig.getImageData(0, 0, iW, iH);
    var data = imgd.data;

    for (var i = 0, n = data.length; i < n; i += 4) {
        data[i]   = data[i]*p1+er; // red
        data[i+1] = data[i+1]*p2+eg; // green
        data[i+2] = data[i+2]*p3+eb; // blue
    }
    context.putImageData(imgd, 0, 0);
}

function Blur() {
    func = 'blur'; // last used function
    var imgd = contextOrig.getImageData(0, 0, iW, iH);
    var data = imgd.data;

    for (br = 0; br < iBlurRate; br += 1) {
        for (var i = 0, n = data.length; i < n; i += 4) {

            iMW = 4 * iW;
            iSumOpacity = iSumRed = iSumGreen = iSumBlue = 0;
            iCnt = 0;

            // data of close pixels (from all 8 surrounding pixels)
            aCloseData = [
                i - iMW - 4, i - iMW, i - iMW + 4, // top pixels
                i - 4, i + 4, // middle pixels
                i + iMW - 4, i + iMW, i + iMW + 4 // bottom pixels
            ];

            // calculating Sum value of all close pixels
            for (e = 0; e < aCloseData.length; e += 1) {
                if (aCloseData[e] >= 0 && aCloseData[e] <= data.length - 3) {
                    iSumOpacity += data[aCloseData[e]];
                    iSumRed += data[aCloseData[e] + 1];
                    iSumGreen += data[aCloseData[e] + 2];
                    iSumBlue += data[aCloseData[e] + 3];
                    iCnt += 1;
                }
            }

            // apply average values
            data[i] = (iSumOpacity / iCnt)*p1+er;
            data[i+1] = (iSumRed / iCnt)*p2+eg;
            data[i+2] = (iSumGreen / iCnt)*p3+eb;
            data[i+3] = (iSumBlue / iCnt);
        }
    }
    context.putImageData(imgd, 0, 0);
}

function reset() {
    switch(func) {
        case 'grayscale': resetToGrayscale(); break;
        case 'color': resetToColor(); break;
        case 'blur': resetToBlur(); break;
    }
}

function changeGrayValue(val) {
    p1 += val;
    p2 += val;
    p3 += val;

    switch(func) {
        case 'grayscale': Grayscale(); break;
        case 'color': Color(); break;
        case 'blur': Blur(); break;
    }
}

function changeColorValue(sobj, val) {
    switch (sobj) {
        case 'er': er += val; break;
        case 'eg': eg += val; break;
        case 'eb': eb += val; break;
    }

    switch(func) {
        case 'grayscale': Grayscale(); break;
        case 'color': Color(); break;
        case 'blur': Blur(); break;
    }
}

function changeBlurValue(val) {
    iBlurRate += val;

    if (iBlurRate <= 0) Color();
    if (iBlurRate > 4) iBlurRate = 4;

    Blur();
}

function resetToColor() {
    p1 = 1;
    p2 = 1;
    p3 = 1;
    er = eg = eb = 0;
    iBlurRate = 0;

    Color();
}
function resetToBlur() {
    p1 = 1;
    p2 = 1;
    p3 = 1;
    er = eg = eb = 0;
    iBlurRate = 1;

    Blur();
}
function resetToGrayscale() {
    p1 = 0.3;
    p2 = 0.59;
    p3 = 0.11;
    er = eg = eb = 0;
    iBlurRate = 0;

    Grayscale();
}

As you can notice – sources slightly changed. Now we have 2 canvas objects, so we will using ‘getImageData’ function only with first canvas with original image. Also I added new functions for Blur effect. So how I Blurring image? – commonly, I passing through all pixels of image, taking 8 surrounding pixels of each pixels, calculating average opacity, red/green/blue values of these 8 pixels, and then, apply that average calculated value to our enum pixel.


Live Demo
download in package

Conclusion

Not bad, isn`t it? Today we added new interesting effect to our application – Blur. I hope that in coming articles we will continue lessons for image processing. I will be glad to see your thanks and comments. Good luck!

SIMILAR ARTICLES

Practice with Text Shadows

0 383
Responsive HTML Email Template

0 598

2 COMMENTS

Leave a Reply