HTML5 Image Effects – Sepia

HTML5 Image Effects – Sepia

9 56510
HTML5 Image Effects - Sepia

HTML5 Image Effects – Sepia

Today we continue our HTML5 canvas examples, today I want to share with you a method of applying a sepia effect to images. This is not a very difficult method, anyone can repeat it. In our demo we can play with different images by adding a sepia effect to them, as well as we can ‘export’ our result on the image element (<img>).

Here are our demo and downloadable package:

Live Demo
download in package

Ok, download the example files and lets start coding !


Step 1. HTML Markup

This is markup of our demo page. Here it is:

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Image Effects - Sepia | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script>
            google.load("jquery", "1.7.1");
        </script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>HTML5 Image Effects - Sepia</h2>
            <a href="https://www.script-tutorials.com/html5-image-effects-sepia/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div id="container" class="container">
            <table cellspacing=0>
                <tr>
                    <td><p>Canvas Object &lt;CANVAS&gt;</p></td>
                    <td><p>Image Object &lt;IMG&gt;</p></td>
                </tr>
                <tr>
                    <td><canvas id="source" width="500" height="500"></canvas><div id="next" class="button">Next image</div></td>
                    <td><img id="img" src="images/button.png" /></td>
                </tr>
                <tr>
                    <td><div id="sepia" class="button">Apply Sepia Effect</div></td>
                    <td><div id="toImage" class="button">To Image</div></td>
                </tr>
            </table>
        </div>
    </body>
</html>

Basically – it contain just one canvas object, one image, and three ‘buttons’ (div elements).

Step 2. CSS

Here are our stylesheets:

css/main.css

