我一直未能成功地找到详细说明 Html5 画布元素限制的文档，例如它可以加载的最大图像文件大小等。我问的原因是我一直在尝试调整图像大小，范围从从ctx.scale() 到 50kb 到 2.0mb，但对于同一张图像，有时ctx.drawImage() 会成功，有时会失败（不成功，因为画布中没有出现重新缩放的图像）。
我还设置了console.log(base64) 来监视var base64 = canvas.toDataURL() 的结果，并注意到当成功调整大小时，调整大小的base64 将是一个相当长的字符串，如预期的那样，当调整大小不成功时，字符串仍然会出现但相对较短并且输出一个空白图像。
这是否与内存限制和环绕自身的不成功字符串有关？如果是这样，canvas 元素的内存限制是什么？
【问题讨论】：
标签： javascript html canvas
第一：
硬性限制取决于浏览器，而不是画布 API。
即便如此，浏览器一直在尝试提高该性能，因此该数字始终在变化。
但是随着 WebGL 和 Canvas 被用于制作游戏，纹理图集/精灵图集是巨大的 .jpg/.png 文件。
您的图像较小的可能性非常非常大，而且我经常在画布中使用 4MB/5MB/16MB 图像进行演示。
一个巨大的图像（或几十个）可能会使标签崩溃，如果它足够大的话，但在那之前，canvas 并没有真正向我抱怨过。
第二：
存在安全限制。
在canvas 中编辑照片取决于您使用的浏览器，以及文件是否与您的网站位于同一域中。
第三：
当你说“大文件不起作用，但它们有时会......”
...这让我相信您的图片加载方法有问题。
如果你这样做：
var canvas = document.createElement("canvas"),
context = canvas.getContext("2d"),
img = new Image();
img.src = "//mydomain.com/myimg.png";
context.drawImage(img, 0, 0, img.width, img.height);
...或任何其他既不是基于事件也不是基于回调的东西，
那么您的问题与canvas 无关，并且与回调有关，并且您试图在图像加载完成之前将图像绘制到画布上。
如果您的浏览器已经缓存了大图的副本，或者小图只需要几分之一秒的时间就可以下载，那么没有问题。
如果您尝试下载 18MB 的图像，并在设置图像的 url 后立即将其绘制到画布上，那么您将得到一个空白屏幕，因为它还没有完成加载。
相反，您需要等待图像完成加载，然后然后在准备好后将其绘制到画布上。
var canvas = document.createElement("canvas"),
context = canvas.getContext("2d"),
image = new Image();
image.onload = function () {
var img = this,
width = img.width,
height = img.height;
canvas.width = width;
canvas.height = height;
context.drawImage(img, 0, 0, width, height);
document.body.appendChild(canvas);
};
image.src = "//mydomain.com/path-to-really-huge-image.png";
现在它可能是 16MP 图像。在文件加载完成之前什么都不会发生。
然后，onload 事件触发，并执行其余的设置。
你可以把它变得更抽象，然后把它变成一个漂亮的程序，但感觉这是你可能缺少的关键部分。
【讨论】：