How to compress an image via Javascript in the browser?

by

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.

More Related Contents:

  1. Using image.complete to find if image is cached on chrome?
  2. 5 stars and the golden 5 stars are not together (When browsing with Internet explorer)
  3. Browser detection versus feature detection
  4. How to build PDF file from binary string returned from a web-service using javascript
  5. OnChange event handler for radio button (INPUT type=”radio”) doesn’t work as one value
  6. How is the default submit button on an HTML form determined?
  7. Is there a way to make text unselectable on an HTML page? [duplicate]
  8. Image preloader javascript that supports events
  9. Using jQuery, Restricting File Size Before Uploading
  10. execute function after complete page load [duplicate]
  11. Dynamically resizing Image-maps and images
  12. How to make Internet Explorer emulate pointer-events:none?
  13. Javascript switch vs. if…else if…else
  14. Watch for object properties changes in JavaScript [duplicate]
  15. Close Current Tab
  16. Math.round(num) vs num.toFixed(0) and browser inconsistencies
  17. Cross-browser method for detecting the scrollTop of the browser window
  18. Adding images to an HTML document with JavaScript
  19. Why can’t I pass “window.location.reload” as an argument to setTimeout?
  20. how to clear or replace a cached image
  21. Load image from url and draw to HTML5 Canvas
  22. Create an Image of a DIV in JavaScript (GIF/PNG)
  23. Javascript maximum size for types?
  24. Is there a way to load images to user’s cache asynchronously?
  25. Find the exact height and width of the viewport in a cross-browser way
  26. How to display text in the browser status bar?
  27. Cancel single image request in html5 browsers
  28. Wait for image to be loaded before going on
  29. IMG SRC tags and JavaScript
  30. Center an Image vertically and horizontally using CSS

Leave a Comment