Javascript Html5画布限制

我一直试图找到详细说明Html5画布元素限制的文档，例如它可以加载的最大图像文件大小等，但没有成功。我问的原因是我一直试图通过

ctx.scale（）

，调整图像大小，范围从50kb到2.0mb，然而，对于同一个图像，有时

ctx.drawImage（）

会成功，有时则不成功（不成功，因为画布上没有重新缩放的图像）

我还放置了

console.log（base64）

来监视

var base64=canvas.toDataURL（）

的结果，并注意到当成功调整大小时，调整大小的base64将像预期的那样是一个很长的字符串，当调整大小失败时，字符串仍然会显示得相对较短，并输出一个空白图像

---

这是否与内存限制和不成功的字符串本身有关？如果是这样，画布元素的内存限制是什么？

首先：
硬限制取决于浏览器，而不是画布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

事件，并执行其余的设置

---

您可以将其变得更抽象，并将其转化为一个漂亮的程序，但感觉这是您可能缺少的关键部分。

对于帖子中的任何错误表示歉意，请务必纠正我，因为我是此网站的新海报。非常感谢，image.onload是最后一块拼图。我开始怀疑图像没有被完全加载，因此当页面刷新成功（因为图像被缓存）时，会产生一个缩短的base64字符串，但当缓存被清空并且大图像必须重新加载时，则不会。再次感谢您的直接和简洁的答复！