I'm trying to resize an image on a mobile device. (Using ionic 2 framework, based on angular 2).
My maximum file size is 5MB and some devices capture images bigger than that. So I'm currently trying to resize the image using canvas.toDataURL() but this is extremely slow. (App doesn't respond for 15-20 seconds).
My current resize function is the following:
private resize(outputFormat, sourceImgObj, quality) {
let mimeType = "image/jpeg";
let cvs = document.createElement('canvas');
cvs.width = sourceImgObj.naturalWidth;
cvs.height = sourceImgObj.naturalHeight;
let ctx = cvs.getContext("2d").drawImage(sourceImgObj, 0, 0);
let newImageData = cvs.toDataURL(mimeType, quality/100);
return newImageData;
}
Which (I believe) at the time was based on, if not the same as, j-i-c.
This function does work. In the browser it's decent but still slow (Chrome). But when running this function on a device while for example selecting an image of 8 MB, the app will basically crash.
Is there any way to make this compression/resizing of the image faster?
Additional info
I'm getting the file itself by using cordova-plugin-camera which is a direct link to the file on the user's device. So this is not a base64 image (but I do am able to obtain one easily if necessary).