How to compress an image via Javascript in the browser

Question

TL DR   Is there a way to compress an image  mostly jpeg  png and gif  directly browser-side  before uploading it   I m pretty sure JavaScript can do this  but I can t find a way to achieve it    Here s the full scenario I would like to implement    the user goes to my website  and choose an image via an input type  file  element  this image is retrieved via JavaScript  we do some verification such as correct file format  maximum file size etc  if every thing is OK  a preview of the image is displayed on the page  the user can do some basic operations such as rotate the image by 90   -90    crop it following a pre-defined ratio  etc  or the user can upload another image and return to step 1  when the user is satisfied  the edited image is then compressed and  saved  locally  not saved to a file  but in the browser memory page  - the user fill a form with data like name  age etc  the user click on the  Finish  button  then the form containing datas   compressed image is sent to the server  without AJAX     The full process up to the last step should be done client side  and should be compatible on latest Chrome and Firefox  Safari 5  and IE 8   If possible  only JavaScript should be used  but I m pretty sure this is not possible    I ve not code anything right now  but I ve thought about it already  File reading locally is possible via File API  image previewing and editing could be done using Canvas element  but I can t find a way to do the image compression part   According to html5please com and caniuse com  supporting those browser is quite hard  thanks to IE   but could be done using polyfill such as FlashCanvas and FileReader   Actually  the goal is to reduce file size  so I see image compression as a solution  But  I know that uploaded images are going to be displayed on my website  every time at the same place  and I know the dimension of this display area  eg  200x400   So  I could resize the image to fit those dimensions  thus reducing file size  I have no idea what would be the compression ratio for this technique   What do you think   Do you have any advice to tell me   Do you know any way to compress an image browser-side in JavaScript   Thanks for your replies

User · Answer

For JPG Image compression you can use the best compression technique called JIC  Javascript Image Compression This will definitely help you -- https   github com brunobar79 J-I-C

User · Answer

I had an issue with the downscaleImage   function posted above by  daniel-allen-langdon in that the image width and image height properties are not available immediately because the image load is asynchronous   Please see updated TypeScript example below that takes this into account  uses async functions  and resizes the image based on the longest dimension rather than just the width  function getImage dataUrl  string   Promise lt HTMLImageElement gt         return new Promise  resolve  reject    gt            const image   new Image            image src   dataUrl          image onload        gt                resolve image                      image onerror    el  any  err  ErrorEvent    gt                reject err error                         export async function downscaleImage          dataUrl  string            imageType  string      e g   image jpeg          resolution  number      max width height in pixels         quality  number      e g  0 9   90  quality        Promise lt string gt            Create a temporary image so that we can compute the height of the image      const image   await getImage dataUrl       const oldWidth   image naturalWidth      const oldHeight   image naturalHeight      console log  dims   oldWidth  oldHeight        const longestDimension   oldWidth  gt  oldHeight    width     height       const currentRes   longestDimension     width    oldWidth   oldHeight      console log  longest dim   longestDimension  currentRes        if  currentRes  gt  resolution            console log  need to resize                   Calculate new dimensions         const newSize   longestDimension     width                Math floor oldHeight   oldWidth   resolution                Math floor oldWidth   oldHeight   resolution           const newWidth   longestDimension     width    resolution   newSize          const newHeight   longestDimension     height    resolution   newSize          console log  new width   height   newWidth  newHeight               Create a temporary canvas to draw the downscaled image on          const canvas   document createElement  canvas            canvas width   newWidth          canvas height   newHeight              Draw the downscaled image on the canvas and return the new data URL          const ctx   canvas getContext  2d             ctx drawImage image  0  0  newWidth  newHeight           const newDataUrl   canvas toDataURL imageType  quality           return newDataUrl            else           return dataUrl

User · Answer

i improved the function a head to be this    var minifyImg   function dataUrl newWidth imageType  image jpeg  resolve imageArguments 0 7       var image  oldWidth  oldHeight  newHeight  canvas  ctx  newDataUrl       new Promise function resolve         image   new Image    image src   dataUrl        log image         resolve  Done               then  d   gt         oldWidth   image width  oldHeight   image height        log  oldWidth oldHeight          newHeight   Math floor oldHeight   oldWidth   newWidth         log d     newHeight          canvas   document createElement  canvas          canvas width   newWidth  canvas height   newHeight        log canvas         ctx   canvas getContext  2d          ctx drawImage image  0  0  newWidth  newHeight           log ctx         newDataUrl   canvas toDataURL imageType  imageArguments         resolve newDataUrl                  the use of it    minifyImg  lt --DATAURL HERE-- gt   lt --new width-- gt   lt --type like image jpeg-- gt   data   gt      console log data      the new DATAURL       enjoy

User · Answer

