HTML5 Pre-resize images before uploading

Question

Here s a noodle scratcher   Bearing in mind we have HTML5 local storage and xhr v2 and what not  I was wondering if anyone could find a working example or even just give me a yes or no for this question   Is it possible to Pre-size an image using the new local storage  or whatever   so that a user who does not have a clue about resizing an image can drag their 10mb image into my website  it resize it using the new localstorage and THEN upload it at the smaller size   I know full well you can do it with Flash  Java applets  active X    The question is if you can do with Javascript   Html5   Looking forward to the response on this one   Ta for now

User · Answer

Resizing images in a canvas element is generally bad idea since it uses the cheapest box interpolation. The resulting image noticeable degrades in quality. I'd recommend using http://nodeca.github.io/pica/demo/ which can perform Lanczos transformation instead. The demo page above shows difference between canvas and Lanczos approaches.

It also uses web workers for resizing images in parallel. There is also WEBGL implementation.

There are some online image resizers that use pica for doing the job, like https://myimageresizer.com

User · Answer

The accepted answer works great  but the resize logic ignores the case in which the image is larger than the maximum in only one of the axes  for example  height   maxHeight but width  lt   maxWidth    I think the following code takes care of all cases in a more straight-forward and functional way  ignore the typescript type annotations if using plain javascript    private scaleDownSize width  number  height  number  maxWidth  number  maxHeight  number    width  number  height  number        if  width  lt   maxWidth  amp  amp  height  lt   maxHeight        return   width  height        else if  width   maxWidth  gt  height   maxHeight        return   width  maxWidth  height  height   maxWidth   width       else       return   width  width   maxHeight   height  height  maxHeight

User · Answer

fd append  image   dataurl     This will not work  On PHP side you can not save file with this   Use this code instead   var blobBin   atob dataurl split      1    var array       for var i   0  i  lt  blobBin length  i        array push blobBin charCodeAt i      var file   new Blob  new Uint8Array array     type   image png   name   avatar png      fd append  image   file      blob file

User · Answer

You can use dropzone js if you want to use simple and easy upload manager with resizing before upload functions   It has builtin resize functions  but you can provide your own if you want

User · Answer

Correction to above    lt img src    id  image  gt   lt input id  input  type  file  onchange  handleFiles    gt   lt script gt   function handleFiles         var filesToUpload   document getElementById  input   files      var file   filesToUpload 0           Create an image     var img   document createElement  img           Create a file reader     var reader   new FileReader           Set the image once loaded into file reader     reader onload   function e                img src   e target result           var canvas   document createElement  canvas              var canvas       lt canvas gt      id   testing    0           var ctx   canvas getContext  2d            ctx drawImage img  0  0            var MAX WIDTH   400          var MAX HEIGHT   300          var width   img width          var height   img height           if  width  gt  height              if  width  gt  MAX WIDTH                height    MAX WIDTH   width              width   MAX WIDTH                        else             if  height  gt  MAX HEIGHT                width    MAX HEIGHT   height              height   MAX HEIGHT                                canvas width   width          canvas height   height          var ctx   canvas getContext  2d            ctx drawImage img  0  0  width  height            var dataurl   canvas toDataURL  image png            document getElementById  image   src   dataurl                    Load files into file reader     reader readAsDataURL file            Post the data            var fd   new FormData        fd append  name    some filename jpg        fd append  image   dataurl       fd append  info    lah de dah             lt  script gt

User · Answer

If you don t want to reinvent the wheel you may try plupload com

User · Answer

Yes  use the File API  then you can process the images with the canvas element   This Mozilla Hacks blog post walks you through most of the process   For reference here s the assembled source code from the blog post      from an input element var filesToUpload   input files  var file   filesToUpload 0    var img   document createElement  img    var reader   new FileReader      reader onload   function e   img src   e target result  reader readAsDataURL file    var ctx   canvas getContext  2d    ctx drawImage img  0  0    var MAX WIDTH   800  var MAX HEIGHT   600  var width   img width  var height   img height   if  width  gt  height      if  width  gt  MAX WIDTH        height    MAX WIDTH   width      width   MAX WIDTH        else     if  height  gt  MAX HEIGHT        width    MAX HEIGHT   height      height   MAX HEIGHT        canvas width   width  canvas height   height  var ctx   canvas getContext  2d    ctx drawImage img  0  0  width  height    var dataurl   canvas toDataURL  image png       Post dataurl to the server with AJAX

