I wanted to add brightness and contrast controls to my web application. However, this is not a standard web feature. CSS just gives control over opacity. While Internet Explorer has the concept of a filter, this only exists in Microsoft’s ever decreasing world.

So I am driven to extracting the pixels from an image and getting all mathematical on them. The way to do this is draw the image in a canvas and extract the pixels. It should be easy, no? No. Not when the image is hosted on another server.

Lets say I get an image from another domain:

var img = new Image();
img.src = "http://another.domain/myimage.jpg";

Then draw it in a canvas:

canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var w = img.offsetWidth;
var h = img.offsetHeight;
ctx.drawImage(dataImg,0,0,w,h);

And get the pixels:

var dataDesc = ctx.getImageData(rect.left, rect.top, rect.width, rect.height);

Boom… security exception. There is a new solution that comes as a side-effect of the same security being applied to WebGL. Now if only I can get the server to apply CORS…