我一直在學(xué)習(xí)html5的畫布.因為圖像可能需要一段時間才能加載,所以適當(dāng)?shù)募夹g(shù)似乎是在嘗試?yán)L制圖像之前使用onload來等待圖像加載.所以：

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函數(shù)執(zhí)行drawImage()之前,可能會執(zhí)行此后的代碼,可能會導(dǎo)致意外行為：

ctx.translate(0,400); ctx.scale(1,-1); /* switch to lower-left as origin */

/* if onl oad happens after here, it uses new coordinate system! */

ctx.beginPath();

ctx.moveTo(10, 20);

ctx.lineTo(290, 30);

ctx.stroke();

當(dāng)然有一些明智的方法來解決這個問題(并且在onload函數(shù)中做所有事情似乎都不合理).

==========================編輯以下====================== ==

以下是對我的代碼的更改,使用單一承諾盡可能簡單地說明這個想法.

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();

});

解決方法:

在使用畫布之前預(yù)加載圖像.將所有圖像URL放入一個數(shù)組中,循環(huán)遍歷數(shù)組創(chuàng)建新圖像,當(dāng)它們?nèi)考虞d時,調(diào)用一個將啟動畫布工??作的函數(shù).

以下片段使用本機(jī)JS Promises,但如果支持沒有本機(jī)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);

}

標(biāo)簽：javascript,html5,canvas,html5-canvas

來源： https://codeday.me/bug/20190930/1837207.html

總結(jié)

以上是生活随笔為你收集整理的html5实例异步图片加载,javascript – 你如何处理html5的画布图像加载异步？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。