HTML5 Web Application Development By Example Beginner's guide

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 ...