javascript - Html5 Canvas 限制

Question

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

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

这是否与内存限制和不成功的字符串缠绕有关？如果是这样，对 canvas 元素施加的内存限制是什么？

Answer 1

首先:
硬性限制取决于浏览器，而不是 Canvas API。
即使那样，浏览器也一直在尝试改进该性能，因此该数字始终在变化。
但是随着 WebGL 和 Canvas 被用来制作游戏，纹理图集/ Sprite 图集是巨大的 .jpg/.png 文件。
很有可能您的图像较小，我经常在 Canvas 中使用 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 无关，并且与回调有关，并且您试图在图像加载完成之前将图像绘制到 Canvas 上。

如果您的浏览器已经缓存了大图的副本，或者如果小图只需几分之一秒即可下载，则没有问题。

如果您尝试下载一个 18MB 的图像，并在设置图像的 url 后立即将其绘制到 Canvas 上，那么您将得到一个空白屏幕，因为它尚未完成加载。

相反，您需要等待图像完成加载，然后准备就绪后将其绘制到 Canvas 上。

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 事件触发，并完成其余的设置。

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