HTML5 Zone is brought to you in partnership with:

I was born in 1981 in one little city. Since I was 10y/o I programmed in different languages. My first languages were basic, then C++/MFC, after .Net (C#, VB.Net, J#, ASP.Net), XSL+XML processing). In the last 5 years I worked with web languages (HTML, CSS, PHP, SQL, XML, XSL, JavaScript). After university I worked in several different companies, eventually becoming a blogger. This is my hobby too. Andrey is a DZone MVB and is not an employee of DZone and has posted 112 posts at DZone. You can read more from them at their website. View Full User Profile

Creating an Unbelievable HTML5 Canvas App for Online Image Enhancements

01.22.2012
| 4971 views |
  • submit to reddit
Today we continue HTML5 canvas examples, which I am sure are still interesting to you. Today we will make an application to adjust image colors (changing photo colors / grayscale). We will able to make the photo darker, lighter, change the density of each channel (RGB), make the image grayscale (and still able to play with colors).

Here are our demo and downloadable packages:

Live Demo

download 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.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 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 Demo

download 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/

Published at DZone with permission of Andrey Prikaznov, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)