Html5 Canvas限制

Question

我试图找到详细说明有关Html5 Canvas元素的限制的文档，例如它可以加载的最大图像文件大小等，但是我没有成功。我问的原因是我一直在尝试调整范围从50kb到2.0的图像大小mb到ctx.scale() ，然而它却非常不一致，因为对于相同的图像，有时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的图像，并在设置图像的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";

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

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