User · Answer

Typescript  async resizeImg file  Blob   Promise lt Blob gt        let img   document createElement  img        img src   await new Promise lt any gt  resolve   gt            let reader   new FileReader            reader onload    e  any    gt  resolve e target result           reader readAsDataURL file               await new Promise resolve   gt  img onload   resolve      let canvas   document createElement  canvas        let ctx   canvas getContext  2d        ctx drawImage img  0  0       let MAX WIDTH   1000      let MAX HEIGHT   1000      let width   img naturalWidth      let height   img naturalHeight      if  width  gt  height            if  width  gt  MAX WIDTH                height    MAX WIDTH   width              width   MAX WIDTH                  else           if  height  gt  MAX HEIGHT                width    MAX HEIGHT   height              height   MAX HEIGHT                      canvas width   width      canvas height   height      ctx   canvas getContext  2d        ctx drawImage img  0  0  width  height       let result   await new Promise lt Blob gt  resolve   gt    canvas toBlob resolve   image jpeg   0 95           return result

User · Answer

Modification to the answer by Justin that works for me    Added img onload Expand the POST request with a real example    function handleFiles         var dataurl   null      var filesToUpload   document getElementById  photo   files      var file   filesToUpload 0           Create an image     var img   document createElement  img           Create a file reader     var reader   new FileReader           Set the image once loaded into file reader     reader onload   function e                img src   e target result           img onload   function                  var canvas   document createElement  canvas                var ctx   canvas getContext  2d                ctx drawImage img  0  0                var MAX WIDTH   800              var MAX HEIGHT   600              var width   img width              var height   img height               if  width   height                  if  width   MAX WIDTH                    height    MAX WIDTH   width                  width   MAX WIDTH                                else                 if  height   MAX HEIGHT                    width    MAX HEIGHT   height                  height   MAX HEIGHT                                            canvas width   width              canvas height   height              var ctx   canvas getContext  2d                ctx drawImage img  0  0  width  height                dataurl   canvas toDataURL  image jpeg                    Post the data             var fd   new FormData                fd append  name    some filename jpg                fd append  image   dataurl               fd append  info    lah de dah                  ajax                   url    ajax photo                   data  fd                  cache  false                  contentType  false                  processData  false                  type   POST                   success  function data                           form photo   0  reset                        location reload                                                   img onload              Load files into file reader     reader readAsDataURL file

User · Answer

