Intel XDK mobile app compressing to smaller image

Question

So I am sending images to a remote Service of my own creation in my mobile App. My phone by default takes ridiculously large images at about 5MB a picture. I then encode it in base64 and send it to the service and it takes FOREVER. Is there any way I can detect how big this is and make a smaller version to send along. Kind of like when you take a picture for a text and it says "Picture too large. Compressing..." I need my app to take the picture and if its over 200KB to compress it down.

Answer 1

When you say "compress it down", I assume you're talking about downsampling (reducing the number of pixels) rather than changing the compression algorithm.

It's hard to tell without seeing your code, but when you convert it to base64 I assume you've got some object (say a dataURL), then you should be able to check the size of that, i.e.:

var x = <file converted to dataURL>
if (x.length > MAX) {
    <downsample image>
}

To downsample it, you could write it to a canvas element with smaller resolution, as described here - Drawing an image from a data URL to a canvas :

var myCanvas = document.getElementById('my_canvas_id');
var ctx = myCanvas.getContext('2d');
var img = new Image;
myCanvas.width=400;
myCanvas.height=600;
img.onload = function(){
    ctx.drawImage(img,0,0,400,600); // Or at whatever offset you like
};
img.src = strDataURI;

then convert the resulting canvas to a dataURL:

var d = myCanvas.toDataURL();

Of course, you'd need to make sure the aspect ratio of the canvas matched the aspect ratio of the image so it doesn't get distorted.