图片上传，调整大小和编码为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浏览器。
我认为它会工作，但我不知道它。