HTML5 Pre-resize images before uploading

by

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 > 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);

var dataurl = canvas.toDataURL("image/png");

//Post dataurl to the server with AJAX

More Related Contents:

  1. Drawing an image from a data URL to a canvas
  2. How do you stretch an image to fill a while keeping the image’s aspect-ratio?
  3. How to upload, display and save images using node.js and express [closed]
  4. html5: copy a canvas to image and back
  5. How to store objects in HTML5 localStorage
  6. How to force a web browser NOT to cache images
  7. Should setting an image src to data URL be available immediately?
  8. embedding image in html email
  9. html5 localStorage error with Safari: “QUOTA_EXCEEDED_ERR: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota.”
  10. AngularJS: No “Access-Control-Allow-Origin” header is present on the requested resource [duplicate]
  11. document.write() overwriting the document?
  12. Get img src with PHP
  13. CV – Extract differences between two images
  14. Gmail’s new image caching is breaking image links in newsletter
  15. How to find the size of localStorage
  16. Scale image to fit a bounding box
  17. How do I save and restore a File object in local storage
  18. PHP Upload, extract and progressbar
  19. Can I set a users profile image using the Facebook API?
  20. How to flip images horizontally with HTML5
  21. Saving and loading an image from localStorage
  22. LSB-DCT based Image steganography
  23. Advantages and disadvantages of using base64 encoded images [closed]
  24. CSS Border on PNG image with transparent parts
  25. Why use a sprite sheet rather than individual images?
  26. How to store an image in a variable
  27. How can I display an image inside SVG circle in html5?
  28. How to bind img src to data in Vue
  29. Why do two web pages have different localStorage? How can I fix this?
  30. canvas- Cropping images in different shapes

Leave a Comment