Question

我试图找到详细说明有关Html5 Canvas元素的限制的文档，例如它可以加载的最大图像文件大小等，但是我没有成功。我问的原因是我一直在尝试调整图像大小范围通过ctx.scale() 50kb到2.0mb，但它一直非常不一致，因为对于相同的图像，有时ctx.drawImage()将成功，而其他时间不成功（不成功的是没有重新缩放的图像出现在画布中）。

我还放置console.log(base64)来监视var base64 = canvas.toDataURL()的结果，并注意到成功调整大小后调整大小的base64将是一个非常长的字符串，如果不成功调整大小，字符串仍然会出现相对较短并输出空白图像。

这是否与内存限制和不成功的字符串缠绕在一起？如果是这样，canvas元素的内存限制是什么？

Answer 1

<强>首先
硬限制取决于浏览器，而不是画布API 即使这样，浏览器也总是试图改善这种性能，因此这个数字总会在变化但是使用WebGL和Canvas制作游戏时，纹理图册/精灵地图集是巨大的.jpg / .png文件。
您的图像更小，机会非常非常好，我经常在画布上使用4MB / 5MB / 16MB图像进行演示。
一个巨大的图像（或几十个）可能会使标签崩溃，如果它足够大，但在那之前，画布并没有真正向我抱怨。

<强>第二
存在安全限制在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图像，并在设置图像的网址后立即将其绘制到画布上，那么您将获得一个空白屏幕，因为它尚未完成加载。

相反，您需要等待图片完成加载，然后在画布准备好时将其绘制到画布上。

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";

现在它可能是1600万像素。在文件加载完成之前不会发生任何事情然后，onload事件将触发，并执行其余设置。

你可以把它变得更抽象，把它变成一个漂亮的程序，但感觉这可能是你可能遗失的关键部分。

Html5 Canvas限制

1 个答案: