Creating an Unbelievable HTML5 Canvas App for Online Image Enhancements

Creating an Unbelievable HTML5 Canvas App for Online Image Enhancements

6 57140
HTML5 Canvas Image Effects App

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!

SIMILAR ARTICLES

Understanding Closures

0 7005

6 COMMENTS

  1. Plz can u explain me this, i did not understand this… “var func = ‘colored’; // used function”

Leave a Reply to Mohamed Azhar Cancel reply