O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – sepia

Let's implement another simple effect. This time we will convert the image to sepia, which gives it an old-timey picture look. Sepia is very similar to black and white except a little warmer. First let's add the menu item for it and set the data-value attribute to toSepia:

<li data-value="toSpeia">Sepia</li>

Now let's add a toSepia() method to the imageEffects object.:

function toSepia(canvas, depth, intensity) { depth = depth || 20; intensity = intensity || 10; var imageData = getImageData(canvas); var data = imageData.data; for (var i = 0; i < data.length; i += 4) { var grayscale = (data[i] * 0.3) + (data[i + 1] * .59) + (data[i + 2] * .11); data[i] = Math.min(255, grayscale + (depth * 2)); data[i+1] = Math.min(255, grayscale ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required