I tackled this problem a few years ago and uploaded my solution to github as https   github com rossturner HTML5-ImageUploader  robertc s answer uses the solution proposed in the Mozilla Hacks blog post  however I found this gave really poor image quality when resizing to a scale that was not 2 1  or a multiple thereof   I started experimenting with different image resizing algorithms  although most ended up being quite slow or else were not great in quality either    Finally I came up with a solution which I believe executes quickly and has pretty good performance too - as the Mozilla solution of copying from 1 canvas to another works quickly and without loss of image quality at a 2 1 ratio  given a target of x pixels wide and y pixels tall  I use this canvas resizing method until the image is between x and 2 x  and y and 2 y  At this point I then turn to algorithmic image resizing for the final  step  of resizing down to the target size  After trying several different algorithms I settled on bilinear interpolation taken from a blog which is not online anymore but accessible via the Internet Archive  which gives good results  here s the applicable code     ImageUploader prototype scaleImage   function img  completionCallback        var canvas   document createElement  canvas        canvas width   img width      canvas height   img height      canvas getContext  2d   drawImage img  0  0  canvas width  canvas height        while  canvas width  gt    2   this config maxWidth             canvas   this getHalfScaleCanvas canvas              if  canvas width  gt  this config maxWidth            canvas   this scaleCanvasWithAlgorithm canvas              var imageData   canvas toDataURL  image jpeg   this config quality       this performUpload imageData  completionCallback       ImageUploader prototype scaleCanvasWithAlgorithm   function canvas        var scaledCanvas   document createElement  canvas         var scale   this config maxWidth   canvas width       scaledCanvas width   canvas width   scale      scaledCanvas height   canvas height   scale       var srcImgData   canvas getContext  2d   getImageData 0  0  canvas width  canvas height       var destImgData   scaledCanvas getContext  2d   createImageData scaledCanvas width  scaledCanvas height        this applyBilinearInterpolation srcImgData  destImgData  scale        scaledCanvas getContext  2d   putImageData destImgData  0  0        return scaledCanvas      ImageUploader prototype getHalfScaleCanvas   function canvas        var halfCanvas   document createElement  canvas        halfCanvas width   canvas width   2      halfCanvas height   canvas height   2       halfCanvas getContext  2d   drawImage canvas  0  0  halfCanvas width  halfCanvas height        return halfCanvas      ImageUploader prototype applyBilinearInterpolation   function srcCanvasData  destCanvasData  scale        function inner f00  f10  f01  f11  x  y            var un x   1 0 - x          var un y   1 0 - y          return  f00   un x   un y   f10   x   un y   f01   un x   y   f11   x   y             var i  j      var iyv  iy0  iy1  ixv  ix0  ix1      var idxD  idxS00  idxS10  idxS01  idxS11      var dx  dy      var r  g  b  a      for  i   0  i  lt  destCanvasData height    i            iyv   i   scale          iy0   Math floor iyv              Math ceil can go over bounds         iy1    Math ceil iyv   gt   srcCanvasData height - 1     srcCanvasData height - 1    Math ceil iyv            for  j   0  j  lt  destCanvasData width    j                ixv   j   scale              ix0   Math floor ixv                  Math ceil can go over bounds             ix1    Math ceil ixv   gt   srcCanvasData width - 1     srcCanvasData width - 1    Math ceil ixv                idxD    j   destCanvasData width   i    4                 matrix to vector indices             idxS00    ix0   srcCanvasData width   iy0    4              idxS10    ix1   srcCanvasData width   iy0    4              idxS01    ix0   srcCanvasData width   iy1    4              idxS11    ix1   srcCanvasData width   iy1    4                 overall coordinates to unit square             dx   ixv - ix0              dy   iyv - iy0                 I let the r  g  b  a on purpose for debugging             r   inner srcCanvasData data idxS00   srcCanvasData data idxS10   srcCanvasData data idxS01   srcCanvasData data idxS11   dx  dy               destCanvasData data idxD    r               g   inner srcCanvasData data idxS00   1   srcCanvasData data idxS10   1   srcCanvasData data idxS01   1   srcCanvasData data idxS11   1   dx  dy               destCanvasData data idxD   1    g               b   inner srcCanvasData data idxS00   2   srcCanvasData data idxS10   2   srcCanvasData data idxS01   2   srcCanvasData data idxS11   2   dx  dy               destCanvasData data idxD   2    b               a   inner srcCanvasData data idxS00   3   srcCanvasData data idxS10   3   srcCanvasData data idxS01   3   srcCanvasData data idxS11   3   dx  dy               destCanvasData data idxD   3    a                       This scales an image down to a width of config maxWidth  maintaining the original aspect ratio  At the time of development this worked on iPad iPhone Safari in addition to major desktop browsers  IE9   Firefox  Chrome  so I expect it will still be compatible given the broader uptake of HTML5 today  Note that the canvas toDataURL   call takes a mime type and image quality which will allow you to control the quality and output file format  potentially different to input if you wish    The only point this doesn t cover is maintaining the orientation information  without knowledge of this metadata the image is resized and saved as-is  losing any metadata within the image for orientation meaning that images taken on a tablet device  upside down  were rendered as such  although they would have been flipped in the device s camera viewfinder  If this is a concern  this blog post has a good guide and code examples on how to accomplish this  which I m sure could be integrated to the above code

[image] HTML5 Pre-resize images before uploading

Examples related to image

Examples related to html

Examples related to upload

Examples related to xmlhttprequest

Examples related to local-storage