Html5 Canvas Limitations

Question

我一直試圖找到詳細的Html5畫布元素的限制，如什麼是它可以加載最大的圖像文件大小的文檔，但沒有成功。我問的原因是，我一直在嘗試調整圖像大小大小不等，從50kb到2.0mb到ctx.scale()，但它已經非常不一致，因爲對於相同的圖像，有時ctx.drawImage()將會成功並且其他時間不成功（不成功，因爲沒有重新縮放的圖像出現在畫布中）。

我也放在​​監測var base64 = canvas.toDataURL()的結果，已經注意到，當成功地調整了大小的base64將在相當長的字符串作爲預期，當失敗調整字符串仍然會出現又比較短，輸出空白圖片。

這是否與內存限制和不成功的字符串包裹自己？如果是這樣，那麼對canvas元素施加的內存限制是什麼？

Answer 1

第一張：
硬限制取決於瀏覽器，而不是畫布API。
即使這樣，瀏覽器總是試圖通過提高那樣的表現，讓這個數字永遠在變。
但是隨着WebGL和Canvas被用來製作遊戲，紋理地圖/精靈地圖是HUGE .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事件觸發，並執行其餘的設置。

你可以使它更抽象，並將其變成一個漂亮的程序，但它感覺這是你可能會失蹤的關鍵部分。