javascript画布-检查是否加载了使用toDataURL（）创建的图像

我正在将图像加载到我的数组中

然后在我的循环中执行以下操作：

    for(var j = 1; j < albImg.length; j++){
        if(albImg[j].complete == true && albImg[j].width > 0){
            loadedimages++;
        }
    }

然后我翻转一个图像

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

ctx2.save（）；
ctx2.刻度（-1,1）；
for（var i=RszSpriteCount；i

我的问题就从这里开始

我创建的新图像-albImg[5]-在加载之前无法显示。 但它是创建的，就好像它已经被加载一样

也就是说：

albImg[5]。在显示宽度之前，已将宽度设置为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);  

或

---

对于设置为true的

complete

和

width

属性，这是因为图像的加载始终是异步的，在您的情况下，图像可能已经被HTTP缓存了。
由于HTTP加载和javascript执行不是在同一个线程上执行的，因此可能在浏览器返回其属性之前实际加载了图像

但即使这样，onload事件也会触发（不过最好在

src

之前设置它）

var cacher=new Image（）；
cacher.onload=函数（）{
var img=新图像（）；
img.onload=函数（）{
log（“'onload'即使在缓存时也会异步激发”）；
};
img.src=c.toDataURL（）；
log（'cached:'，img.complete，img.naturalWidth）；
}
cacher.src=c.toDataURL（）；
log（'before cache:'，cacher.complete，cacher.naturalWidth）
您的主要错误在于如何设置
onload
事件处理程序：

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

将
drawImage（）
（
undefined
）的返回值设置为
onload
侦听器

你想要的是

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

或


对于设置为true的
complete
和
width
属性，这是因为图像的加载始终是异步的，在您的情况下，图像可能已经被HTTP缓存了。

由于HTTP加载和javascript执行不是在同一个线程上执行的，因此可能在浏览器返回其属性之前实际加载了图像

但即使这样，onload事件也会触发（不过最好在
src
之前设置它）


var cacher=new Image（）；
cacher.onload=函数（）{
var img=新图像（）；
img.onload=函数（）{
log（“'onload'即使在缓存时也会异步激发”）；
};
img.src=c.toDataURL（）；
log（'cached:'，img.complete，img.naturalWidth）；
}
cacher.src=c.toDataURL（）；
log（'before cache:'，cacher.complete，cacher.naturalWidth）
为什么要在加载图像之前尝试显示
onload
？调用
onload
表示图像已加载。为什么
onload
会在加载图像之前尝试显示？调用
onload
意味着图像已加载。多亏了你，我才解决了这个问题。对于将来看到这一点的人：我添加了您的代码，但它不起作用，但我意识到绘制到画布上的图像也是由toDataUrl（）生成的。那张图片并不总是被加载到我第二张图片的画布上。空白画布=空白图像。然而，在第一个映像上实现onload解决了这个问题。现在，图片总是会被加载，因此加载的图像总是包含翻转的图像。我之所以先将其加载到图像中，是因为我认为，通过在每个循环中只翻转一次图像，而不是多次翻转图像，我将节省一些处理能力，并有望减少电池使用量（这是用于移动应用程序）。这有意义吗？也许我想得太多了。@DanielBengtsson，这是有道理的，但这不是最好的方法。不。如果它真的只是翻转一个图像（或作为图像的画布），那么只需更改可见画布的变换矩阵并使用drawImage，就会消耗更少的内存。如果它是完整的构图，那么最好使用屏幕外画布（就像我在回答中所做的那样），并保留对该屏幕外画布的引用。转换为图像总是占用大量内存。浏览器必须保留文件的b64字符串表示+解码图像。多亏了你，我才解决了这个问题。对于将来看到这一点的人：我添加了您的代码，但它不起作用，但我意识到绘制到画布上的图像也是由toDataUrl（）生成的。那张图片并不总是被加载到我第二张图片的画布上。空白画布=空白图像。然而，在第一个映像上实现onload解决了这个问题。现在，图片总是会被加载，因此加载的图像总是包含翻转的图像。我之所以先将其加载到图像中，是因为我认为，通过在每个循环中只翻转一次图像，而不是多次翻转图像，我将节省一些处理能力，并有望减少电池使用量（这是用于移动应用程序）。这有意义吗？也许我只是想得太多了。@DanielBengtsson，这是有道理的，但这不是最好的方式不。如果它真的只是翻转一个图像（或画布）