Javascript 画布中的图像处理

我在mycontainer中有许多图像，如：

<div id="mycontainer">
    <img src="http://localhost:8080/images/my-image.png" />
    …
</div>

我返回一个完全透明的默认300px x 150px画布的数据URL，就好像脚本中根本不存在

imgObj.onload（）

有人能在这里指出一个错误吗？
快速回答：因为您使用的是jQuery，所以您可以查看，它可能会满足您的需要

参考您的代码回答的时间更长-
imgObj.onload
是一个异步回调函数，因此当您到达
return
语句时，它不会执行。您需要从
onload
回调内部执行任何需要post-
onload
数据URL的代码。一种方法是让
grayscale
接受回调参数：

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
});

谢谢你的插件提示，@nrabinowitz。它似乎有相当多的东西，我几乎不会使用。我想要一件简单的事情，做我想做的事情，而不是更多；）我想你不使用它是有原因的。在这种情况下，请参阅我的答案的其余部分，这将解决您的问题。谢谢您的回调提示！尽管我得到了回调行的错误——“UncaughtTypeError:undefined不是函数”，尽管它被定义为函数的参数。
c = $('#mycontainer').find('img')[0];
grayscale(c.src);

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
});