Use HTML5 to resize an image before upload

Question

I have found a few different posts and even questions on stackoverflow answering this question  I am basically implementing this same thing as this post   So here is my issue  When I upload the photo  I also need to submit the rest of the form  Here is my html    lt form id  uploadImageForm  enctype  multipart form-data  gt     lt input name  imagefile    type  file  id  takePictureField  accept  image    onchange  uploadPhotos     imageUploadUrl        gt     lt input id  name  value    name     gt        a few more inputs       lt  form gt    Previously  I did not need to resize the image  so my javascript looked like this   window uploadPhotos   function url       var data   new FormData    form id   uploadImageForm     0           ajax           url  url          data  data          cache  false          contentType  false          processData  false          type   POST           success  function data                   handle error                                         This all worked great    now that I need to resize the images    how can I replace the image in the form so that the resized one is posted and not the uploaded image   window uploadPhotos   function url        var resizedImage          Read in file     var file   event target files 0           Ensure it s an image     if file type match  image                console log  An image has been loaded                Load the image         var reader   new FileReader            reader onload   function  readerEvent                var image   new Image                image onload   function  imageEvent                        Resize the image                 var canvas   document createElement  canvas                        max size   1200                      width   image width                      height   image height                  if  width  gt  height                        if  width  gt  max size                            height    max size   width                          width   max size                                          else                       if  height  gt  max size                            width    max size   height                          height   max size                                                          canvas width   width                  canvas height   height                  canvas getContext  2d   drawImage image  0  0  width  height                   resizedImage   canvas toDataURL  image jpeg                              image src   readerEvent target result                    reader readAsDataURL file                 TODO  Need some logic here to switch out which photo is being posted         var data   new FormData    form id   uploadImageForm     0           ajax           url  url          data  data          cache  false          contentType  false          processData  false          type   POST           success  function data                   handle error                                         I ve thought about moving the file input out of the form and having a hidden input in the form that I set the value of to the value of the resized image    But I m wondering if I can just replace the image that is already in the form

User · Answer

If some of you  like me  encounter orientation problems I have combined the solutions here with a exif orientation fix  https   gist github com SagiMedina f00a57de4e211456225d3114fd10b0d0

User · Answer

if any interested I ve made a typescript version   interface IResizeImageOptions     maxSize  number    file  File    const resizeImage    settings  IResizeImageOptions    gt      const file   settings file    const maxSize   settings maxSize    const reader   new FileReader      const image   new Image      const canvas   document createElement  canvas      const dataURItoBlob    dataURI  string    gt        const bytes   dataURI split      0  indexOf  base64    gt   0           atob dataURI split      1             unescape dataURI split      1        const mime   dataURI split      0  split      1  split      0       const max   bytes length      const ia   new Uint8Array max       for  var i   0  i  lt  max  i    ia i    bytes charCodeAt i       return new Blob  ia    type mime           const resize        gt        let width   image width      let height   image height       if  width  gt  height            if  width  gt  maxSize                height    maxSize   width              width   maxSize                  else           if  height  gt  maxSize                width    maxSize   height              height   maxSize                       canvas width   width      canvas height   height      canvas getContext  2d   drawImage image  0  0  width  height       let dataUrl   canvas toDataURL  image jpeg        return dataURItoBlob dataUrl           return new Promise  ok  no    gt          if   file type match  image                no new Error  Not an image             return                 reader onload    readerEvent  any    gt            image onload        gt  ok resize             image src   readerEvent target result                 reader readAsDataURL file                 and here s the javascript result   var resizeImage   function  settings        var file   settings file      var maxSize   settings maxSize      var reader   new FileReader        var image   new Image        var canvas   document createElement  canvas        var dataURItoBlob   function  dataURI            var bytes   dataURI split      0  indexOf  base64    gt   0               atob dataURI split      1                 unescape dataURI split      1            var mime   dataURI split      0  split      1  split      0           var max   bytes length          var ia   new Uint8Array max           for  var i   0  i  lt  max  i                ia i    bytes charCodeAt i           return new Blob  ia     type  mime                var resize   function              var width   image width          var height   image height          if  width  gt  height                if  width  gt  maxSize                    height    maxSize   width                  width   maxSize                          else               if  height  gt  maxSize                    width    maxSize   height                  height   maxSize                                  canvas width   width          canvas height   height          canvas getContext  2d   drawImage image  0  0  width  height           var dataUrl   canvas toDataURL  image jpeg            return dataURItoBlob dataUrl              return new Promise function  ok  no            if   file type match  image                    no new Error  Not an image                 return                    reader onload   function  readerEvent                image onload   function      return ok resize                    image src   readerEvent target result                     reader readAsDataURL file                usage is like   resizeImage       file   image files 0       maxSize  500    then function  resizedImage        console log  upload resized image      catch function  err        console error err         or  async await    const config         file   image files 0       maxSize  500    const resizedImage   await resizeImage config  console log  upload resized image

User · Answer

Here is what I ended up doing and it worked great   First I moved the file input outside of the form so that it is not submitted    lt input name  imagefile    type  file  id  takePictureField  accept  image    onchange  uploadPhotos     imageUploadUrl        gt   lt form id  uploadImageForm  enctype  multipart form-data  gt       lt input id  name  value    name     gt          a few more inputs       lt  form gt    Then I changed the uploadPhotos function to handle only the resizing   window uploadPhotos   function url          Read in file     var file   event target files 0           Ensure it s an image     if file type match  image                console log  An image has been loaded                Load the image         var reader   new FileReader            reader onload   function  readerEvent                var image   new Image                image onload   function  imageEvent                        Resize the image                 var canvas   document createElement  canvas                        max size   544    TODO   pull max size from a site config                     width   image width                      height   image height                  if  width  gt  height                        if  width  gt  max size                            height    max size   width                          width   max size                                          else                       if  height  gt  max size                            width    max size   height                          height   max size                                                          canvas width   width                  canvas height   height                  canvas getContext  2d   drawImage image  0  0  width  height                   var dataUrl   canvas toDataURL  image jpeg                    var resizedImage   dataURLToBlob dataUrl                     event trigger                       type   imageResized                       blob  resizedImage                      url  dataUrl                                               image src   readerEvent target result                    reader readAsDataURL file              As you can see I m using canvas toDataURL  image jpeg    to change the resized image into a dataUrl adn then I call the function dataURLToBlob dataUrl   to turn the dataUrl into a blob that I can then append to the form  When the blob is created  I trigger a custom event  Here is the function to create the blob      Utility function to convert a canvas to a BLOB    var dataURLToBlob   function dataURL        var BASE64 MARKER     base64        if  dataURL indexOf BASE64 MARKER     -1            var parts   dataURL split               var contentType   parts 0  split      1           var raw   parts 1            return new Blob  raw    type  contentType               var parts   dataURL split BASE64 MARKER       var contentType   parts 0  split      1       var raw   window atob parts 1        var rawLength   raw length       var uInt8Array   new Uint8Array rawLength        for  var i   0  i  lt  rawLength    i            uInt8Array i    raw charCodeAt i              return new Blob  uInt8Array    type  contentType         End Utility function to convert a canvas to a BLOB           Finally  here is my event handler that takes the blob from the custom event  appends the form and then submits it      Handle image resized events      document  on  imageResized   function  event        var data   new FormData    form id   uploadImageForm     0        if  event blob  amp  amp  event url            data append  image data   event blob              ajax               url  event url              data  data              cache  false              contentType  false              processData  false              type   POST               success  function data                    handle errors

[javascript] Use HTML5 to resize an image before upload

Examples related to javascript

Examples related to html

Examples related to canvas