【发布时间】：2014-07-29 03:30:56
【问题描述】：
我一直在阅读图像已经异步加载，或者使用onload（这不能解决问题）。加载大图像时，特别是来自 canvas.toDataURL() 的图像，整个页面在加载图像时冻结。
我正在做的特别是在隐藏的画布中预渲染程序生成的地图（用于游戏），然后将该数据加载到图像中以更快地绘制。实际问题是设置 src，即使我只是 img.src=img.src 再次调用加载也会发生这种情况。
有没有办法让大图像随着时间的推移而不是一次全部加载而造成这种巨大的破坏？
【问题讨论】：
-
代码？它们通常会随着时间的推移加载，除非你告诉他们不要这样做，这就是异步的意思。实际上，这可能是因为
toDataUrl()的事情；尝试使用 BitmapData 或 toBlob 函数/事物来操作它，因为这些不应该涉及尝试将整个图像转换为 Base64。 -
@cactus1 我试过
canvas.toDataURL("image/bmp")，虽然它似乎没有任何效果，甚至没有稍微快一点；我会仰望Blob -
其实看看这个网站（i-programmer.info/programming/graphics-and-imaging/…）和（stackoverflow.com/questions/4532166/…）。抱歉，我浏览了您的问题，没有注意到您正在尝试制作游戏；您不需要将图像转换为文件，如果您想要性能，基本上只使用画布绘图操作。
-
不幸的是，缓冲区中的drawImage（2x）和putImageData（许多x）都比图像中的drawImage慢得多，这就是我使用图像的原因。如果它不是那么慢，我更喜欢使用 imageData。
-
嗯.. 只是将两个画布堆叠在一起，然后将预渲染画布与最上面的一个隐藏起来，直到完成渲染？另外，你需要多少速度？你能摆脱 drawImage 的 2 倍减速吗？很抱歉没有提供很大帮助。
标签： javascript image canvas