Skip to main content

Posts

Showing posts with the label image-manipulation

Image manipulation in canvas

I have a number of images within #mycontainer like: <div id="mycontainer"> <img src="http://localhost:8080/images/my-image.png" /> … </div> I need to convert those into B/W. Pretty common task but I didn't find any solution for this that would just work for me — there is some problem with the actions execution. What I have now is the following: function grayscale(src) { var ctx = document.createElement('canvas').getContext('2d'), imgObj = new Image(), pixels, i, n, gs, url; // wait until the image has been loaded imgObj.onload = function () { ctx.canvas.width = this.width; ctx.canvas.height = this.height; ctx.drawImage(this, 0, 0); pixels = ctx.getImageData(0, 0, this.width, this.height); for (i = 0, n = pixels.data.length; i < n; i += 4) { gs = pixels.data[i] * 0.3 + pixels.data[i+1] * 0.59 + pixels.data[i+2] * 0.11; pixe