我已经检查了对异步 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
最佳答案
您尝试将某些内容传递给 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
立即返回,稍后调用回调以“返回”结果。
关于javascript : calculating and returning values after Image loaded,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39308233/