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
[sociallocker]
download in package
[/sociallocker]
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="https://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
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!
Its very nice and helpful for me.
thanx a lot
Great man, I loved this exemples, very usefull!