Question

我一直在学习html5的画布。由于图像可能需要一段时间才能加载，因此似乎适当的技术是在尝试绘制图像之前使用onload等待图像加载。所以：

<canvas id="fig" width="400" height="400"></canvas>

var fig = document.getElementById('fig1');
var ctx = fig.getContext('2d');

var img = new Image();
img.onload = function() { ctx.drawImage(img, 300, 100); };
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

但是，在onload函数执行drawImage()之前，可能会执行此后的代码，可能会导致意外行为：

ctx.translate(0,400); ctx.scale(1,-1);   /* switch to lower-left as origin */
/* if onload happens after here, it uses new coordinate system! */
ctx.beginPath();
ctx.moveTo(10, 20);
ctx.lineTo(290, 30);
ctx.stroke();

当然有一些明智的方法可以解决这个问题（并且在onload函数中做所有事情似乎都是不合理的）。

==========================编辑以下=================== =====

以下是对我的代码的更改，使用单一承诺尽可能简单地说明这个想法。

var img = new Image();
var promise = new Promise(                         // make a promise
        function(resolve, reject) {
                img.onload = function() {
                        ctx.drawImage(img, 300, 100);   
                        resolve();     // keep the promise -- lets the "then" proceed
                };      
                img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
        }
);

// .then() waits for the promise to be resolved (see also .catch for rejection)
promise.then( function() {
        ctx.translate(0,400); ctx.scale(1,-1);
        ctx.beginPath();
        ctx.moveTo(10, 20);
        ctx.lineTo(290, 30);
        ctx.stroke();
});

Answer 1

在使用画布之前预先加载图像。将所有图像网址放入一个数组中，循环遍历数组创建新图像，当它们全部加载时，调用一个将启动画布工作的函数。

以下代码段使用原生JS Promises，但如果支持没有本机Promise的旧版浏览器，则可以类似方式使用Q或jQuery库

var images = ['imageurl.jpg','imageurl2.jpg','imageurl3.jpg'];
var loadedImages = {};
var promiseArray = images.map(function(imgurl){
   var prom = new Promise(function(resolve,reject){
       var img = new Image();
       img.onload = function(){
           loadedImages[imgurl] = img;
           resolve();
       };
       img.src = imgurl;
   });
   return prom;
});

Promise.all(promiseArray).then(imagesLoaded);

function imagesLoaded(){
   //start canvas work.

   //when needing to draw image, access the loaded image in loadedImages
   ctx.drawImage(loadedImages['imageurl.jpg'], 300, 100);
}

Answer 2

另一种方法是向图像添加信号量。我为某些应用程序执行此操作，其中图像加载是一个持续的过程，加载时间可能不一致并且可能会失败。您无法停止应用程序，因为图像丢失，或者花时间加载，因此您只需检查图像是否准备就绪并在图像处理时使用或使用可在客户端呈现的占位符而不需要加载。

你如何处理html5的画布图像加载异步？

2 个答案: