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 + depth);
        data[i+2] = Math.max(0, grayscale - intensity);
    }
    
    putImageData(canvas, imageData);
}

Although toSepia() has three parameters...