[英]javascript canvas - check if images created with toDataURL() are loaded
我正在将图像加载到我的albImg数组中。
在我的循环中,然后执行此操作:
for(var j = 1; j < albImg.length; j++){
if(albImg[j].complete == true && albImg[j].width > 0){
loadedimages++;
}
}
确保我的所有图像都已加载。 然后,我像这样调用我的flipImg()函数:
if(loadedimages == albImg.length-1){
flipImg();
}
然后,我翻转图像并
ctx2.save();
ctx2.scale(-1, 1);
for (var i = RszSpriteCount; i < sprites.length; i++) {
ctx2.drawImage(albImg[sprites[i][0]], sprites[i][1], sprites[i][2], sprites[i][3], sprites[i][4], 0 - (sprites[i][1] + sprites[i][3]), sprites[i][2], sprites[i][3], sprites[i][4]);
}
ctx2.restore();
var flipSz = albImg.length;
albImg[flipSz] = new Image();
albImg[flipSz].src = cnv2.toDataURL();
这是我的问题开始的地方。
我创建的新图像albImg [5]在加载之前无法显示。 但是创建它时就好像已经加载了它。
也就是说:
在显示之前,已经将albImg [5] .width设置为(750)。 在显示之前,将albImg [5] .complete设置为true。 albImg [5] .onload = ctx.drawImage(albImg [5],0,0); 将尝试在加载图像之前绘制图像。
在显示翻转的图像之前,如何检查它是否真的已加载? 用Javascript?
(由于情况我没有为此使用jQuery)
请帮忙。
您的主要错误在于如何设置onload
事件处理程序:
albImg[5].onload = ctx.drawImage(albImg[5], 0, 0)
会将drawImage()
的返回值( undefined
)设置为onload
侦听器。
你想要的是
albImg[5].onload = e => ctx.drawImage(albImg[5], 0, 0);
要么
albImg[5].onload = function(){ ctx.drawImage(this, 0, 0) };
对于将complete
和width
属性设置为true的原因,是因为尽管Image的加载始终是异步的,但是在您的情况下,该图像可能已经被HTTP缓存了。
由于HTTP加载和javascript执行不在同一个线程上执行,因此有可能在浏览器返回其属性之前实际加载了Image。
但是即使这样,也会触发onload事件(不过最好在src
之前设置它)。
var cacher = new Image(); cacher.onload = function(){ var img = new Image(); img.onload = function(){ console.log('"onload" fires asynchronously even when cached'); }; img.src = c.toDataURL(); console.log('cached : ', img.complete, img.naturalWidth); } cacher.src = c.toDataURL(); console.log('before cache :', cacher.complete, cacher.naturalWidth);
<canvas id="c"></canvas>
因此,当处理一个新的Image(不是html标记中的一个)时,请始终仅侦听其onload
事件。
现在,利用您在问题中提供的少量信息,您似乎甚至不需要这些图像,也不用处理它们的任何负载(当然,除了精灵),因为您可以直接并同步地调用ctx.drawImage(CanvasElement, x, y)
。
const ctx = c.getContext('2d'); ctx.moveTo(0, 0); ctx.lineTo(300, 75); ctx.lineTo(0, 150); ctx.fillStyle = 'rgba(120,120,30, .35)'; ctx.fill(); const flipped = c.cloneNode(); // create an offscreen canvas const f_ctx = flipped.getContext('2d'); f_ctx.setTransform(-1, 0,0,1, c.width, 0);// flip it f_ctx.drawImage(c,0,0);// draw the original image // now draw this flipped version on the original one just like an Image. ctx.drawImage(flipped, 0,0); // again in 3s setTimeout(()=>ctx.drawImage(flipped, 150,0), 3000);
<canvas id="c"></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.