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事件將觸發，並執行其余設置。

你可以把它變得更抽象，把它變成一個漂亮的程序，但感覺這是你可能會遺漏的關鍵部分。