Resize images with HTML5 Canvas.

If someone uploads an image that is too big (in terms of pixel width and pixel height) for an application, the image may be resized in HTML5 Canvas as suggested here. I do not know if there is also a way to save out a sized down version of an image. Wait! I found this which suggests you may resize an image in a canvas before an upload and then use "dataURItoBlob" to sniff the resized file to a binary blob that may be shoved up in an upload. Something copied from the last link:

function dataURItoBlob(dataURI) {
   var binary = atob(dataURI.split(',')[1]);
   var array = [];
   for(var i = 0; i < binary.length; i++) {
      array.push(binary.charCodeAt(i));
   }
   return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}

 
 

I have not tried any of this stuff myself yet. I just heard of it today and was fascinated.