Android : Image upload, resizing and encoding to base64 crashes Chrome on mobile

on Wednesday, October 8, 2014


My users can select an image using the file-upload HTML input element -


1. From there I downscale


2. I convert to base64



For some reason Chrome mobile & Android browser completely crash - and display an 'Out of Memory error'.



If the browser runs on a more 'modern/capable' device all goes perfectly fine.


What could be causing the error here - can it be fixed?




Here is the function that downscales(whilst keeping aspect ratios) and returns a Base64 string of the image.



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;


}

0 comments:

Post a Comment