HTML5 Image Effects App – Adding Noise and Invert

Noise and Invert HTML5 image effects. 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:

Contents

Step 1. HTML
index.html
Step 2. CSS
css/main.css
Step 3. JS
js/script.js
Conclusion

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> 
  
<title>HTML5 Image Effects App - Adding Noise and Invert (demo) | Script Tutorials</title> 
  
</head> 
  
<body> 
  
    <div class="example"> 
  
        <h3><a href="https://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

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!