javascript：加载图像后计算和返回值答案

【问题标题】：javascript : calculating and returning values after Image loadedjavascript：加载图像后计算和返回值
【发布时间】：2017-01-11 12:06:36
【问题描述】：

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

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

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

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

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

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

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 的私人项目，所以没有版权问题）：

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

【问题讨论】：

标签： javascript image asynchronous return onload

【解决方案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 立即返回，并且稍后调用回调以“返回”结果。

【讨论】：