画布中的图像处理

Question

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;
            pixels.data[i] = gs;   // red
            pixels.data[i+1] = gs;   // green
            pixels.data[i+2] = gs;   // blue
        }
        ctx.putImageData(pixels, 0, 0);
    };
    imgObj.src = src;
    return ctx.canvas.toDataURL('image/png');
}

In general the actions are:

• I supply src of an image to process,
• wait for the image to be fully loaded,
• draw the image on the canvas, convert the pixels and put the converted pixels back on the canvas
• then I want the data URL of the resulting image from the canvas to be returned.

Right now, when in Developer Tools I am tring something like:

c = $('#mycontainer').find('img')[0];
grayscale(c.src);

I get back data URL of a fully transparent default 300px x 150px canvas as if that imgObj.onload() doesn't exist in the script at all.

Can anybody point me to a mistake here please?

Answer 1

Quick answer: Since you're using jQuery, you might look at the jQuery desaturate plugin , which might do what you need.

Longer answer in reference to your code - imgObj.onload is an asynchronous callback function, so it won't have executed by the time you reach your return statement. You'll need to execute any code that requires the post- onload data URL from inside the onload callback. One way to do this would be to have grayscale take a callback argument:

function grayscale(src, callback) {
    // ... snip ...

    // wait until the image has been loaded
    imgObj.onload = function () {
        // ... snip ...
        ctx.putImageData(pixels, 0, 0);
        // now fire the callback
        callback(ctx.canvas.toDataURL('image/png'));
    };
    imgObj.src = src;
}

c = $('#mycontainer').find('img')[0];
grayscale(c.src, function(dataUrl) {
    // further stuff with grayscale dataUrl
});