HTML5 Image Effects App – Adding Noise and Invert
Today we continue HTML5 canvas examples, I hope you enjoy this series of articles. Even for me, working with graphics, images brings pleasure. Sure that and for you too. Today we will be adding two new filters – Noise and Invert.
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 Image Effects App - Adding Noise and Invert (demo) | Script Tutorials</title> </head> <body> <div class="example"> <h3><a href="http://script-tutorials.com/html5-canvas-image-effects-app/">HTML5 Image Effects App - Adding Noise and Invert | Script Tutorials</a></h3> <div class="column1"> Reset to:<br /> <input type="button" onclick="resetToColor()" value="Color" /> <input type="button" onclick="resetToGrayscale()" value="Grayscale" /><hr /> Effects:<br /> <input type="button" onclick="resetToBlur()" value="1. Blur" /><br /> <input type="button" onclick="resetToNoise()" value="2. Add noise" /><br /> <input type="button" onclick="resetToInvert()" value="3. Invert colors" /><hr /> Adjustment:<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>
What I did since last our version. I sorted the buttons and added two new. Nothing serious.
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
Since today I don`t will publich whole script code again and again, but will publish our new functions which we using. Full version of script you can find in our package. First function for Noise effect:
js/script.js
function Noise() { func = 'noise'; // 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) { // generating random color coefficients var randColor1 = 0.6 + Math.random() * 0.4; var randColor2 = 0.6 + Math.random() * 0.4; var randColor3 = 0.6 + Math.random() * 0.4; // assigning random colors to our data data[i] = data[i]*p2*randColor1+er; // green data[i+1] = data[i+1]*p2*randColor2+eg; // green data[i+2] = data[i+2]*p3*randColor3+eb; // blue } // put image date back to context context.putImageData(imgd, 0, 0); }
We will generate colored noise. As you can see, during walking through all pixels we generating different coefficients for each color channel (red/green/blue). And in result – multiply our source pixel info to these coefficients. In result – we have noise effect. Next function is Invert, here are code:
function Invert(vContext) { func = 'color'; // last used function var imgd = vContext.getImageData(0, 0, iW, iH); var data = imgd.data; for (var i = 0, n = data.length; i < n; i += 4) { // assigning inverted colors to our data data[i] = 255 - data[i]; // green data[i+1] = 255 - data[i+1]; // green data[i+2] = 255 - data[i+2]; // blue } // put image date back to context vContext.putImageData(imgd, 0, 0); } ......... function resetToInvert() { p1 = 1; p2 = 1; p3 = 1; er = eg = eb = 0; iBlurRate = 1; if (func == '') Color(); Invert(context); Invert(contextOrig); }
Invert function is pretty easy, we will subtract current color value from 255 (white). So we will get reversed color (negative) for each point.
Live Demo
download in package
Conclusion
Not bad, isn`t it? Today we added two new interesting effects to our application – Noise and Invert. I will be glad to see your thanks and comments. Good luck!
Check out the Picozu Editor on http://www.picozu.com for some amazing image processing in your browser.
Hello Adan,
Thank you for your resource