[英]Handling Async Calls with Canvas and ForEach
我试图了解如何利用angular的$ q库显示基于画布绘图的图像,然后使用.toDataURL()
进行转换;
基本上我想:
$scope.targetImages
图像( $scope.targetImages
) .toDataURL()
将它们转换为图像,并将其存储在( $scope.outputImages
);中。 问题在于,函数.toDataURL()在执行之前可能需要花费一些时间,从而导致步骤4的延迟调用,因此什么也不显示。
我尝试了以下方法,但是在转换所有图像之前仍可以解决。
现在,当我第二次调用drawCanvas
()时,将显示图像。
// 1
$scope.targetImages= {}
drawCanvas().then(function(data){
console.log("done: " + new Date())
console.log(data)
$scope.outputImages = data;
$scope.previewMode = false; // switch views, display canvas, remove preview
});
function drawCanvas() {
var defer = $q.defer();
var targetImages = {}
angular.forEach($scope.targetImages , function(imageObj, key) {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = imageObj.nativeURL;
img.onload = start
// 2
function start() {
ctx.drawImage(img, 0, 0, img.width, img.height);
outputImages[key] = {
IID: key,
dataURL: canvas.toDataURL()
}
} // start
}); // for loop target images
defer.resolve(outputImages);
return defer.promise;
} // draw canvas
并显示为:
<img ng-show="!previewMode" ng-src="{{image.dataURL || ''}}" style="width: 100vw; max-width: 600px;">
首先,定义一个将图像绘制到画布上并返回结果承诺的函数:
function drawToCanvas(nativeURL) {
return $q(function (resolve) {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = nativeURL;
img.onload = function () {
ctx.drawImage(img, 0, 0, img.width, img.height);
resolve(canvas.toDataURL());
};
});
}
然后,解决方案变为:
$scope.targetImages = [];
function drawCanvas() {
// pResults is an array of promises
var pResults = $scope.targetImages.map(function (imageObj) {
return drawToCanvas(imageObj.nativeURL);
});
return $q.all(pResults);
}
drawCanvas().then(function(data) {
// data is an array of imageUrls
console.log("done: " + new Date())
console.log(data)
$scope.outputImages = data;
$scope.previewMode = false;
// switch views, display canvas, remove preview
});
为简化起见,我已将$scope.targetImages
和$scope.outputImages
更改为数组而不是对象,但是如果您需要的话,不难再回到为它们使用对象的角度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.