9

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

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

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

4

1 回答 1

8

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

现在它可能是 16MP 图像。在文件加载完成之前什么都不会发生。
然后，onload事件触发，并完成其余的设置。

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

于 2012-11-23T18:15:05.413 回答