In short    Read the files using the HTML5 FileReader API with  readAsArrayBuffer Create a Blob with the file data and get its url with window URL createObjectURL blob  Create new Image element and set it s src to the file blob url   Send the image to the canvas  The canvas size is set to desired output size Get the scaled-down data back from canvas via canvas toDataURL  image jpeg  0 7   set your own output format and quality  Attach new hidden inputs to the original form and transfer the dataURI images basically as normal text On backend  read the dataURI  decode from Base64  and save it   Source  code

User · Answer

I see two things missing from the other answers    canvas toBlob  when available  is more performant than canvas toDataURL  and also async  the file -  image -  canvas -  file conversion loses EXIF data  in particular  data about image rotation commonly set by modern phones tablets    The following script deals with both points      From https   developer mozilla org en-US docs Web API HTMLCanvasElement toBlob  needed for Safari  if   HTMLCanvasElement prototype toBlob        Object defineProperty HTMLCanvasElement prototype   toBlob             value  function callback  type  quality                 var binStr   atob this toDataURL type  quality  split      1                    len   binStr length                  arr   new Uint8Array len                for  var i   0  i  lt  len  i                      arr i    binStr charCodeAt i                              callback new Blob  arr    type  type     image png                           window URL   window URL    window webkitURL      Modified from https   stackoverflow com a 32490603  cc by-sa 3 0    -2   not jpeg  -1   no data  1  8   orientations function getExifOrientation file  callback           Suggestion from http   code flickr net 2012 06 01 parsing-exif-client-side-using-javascript-2       if  file slice            file   file slice 0  131072         else if  file webkitSlice            file   file webkitSlice 0  131072              var reader   new FileReader        reader onload   function e            var view   new DataView e target result           if  view getUint16 0  false     0xFFD8                callback -2               return                    var length   view byteLength  offset   2          while  offset  lt  length                var marker   view getUint16 offset  false               offset    2              if  marker    0xFFE1                    if  view getUint32 offset    2  false     0x45786966                        callback -1                       return                                    var little   view getUint16 offset    6  false     0x4949                  offset    view getUint32 offset   4  little                   var tags   view getUint16 offset  little                   offset    2                  for  var i   0  i  lt  tags  i                        if  view getUint16 offset    i   12   little     0x0112                            callback view getUint16 offset    i   12    8  little                            return                                                  else if   marker  amp  0xFF00     0xFF00  break              else offset    view getUint16 offset  false                     callback -1              reader readAsArrayBuffer file         Derived from https   stackoverflow com a 40867559  cc by-sa function imgToCanvasWithOrientation img  rawWidth  rawHeight  orientation        var canvas   document createElement  canvas        if  orientation  gt  4            canvas width   rawHeight          canvas height   rawWidth        else           canvas width   rawWidth          canvas height   rawHeight             if  orientation  gt  1            console log  EXIF orientation       orientation      rotating picture               var ctx   canvas getContext  2d        switch  orientation            case 2  ctx transform -1  0  0  1  rawWidth  0   break          case 3  ctx transform -1  0  0  -1  rawWidth  rawHeight   break          case 4  ctx transform 1  0  0  -1  0  rawHeight   break          case 5  ctx transform 0  1  1  0  0  0   break          case 6  ctx transform 0  1  -1  0  rawHeight  0   break          case 7  ctx transform 0  -1  -1  0  rawHeight  rawWidth   break          case 8  ctx transform 0  -1  1  0  0  rawWidth   break            ctx drawImage img  0  0  rawWidth  rawHeight       return canvas     function reduceFileSize file  acceptFileSize  maxWidth  maxHeight  quality  callback        if  file size  lt   acceptFileSize            callback file           return            var img   new Image        img onerror   function             URL revokeObjectURL this src           callback file              img onload   function             URL revokeObjectURL this src           getExifOrientation file  function orientation                var w   img width  h   img height              var scale    orientation  gt  4                   Math min maxHeight   w  maxWidth   h  1                    Math min maxWidth   w  maxHeight   h  1                h   Math round h   scale               w   Math round w   scale                var canvas   imgToCanvasWithOrientation img  w  h  orientation               canvas toBlob function blob                    console log  Resized image to     w    x    h           blob size  gt  gt  10     kB                    callback blob                   image jpeg   quality                          img src   URL createObjectURL file       Example usage   inputfile onchange   function            If file size  gt  500kB  resize such that width  lt   1000  quality   0 9     reduceFileSize this files 0   500 1024  1000  Infinity  0 9  blob   gt            let body   new FormData            body set  file   blob  blob name     file jpg            fetch   upload-image    method   POST   body   then

User · Answer

