圖片上傳，調整大小和編碼爲base64崩潰鉻上移動

Question

我的用戶可以使用該文件上傳HTML輸入元件選擇一個圖像 -

1.從那裏我縮減

2.我轉換爲Base64

出於某種原因，Chrome行動& Android瀏覽器徹底死機 - 和 顯示一個「內存不足的錯誤」。

如果瀏覽器運行在一個更「現代/有能力」的設備上，一切都會很好。

什麼可能導致錯誤 - 可以修復？

---

這裏是縮小比例（同時保持寬高比）並返回圖像的Base64字符串的函數。

function resizeAndConvertB64(img, maxWidth, maxHeight) { 
    var imgWidth = img.width, 
     imgHeight = img.height; 

    var ratio = 1, ratio1 = 1, ratio2 = 1; 
    ratio1 = maxWidth/imgWidth; 
    ratio2 = maxHeight/imgHeight; 

    // Use the smallest ratio that the image best fit into the maxWidth x maxHeight box. 
    if (ratio1 < ratio2) { 
     ratio = ratio1; 
    } 
    else { 
     ratio = ratio2; 
    } 
    var canvas = document.createElement("canvas"); 
    var canvasContext = canvas.getContext("2d"); 
    var canvasCopy = document.createElement("canvas"); 
    var copyContext = canvasCopy.getContext("2d"); 
    var canvasCopy2 = document.createElement("canvas"); 
    var copyContext2 = canvasCopy2.getContext("2d"); 
    canvasCopy.width = imgWidth; 
    canvasCopy.height = imgHeight; 
    copyContext.drawImage(img, 0, 0); 

    // init 
    canvasCopy2.width = imgWidth; 
    canvasCopy2.height = imgHeight;   
    copyContext2.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvasCopy2.width, canvasCopy2.height); 


    var rounds = 1; 
    var roundRatio = ratio * rounds; 
    for (var i = 1; i <= rounds; i++) { 


     // tmp 
     canvasCopy.width = imgWidth * roundRatio/i; 
     canvasCopy.height = imgHeight * roundRatio/i; 

     copyContext.drawImage(canvasCopy2, 0, 0, canvasCopy2.width, canvasCopy2.height, 0, 0, canvasCopy.width, canvasCopy.height); 

     // copy back 
     canvasCopy2.width = imgWidth * roundRatio/i; 
     canvasCopy2.height = imgHeight * roundRatio/i; 
     copyContext2.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvasCopy2.width, canvasCopy2.height); 

    } // end for 


    // return Base64 string of the downscaled image 
    canvas.width = imgWidth * roundRatio/rounds; 
    canvas.height = imgHeight * roundRatio/rounds; 
    canvasContext.drawImage(canvasCopy2, 0, 0, canvasCopy2.width, canvasCopy2.height, 0, 0, canvas.width, canvas.height); 
    var dataURL = canvas.toDataURL(); 
    return dataURL; 


} 

Answer 1

我認爲這是Chrome手機的錯誤。
Chrome手機並不穩定，當我使用它時，我的方便崩潰。
內存不足說明您的設備沒有足夠的內存供此腳本使用。
檢查它是否適用於Dolphin瀏覽器。
我認爲它會工作，但我不知道它。