Platinum Partner
css,html5,html & xhtml

Creating an Unbelievable HTML5 Canvas App for Online Image Enhancements

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/

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}