*{
    margin:0;
    padding:0;
}
body {
    background-image:url(../images/bg.png);
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
header {
    background-color:#212121;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    position:relative;
    width:100%;
    z-index:100;
}
header h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
header a.stuts,a.stuts:visited {
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
header .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    color: #000000;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    width: 1005px;
}
table {
    background-color: rgba(255, 255, 255, 0.7);
}
table td {
    border: 1px inset #888888;
    position: relative;
    text-align: center;
}
table td p {
    display: block;
    padding: 10px 0;
}
.button {
    cursor: pointer;
    height: 20px;
    padding: 15px 0;
    position: relative;
    text-align: center;
    width: 500px;
   -moz-user-select: none;
   -khtml-user-select: none;
   user-select: none;
}

Step 3. JS

Finally – our javascript code of Sepia effect:

js/script.js

// variables
var canvas, ctx;
var imgObj;
// set of sepia colors
var r = [0, 0, 0, 1, 1, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 6, 6, 7, 7, 7, 7, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, 11, 11, 12, 12, 12, 12, 13, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 17, 18, 19, 19, 20, 21, 22, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 39, 40, 41, 42, 44, 45, 47, 48, 49, 52, 54, 55, 57, 59, 60, 62, 65, 67, 69, 70, 72, 74, 77, 79, 81, 83, 86, 88, 90, 92, 94, 97, 99, 101, 103, 107, 109, 111, 112, 116, 118, 120, 124, 126, 127, 129, 133, 135, 136, 140, 142, 143, 145, 149, 150, 152, 155, 157, 159, 162, 163, 165, 167, 170, 171, 173, 176, 177, 178, 180, 183, 184, 185, 188, 189, 190, 192, 194, 195, 196, 198, 200, 201, 202, 203, 204, 206, 207, 208, 209, 211, 212, 213, 214, 215, 216, 218, 219, 219, 220, 221, 222, 223, 224, 225, 226, 227, 227, 228, 229, 229, 230, 231, 232, 232, 233, 234, 234, 235, 236, 236, 237, 238, 238, 239, 239, 240, 241, 241, 242, 242, 243, 244, 244, 245, 245, 245, 246, 247, 247, 248, 248, 249, 249, 249, 250, 251, 251, 252, 252, 252, 253, 254, 254, 254, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255],
    g = [0, 0, 1, 2, 2, 3, 5, 5, 6, 7, 8, 8, 10, 11, 11, 12, 13, 15, 15, 16, 17, 18, 18, 19, 21, 22, 22, 23, 24, 26, 26, 27, 28, 29, 31, 31, 32, 33, 34, 35, 35, 37, 38, 39, 40, 41, 43, 44, 44, 45, 46, 47, 48, 50, 51, 52, 53, 54, 56, 57, 58, 59, 60, 61, 63, 64, 65, 66, 67, 68, 69, 71, 72, 73, 74, 75, 76, 77, 79, 80, 81, 83, 84, 85, 86, 88, 89, 90, 92, 93, 94, 95, 96, 97, 100, 101, 102, 103, 105, 106, 107, 108, 109, 111, 113, 114, 115, 117, 118, 119, 120, 122, 123, 124, 126, 127, 128, 129, 131, 132, 133, 135, 136, 137, 138, 140, 141, 142, 144, 145, 146, 148, 149, 150, 151, 153, 154, 155, 157, 158, 159, 160, 162, 163, 164, 166, 167, 168, 169, 171, 172, 173, 174, 175, 176, 177, 178, 179, 181, 182, 183, 184, 186, 186, 187, 188, 189, 190, 192, 193, 194, 195, 195, 196, 197, 199, 200, 201, 202, 202, 203, 204, 205, 206, 207, 208, 208, 209, 210, 211, 212, 213, 214, 214, 215, 216, 217, 218, 219, 219, 220, 221, 222, 223, 223, 224, 225, 226, 226, 227, 228, 228, 229, 230, 231, 232, 232, 232, 233, 234, 235, 235, 236, 236, 237, 238, 238, 239, 239, 240, 240, 241, 242, 242, 242, 243, 244, 245, 245, 246, 246, 247, 247, 248, 249, 249, 249, 250, 251, 251, 252, 252, 252, 253, 254, 255],
    b = [53, 53, 53, 54, 54, 54, 55, 55, 55, 56, 57, 57, 57, 58, 58, 58, 59, 59, 59, 60, 61, 61, 61, 62, 62, 63, 63, 63, 64, 65, 65, 65, 66, 66, 67, 67, 67, 68, 69, 69, 69, 70, 70, 71, 71, 72, 73, 73, 73, 74, 74, 75, 75, 76, 77, 77, 78, 78, 79, 79, 80, 81, 81, 82, 82, 83, 83, 84, 85, 85, 86, 86, 87, 87, 88, 89, 89, 90, 90, 91, 91, 93, 93, 94, 94, 95, 95, 96, 97, 98, 98, 99, 99, 100, 101, 102, 102, 103, 104, 105, 105, 106, 106, 107, 108, 109, 109, 110, 111, 111, 112, 113, 114, 114, 115, 116, 117, 117, 118, 119, 119, 121, 121, 122, 122, 123, 124, 125, 126, 126, 127, 128, 129, 129, 130, 131, 132, 132, 133, 134, 134, 135, 136, 137, 137, 138, 139, 140, 140, 141, 142, 142, 143, 144, 145, 145, 146, 146, 148, 148, 149, 149, 150, 151, 152, 152, 153, 153, 154, 155, 156, 156, 157, 157, 158, 159, 160, 160, 161, 161, 162, 162, 163, 164, 164, 165, 165, 166, 166, 167, 168, 168, 169, 169, 170, 170, 171, 172, 172, 173, 173, 174, 174, 175, 176, 176, 177, 177, 177, 178, 178, 179, 180, 180, 181, 181, 181, 182, 182, 183, 184, 184, 184, 185, 185, 186, 186, 186, 187, 188, 188, 188, 189, 189, 189, 190, 190, 191, 191, 192, 192, 193, 193, 193, 194, 194, 194, 195, 196, 196, 196, 197, 197, 197, 198, 199];
// noise value
var noise = 20;
function processSepia() {
    // get current image data
    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
    for (var i=0; i < imageData.data.length; i+=4) {
        // change image colors
        imageData.data[i] = r[imageData.data[i]];
        imageData.data[i+1] = g[imageData.data[i+1]];
        imageData.data[i+2] = b[imageData.data[i+2]];
        // apply noise
        if (noise > 0) {
            var noise = Math.round(noise - Math.random() * noise);
            for(var j=0; j<3; j++){
                var iPN = noise + imageData.data[i+j];
                imageData.data[i+j] = (iPN > 255) ? 255 : iPN;
            }
        }
    }
    // put image data back to context
    ctx.putImageData(imageData, 0, 0);
};
$(function () {
    // create canvas and context objects
    canvas = document.getElementById('source');
    ctx = canvas.getContext('2d');
    // load source image
    imgObj = new Image();
    imgObj.onload = function () {
        // draw image
        ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas.width, canvas.height);
    }
    imgObj.src = 'images/pic1.jpg';
    // different onclick handlers
    var iCur = 1;
    $('#next').click(function () {
        iCur++;
        if (iCur > 6) iCur = 1;
        imgObj.src = 'images/pic' + iCur + '.jpg';
    });
    $('#sepia').click(function () {
        processSepia();
    });
    $('#toImage').click(function () {
        $('#img').attr('src', canvas.toDataURL('image/jpeg'));
    });
});

Main idea is: as we know – sepia images have own quite predefined colors. So, our script will walk through all pixels of original image, and change pixel color to the one of sepia colors. Plus, we will add a little of noise to our image.


Live Demo
download in package

Conclusion

I hope that our demo looks fine. Today we have added new interesting effect to our html5 application – Sepia. I will be glad to see your thanks and comments. Good luck!

SIMILAR ARTICLES


9 COMMENTS

  1. Thank you for the great article! But may I ask how you came up with the RGB color ranges? I can tell that you’re limiting the blue scale, but where did you get the specific RGB ranges?

  2. Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
    script.js:15Uncaught Error: SECURITY_ERR: DOM Exception 18
    processSepiascript.js:15
    (anonymous function)script.js:62
    f.event.dispatchjquery.min.js:3
    f.event.add.h.handle.i

  3. Hi.
    I’m creating a website and I would like to use your javascript sepia effect. Can I have your permission to use it on my website?

Leave a Reply