I find that there s simpler solution compared to the accepted answer    Read the files using the HTML5 FileReader API with  readAsArrayBuffer Create a Blob with the file data and get its url with window URL createObjectURL blob  Create new Image element and set it s src to the file blob url Send the image to the canvas  The canvas size is set to desired output size Get the scaled-down data back from canvas via canvas toDataURL  quot image jpeg quot  0 7   set your own output format and quality  Attach new hidden inputs to the original form and transfer the dataURI images basically as normal text On backend  read the dataURI  decode from Base64  and save it   As per your question   Is there a way to compress an image  mostly jpeg  png and gif  directly browser-side  before uploading it  My solution   Create a blob with the file directly with URL createObjectURL inputFileElement files 0     Same as accepted answer   Same as accepted answer  Worth mentioning that  canvas size is necessary and use img width and img height to set canvas width and canvas height  Not img clientWidth   Get the scale-down image by canvas toBlob callbackfunction blob      image jpeg   0 5   Setting  image jpg  has no effect  image png is also supported  Make a new File object inside the callbackfunction body with let compressedImageBlob   new File  blob     Add new hidden inputs or send via javascript   Server doesn t have to decode anything    Check https   javascript info binary for all information  I came up the solution after reading this chapter   Code       lt  DOCTYPE html gt       lt html gt       lt body gt       lt form action  quot upload php quot  method  quot post quot  enctype  quot multipart form-data quot  gt        Select image to upload         lt input type  quot file quot  name  quot fileToUpload quot  id  quot fileToUpload quot  multiple gt         lt input type  quot submit quot  value  quot Upload Image quot  name  quot submit quot  gt       lt  form gt       lt  body gt       lt  html gt   This code looks far less scary than the other answers   Update  One has to put everything inside img onload  Otherwise canvas will not be able to get the image s width and height correctly as the time canvas is assigned      function upload            var f   fileToUpload files 0           var fileName   f name split      0           var img   new Image            img src   URL createObjectURL f           img onload   function                var canvas   document createElement  canvas                canvas width   img width              canvas height   img height              var ctx   canvas getContext  2d                ctx drawImage img  0  0               canvas toBlob function blob                       console info blob size                       var f2   new File  blob   fileName    quot  jpeg quot                        var xhr   new XMLHttpRequest                        var form   new FormData                        form append  quot fileToUpload quot   f2                       xhr open  quot POST quot    quot upload php quot                        xhr send form                   image jpeg   0 5                    3 4MB  png file compression test with image jpeg argument set       0 9  777KB        0 8  383KB        0 7  301KB        0 6  251KB        0 5  219kB

User · Answer

You can take a look at image-conversion Try it here --  demo page

User · Answer

Edit  As per the Mr Me comment on this answer  it looks like compression is now available for JPG WebP formats   see https   developer mozilla org en-US docs Web API HTMLCanvasElement toDataURL     As far as I know  you cannot compress images using canvas  instead  you can resize it  Using canvas toDataURL will not let you choose the compression ratio to use  You can take a look at canimage that does exactly what you want   https   github com nfroidure CanImage blob master chrome canimage content canimage js  In fact  it s often sufficient to just resize the image to decrease it s size but if you want to go further  you ll have to use newly introduced method file readAsArrayBuffer to get a buffer containing the image data   Then  just use a DataView to read it s content according to the image format specification  http   en wikipedia org wiki JPEG or http   en wikipedia org wiki Portable Network Graphics    It ll be hard to deal with image data compression  but it is worse a try  On the other hand  you can try to delete the PNG headers or the JPEG exif data to make your image smaller  it should be easier to do so   You ll have to create another DataWiew on another buffer and fill it with the filtered image content  Then  you ll just have to encode you re image content to DataURI using window btoa   Let me know if you implement something similar  will be interesting to go through the code

User · Answer

PsychoWoods  answer is good   I would like to offer my own solution   This Javascript function takes an image data URL and a width  scales it to the new width  and returns a new data URL      Take an image URL  downscale it to the given width  and return a new image URL  function downscaleImage dataUrl  newWidth  imageType  imageArguments         use strict       var image  oldWidth  oldHeight  newHeight  canvas  ctx  newDataUrl          Provide default values     imageType   imageType     image jpeg       imageArguments   imageArguments    0 7          Create a temporary image so that we can compute the height of the downscaled image      image   new Image        image src   dataUrl      oldWidth   image width      oldHeight   image height      newHeight   Math floor oldHeight   oldWidth   newWidth          Create a temporary canvas to draw the downscaled image on      canvas   document createElement  canvas        canvas width   newWidth      canvas height   newHeight          Draw the downscaled image on the canvas and return the new data URL      ctx   canvas getContext  2d        ctx drawImage image  0  0  newWidth  newHeight       newDataUrl   canvas toDataURL imageType  imageArguments       return newDataUrl      This code can be used anywhere you have a data URL and want a data URL for a downscaled image

[javascript] How to compress an image via Javascript in the browser?

Examples related to javascript

Examples related to image

Examples related to cross-browser

Examples related to compression