javascript : calculating and returning values after Image loaded

Question

我已经检查了对异步 javascript 行为的多个响应并试验了回调，接下来试验了 promises，但同时我想在这里发送 SoS 请求:/

因为通常第一个答案是(“你想做什么？”)

我必须找出图像中的所有非空或透明像素。(有点像 mask )并将它们返回一个二进制算术数数组。

简而言之，我的程序做了什么:

• 它获取图像 URL 并从中创建 new Image()。
• 它创建一个 Canvas 并将其添加到 DOM
• 在 image.onLoad() 中，它在 Canvas 上绘制图像
• 图像在 Canvas 上之后，它会扫描每个像素的颜色并返回一个数据数组。

我的问题是强制计算等待直到图像加载完毕。我试着做这样的事情:

return getDataArray(image.onLoad()= function(){
    // ...init things...
}));

不过，它会在 image.onLoad 发生之前进入 getDataArray 函数。

我要休息一下，出去走走，因为我没有有效的想法。

这是原始函数:

getImageScan: function() {
    this.myImage.src = imageScanner.imgUrl;
    var is = this;
    return  is.getArrayFromCanvas(this.myImage.onload = function () {
        is.imageHeight = is.myImage.height;
        is.imageWidth = is.myImage.width;
        is.appendCanvasToBody();
        is.initGraphicalContent();
        is.drawImageOnCanvas();
        console.log("image is loaded");
    })
},

getArrayFromCanvas: function () {
    console.log("request for calculations");
    var booleanJson = this.getJsonFromCanvas()
    return this.getBinaryArithmeticFromBooleans(booleanJson);
}

这是结果

请求计算

[]

图片加载完毕

如果你需要更多信息，这里是整个 *.js(这是我在 slacktime 的私有(private)项目，所以没有版权问题):

https://github.com/Vilkaz/gridToImage/blob/master/web/resources/js/imageScanner.js

Answer 1

您尝试将某些内容传递给 getArrayFromCanvas，尽管它没有参数。我不明白你为什么这样做，但我猜你想要这样的东西:

getImageScan: function(callback) {
  this.myImage.src = imageScanner.imgUrl;
  var is = this;
  this.myImage.onload = function () {
    is.imageHeight = is.myImage.height;
    is.imageWidth = is.myImage.width;
    is.appendCanvasToBody();
    is.initGraphicalContent();
    is.drawImageOnCanvas();
    console.log("image is loaded");
    callback(is.getArrayFromCanvas());
  }
}

上述异步行为与您的原始代码之间的一个区别是 getImageScan 立即返回，稍后调用回调以“返回”结果。