HTML5 Canvas Image Effects App
Today we continue HTML5 canvas examples, I sure that this still interesting to you. Today we will make application to adjust image colors (Changing photo colors / Grayscale). We will able to make photo darker, lighter, change density of each channel (RGB), make image grayscale (and still able to play with colors).
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> </head> <body> <div class="example"> <h3><a href="https://script-tutorials.com/html5-canvas-image-effects-app/">HTML5 Canvas Image Effects demo (Changing photo colors / Grayscale) | Script Tutorials</a></h3> <div class="column1"> <input type="button" onclick="resetToGrayscale()" value="Grayscale" /><br /> <input type="button" onclick="resetToColored()" value="Colored" /><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" /> </div> <div class="column2"> <canvas id="panel" width="520" height="700"></canvas> </div> <div style="clear:both;"></div> </div> </body> </html>
Pretty small, isn`t it? Here you can see (in left column) different buttons (controls), and Canvas object itself.
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:750px;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:550px; } 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 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 func = 'colored'; // used function window.onload = function() { canvas = document.getElementById('panel'); context = canvas.getContext('2d'); context.fillStyle = '#888888'; context.fillRect(0, 0, 520, 700); var imgObj = new Image(); imgObj.onload = function () { context.drawImage(imgObj, 10, 10, 500, 333); // Draw the image on the canvas } imgObj.src = 'images/01.jpg'; }; function Grayscale() { func = 'grayscale'; var imgd = context.getImageData(10, 10, 500, 333); 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, 10, 353); } function Colored() { func = 'colored'; var imgd = context.getImageData(10, 10, 500, 333); 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, 10, 353); } function reset() { switch(func) { case 'grayscale': resetToGrayscale(); break; case 'colored': resetToColored(); break; } } function changeGrayValue(val) { p1 += val; p2 += val; p3 += val; switch(func) { case 'grayscale': Grayscale(); break; case 'colored': Colored(); 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 'colored': Colored(); break; } } function resetToColored() { p1 = 1; p2 = 1; p3 = 1; er = eg = eb = 0; Colored(); } function resetToGrayscale() { p1 = 0.3; p2 = 0.59; p3 = 0.11; er = eg = eb = 0; Grayscale(); }
I hope that you know basics of working with canvas. Check what I doing on window.onload: I creating new canvas, obtaining 2d context for drawing, filling its background and draw original image on it. And, when we clicking to our controls – we playing with bits of source image, and can adjust color, brightness, also we can make image grayscale too.
Live Demo
Conclusion
Hope that you was happy to play with our scripts. Commonly – image processing, filters, effect – this all very interesting. Will glad to see your interesting comments. Good luck!
Hi,
This is very cool man… i fell in love with it now.
hey your Fantastic I like to learn Html and Css can anyone help me to learn???
Plz can u explain me this, i did not understand this… “var func = ‘colored’; // used function”
Hi Sajid,
This is default function name for ‘reset’ function
what dose
var p1 = 0.99;
var p2 = 0.99;
var p3 = 0.99;
mean
Hi Ban,
They are initial factors (multiplication) for each of the colors