Compress images on client side before uploading

Question

Does anyone know of any free script that compresses JPG  GIF and PNG files as much as possible

User · Answer

I read about an experiment here  http   webreflection blogspot com 2010 12 100-client-side-image-resizing html  The theory is that you can use canvas to resize the images on the client before uploading  The prototype example seems to work only in recent browsers  interesting idea though      However  I   m not sure about using canvas to compress images  but you can certainly resize them

User · Answer

If you are looking for a library to carry out client-side image compression  you can check this out compress js  This will basically help you compress multiple images purely with JavaScript and convert them to base64 string  You can optionally set the maximum size in MB and also the preferred image quality

User · Answer

I m late to the party  but this solution worked for me quite well  Based on this library  you can use a function lik this - setting the image  quality  max-width  and output format  jepg png    function compress source img obj  quality  maxWidth  output format       var mime type    image jpeg       if typeof output format      undefined   amp  amp  output format   png            mime type    image png              maxWidth   maxWidth    1000      var natW   source img obj naturalWidth      var natH   source img obj naturalHeight      var ratio   natH   natW      if  natW  gt  maxWidth            natW   maxWidth          natH   ratio   maxWidth             var cvs   document createElement  canvas        cvs width   natW      cvs height   natH       var ctx   cvs getContext  2d   drawImage source img obj  0  0  natW  natH       var newImageData   cvs toDataURL mime type  quality 100       var result image obj   new Image        result image obj src   newImageData      return result image obj

User · Answer

You might be able to resize the image with canvas and export it using dataURI  Not sure about compression  though   Take a look at this  Resizing an image in an HTML5 canvas

User · Answer

I just developed a javascript library called JIC to solve that problem  It allows you to compress jpg and png on the client side 100  with javascript and no external libraries required   You can try the demo here   http   makeitsolutions com labs jic and get the sources here   https   github com brunobar79 J-I-C

[javascript] Compress images on client side before uploading

Examples related to javascript

Examples related to jquery

Examples related to jquery-plugins