Home » Tutorials

HTML5 Image Effects – Sepia

Tutorials
Author Reading 10 min Views 917 Published by Modified by

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:

Contents
  1. Step 1. HTML Markup
  2. index.html
  3. Step 2. CSS
  4. css/main.css
  5. Step 3. JS
  6. js/script.js
  7. Conclusion
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

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>HTML5 Image Effects - Sepia | Script Tutorials</title>
06         <link href="css/main.css" rel="stylesheet" type="text/css" />
07         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
08         <script>
09             google.load("jquery", "1.7.1");
10         </script>
11         <script src="js/script.js"></script>
12     </head>
13     <body>
14         <header>
15             <h2>HTML5 Image Effects - Sepia</h2>
16             <a href="https://www.script-tutorials.com/html5-image-effects-sepia/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
17         </header>
18         <div id="container" class="container">
19             <table cellspacing=0>
20                 <tr>
21                     <td><p>Canvas Object &lt;CANVAS&gt;</p></td>
22                     <td><p>Image Object &lt;IMG&gt;</p></td>
23                 </tr>
24                 <tr>
25                     <td><canvas id="source" width="500" height="500"></canvas><div id="next" class="button">Next image</div></td>
26                     <td><img id="img" src="images/button.png" /></td>
27                 </tr>
28                 <tr>
29                     <td><div id="sepia" class="button">Apply Sepia Effect</div></td>
30                     <td><div id="toImage" class="button">To Image</div></td>
31                 </tr>
32             </table>
33         </div>
34     </body>
35 </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

01 *{
02     margin:0;
03     padding:0;
04 }
05 body {
06     background-image:url(../images/bg.png);
07     color:#fff;
08     font:14px/1.3 Arial,sans-serif;
09 }
10 header {
11     background-color:#212121;
12     box-shadow: 0 -1px 2px #111111;
13     display:block;
14     height:70px;
15     position:relative;
16     width:100%;
17     z-index:100;
18 }
19 header h2{
20     font-size:22px;
21     font-weight:normal;
22     left:50%;
23     margin-left:-400px;
24     padding:22px 0;
25     position:absolute;
26     width:540px;
27 }
28 header a.stuts,a.stuts:visited {
29     border:none;
30     text-decoration:none;
31     color:#fcfcfc;
32     font-size:14px;
33     left:50%;
34     line-height:31px;
35     margin:23px 0 0 110px;
36     position:absolute;
37     top:0;
38 }
39 header .stuts span {
40     font-size:22px;
41     font-weight:bold;
42     margin-left:5px;
43 }
44 .container {
45     color: #000000;
46     margin: 20px auto;
47     overflow: hidden;
48     position: relative;
49     width: 1005px;
50 }
51 table {
52     background-color: rgba(255, 255, 255, 0.7);
53 }
54 table td {
55     border: 1px inset #888888;
56     position: relative;
57     text-align: center;
58 }
59 table td p {
60     display: block;
61     padding: 10px 0;
62 }
63 .button {
64     cursor: pointer;
65     height: 20px;
66     padding: 15px 0;
67     position: relative;
68     text-align: center;
69     width: 500px;
70    -moz-user-select: none;
71    -khtml-user-select: none;
72    user-select: none;
73 }

Step 3. JS

Finally – our javascript code of Sepia effect:

js/script.js

01 // variables
02 var canvas, ctx;
03 var imgObj;
04 // set of sepia colors
05 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],
06     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],
07     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];
08 // noise value
09 var noise = 20;
10 function processSepia() {
11     // get current image data
12     var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
13     for (var i=0; i < imageData.data.length; i+=4) {
14         // change image colors
15         imageData.data[i] = r[imageData.data[i]];
16         imageData.data[i+1] = g[imageData.data[i+1]];
17         imageData.data[i+2] = b[imageData.data[i+2]];
18         // apply noise
19         if (noise > 0) {
20             var noise = Math.round(noise - Math.random() * noise);
21             for(var j=0; j<3; j++){
22                 var iPN = noise + imageData.data[i+j];
23                 imageData.data[i+j] = (iPN > 255) ? 255 : iPN;
24             }
25         }
26     }
27     // put image data back to context
28     ctx.putImageData(imageData, 0, 0);
29 };
30 $(function () {
31     // create canvas and context objects
32     canvas = document.getElementById('source');
33     ctx = canvas.getContext('2d');
34     // load source image
35     imgObj = new Image();
36     imgObj.onload = function () {
37         // draw image
38         ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas.width, canvas.height);
39     }
40     imgObj.src = 'images/pic1.jpg';
41     // different onclick handlers
42     var iCur = 1;
43     $('#next').click(function () {
44         iCur++;
45         if (iCur > 6) iCur = 1;
46         imgObj.src = 'images/pic' + iCur + '.jpg';
47     });
48     $('#sepia').click(function () {
49         processSepia();
50     });
51     $('#toImage').click(function () {
52         $('#img').attr('src', canvas.toDataURL('image/jpeg'));
53     });
54 });

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!

Rate article
© 2026 Script Tutorials