javascript canvas - 检查是否加载了使用 toDataURL() 创建的图像

Question

我正在将图像加载到我的 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）

请帮忙。

Answer 1

您的主要错误在于如何设置 onload 事件处理程序：

albImg[5].onload = ctx.drawImage(albImg[5], 0, 0)

会将 drawImage() (undefined) 的 return 值设置为 onload 侦听器。

你要的是

albImg[5].onload = e => ctx.drawImage(albImg[5], 0, 0);

或

albImg[5].onload = function(){ ctx.drawImage(this, 0, 0) };

对于 complete 和 width 属性设置为 true，这是因为虽然图像的加载是 always async，但在您的情况下，图片可能已经被 HTTP 缓存。
由于 HTTP 加载和 javascript 执行不是在同一个线程上执行的，因此有可能图像在浏览器 return 其属性之前实际加载。

但即便如此，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>

因此，在处理新图像（不是 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>

javascript canvas - 检查是否加载了使用 toDataURL() 创建的图像

javascript canvas - check if images created with toDataURL() are loaded

javascript

canvas

image

todataurl