將圖片上傳，調整大小並編碼為base64會使Chrome在移動設備上崩潰

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 Browser一起使用。
我認為它將起作用，但我不知道。