Creating an Unbelievable HTML5 Canvas App for Online Image Enhancements
Here are our demo and downloadable packages:
Live Demodownload in package
Ok, download the example files and let's start coding !
Step 1. HTML
Here is all the 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="http://www.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 the used CSS styles.
css/main.cssbody{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.jsvar 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 out what I doing on window.onload: I am creating s new Canvas, obtaining 2d context for drawing, filling its background, and drawing the original image on it. And, when we click to our controls – we play with bits of the source image, and can adjust color, brightness, and can make the image grayscale too.
Live Demodownload in package
Conclusion
Hope that you were happy to play with our scripts. Image processing, filters, effect – this is all very interesting. I'll be glad to see your interesting comments. Good luck!
Source: http://www.script-tutorials.com/html5-canvas-image-effects-app/
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
