Canvas drawImage大圖像崩潰

Question

我正在創建一個移動應用程序，用戶可以從手機中選擇一張圖片，然後模糊它...... 問題是，當用戶選擇大圖片（超過2張MB），應用程序。崩潰。

JS代碼：

convert_local_image_base64: function(url, callback) { 
    var canvas = document.createElement('CANVAS'), 
      ctx = canvas.getContext('2d'), 
      img = new Image; 
    img.crossOrigin = 'anonymous'; 
    img.onload = function() { 
     canvas.height = img.height; 
     canvas.width = img.width; 
     ctx.drawImage(img, 0, 0); 
     var dataURL = canvas.toDataURL('image/png'); 
     callback.call(this, dataURL); 
     canvas = null; 
    }; 
    img.src = url; 
}, 

所以不會有另一種方式來實現類似的操作？！。

Answer 1

ON PC： -
我試過多個大尺寸圖像（大於2 MB）畫在畫布上。我也嘗試獲取它的dataURL並在不同的畫布上重繪它。 每件事都適合我。 （在IE11，Chrome和Firefox上試用）

請確保你不要搞亂跨源資源共享（CORS）。

此外，我在這裏找到了一些關於canvasover上的解決方案相關的帖子。

Maximum size of a <canvas> element

Is there a max size for images being loaded onto canvas on iPhone?

EDITED： 在移動設備 -
下面是帆布用於移動設備的限制： -

的最大大小畫布元件對於小於256 MB RAM的設備爲300萬像素，對於大於或等於256的設備爲500萬像素MB RAM。

舉個例子 - 如果你想支持蘋果的老硬件，你的畫布的大小不能超過2048×1464。

希望這些資源可以幫助你把你拉出來。

Answer 2

Android設備上的canvas drawImage函數似乎存在大小限制。有一個3百萬像素的限制，但限制是在drawImage函數中使用的圖像的大小，而不是畫布大小的限制，即裁剪/縮小繪製圖像的大小沒有影響。

ctx.drawImage（imagebiggerthan3mp，100，100，63，63，50，50，50，50）; //還是Aw Snap！在android上崩潰！