HTML5 Image Effects App – Adding Noise and Invert

HTML5 Image Effects App – Adding Noise and Invert

2 630
HTML5 Image Effects App - Adding Noise and Invert

HTML5 Image Effects App – Adding Noise and Invert

Today we continue HTML5 canvas examples, I hope you enjoy this series of articles. Even for me, working with graphics, images brings pleasure. Sure that and for you too. Today we will be adding two new filters – Noise and Invert.

Here are our demo and downloadable package:

Live Demo
download in package

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>
<title>HTML5 Image Effects App - Adding Noise and Invert (demo) | Script Tutorials</title>
</head>
<body>
    <div class="example">
        <h3><a href="http://www.script-tutorials.com/html5-canvas-image-effects-app/">HTML5 Image Effects App - Adding Noise and Invert | Script Tutorials</a></h3>

        <div class="column1">
            Reset to:<br />
            <input type="button" onclick="resetToColor()" value="Color" />
            <input type="button" onclick="resetToGrayscale()" value="Grayscale" /><hr />
            Effects:<br />
            <input type="button" onclick="resetToBlur()" value="1. Blur" /><br />
            <input type="button" onclick="resetToNoise()" value="2. Add noise" /><br />
            <input type="button" onclick="resetToInvert()" value="3. Invert colors" /><hr />
            Adjustment:<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" />
            Blur: <input type="button" onclick="changeBlurValue(1)" value="More" />
            <input type="button" onclick="changeBlurValue(-1)" value="Less" /><br />
        </div>
        <div class="column2">
            <canvas id="orig" width="500" height="333"></canvas>
            <canvas id="panel" width="500" height="333"></canvas>
        </div>
        <div style="clear:both;"></div>
    </div>
</body>
</html>

What I did since last our version. I sorted the buttons and added two new. Nothing serious.

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:730px;
    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:500px;
    background-color:#888;
    padding:10px;
}
input[type=button] {
    margin:5px;
}

Step 3. JS

Since today I don`t will publich whole script code again and again, but will publish our new functions which we using. Full version of script you can find in our package. First function for Noise effect:

js/script.js

function Noise() {
    func = 'noise'; // last used function
    var imgd = contextOrig.getImageData(0, 0, iW, iH);
    var data = imgd.data;

    for (var i = 0, n = data.length; i < n; i += 4) {

       // generating random color coefficients
       var randColor1 = 0.6 + Math.random() * 0.4;
       var randColor2 = 0.6 + Math.random() * 0.4;
       var randColor3 = 0.6 + Math.random() * 0.4;

        // assigning random colors to our data
        data[i] = data[i]*p2*randColor1+er; // green
        data[i+1] = data[i+1]*p2*randColor2+eg; // green
        data[i+2] = data[i+2]*p3*randColor3+eb; // blue
    }

    // put image date back to context
    context.putImageData(imgd, 0, 0);
}

We will generate colored noise. As you can see, during walking through all pixels we generating different coefficients for each color channel (red/green/blue). And in result – multiply our source pixel info to these coefficients. In result – we have noise effect. Next function is Invert, here are code:

function Invert(vContext) {
    func = 'color'; // last used function
    var imgd = vContext.getImageData(0, 0, iW, iH);
    var data = imgd.data;

    for (var i = 0, n = data.length; i < n; i += 4) {

        // assigning inverted colors to our data
        data[i] = 255 - data[i]; // green
        data[i+1] = 255 - data[i+1]; // green
        data[i+2] = 255 - data[i+2]; // blue
    }

    // put image date back to context
    vContext.putImageData(imgd, 0, 0);
}
.........
function resetToInvert() {
    p1 = 1;
    p2 = 1;
    p3 = 1;
    er = eg = eb = 0;
    iBlurRate = 1;

    if (func == '') Color();
    Invert(context);
    Invert(contextOrig);
}

Invert function is pretty easy, we will subtract current color value from 255 (white). So we will get reversed color (negative) for each point.


Live Demo
download in package

Conclusion

Not bad, isn`t it? Today we added two new interesting effects to our application – Noise and Invert. I will be glad to see your thanks and comments. Good luck!

SIMILAR ARTICLES

Responsive HTML Email Template

0 59
Polaroid gallery

0 203

2 COMMENTS

Leave a Reply