• Stars
    star
    345
  • Rank 122,750 (Top 3 %)
  • Language
    JavaScript
  • Created about 12 years ago
  • Updated over 11 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

12 Sep 2012

Preprocessing (scaling down) images on client side before uploading

Because people often upload 5MB big 3000x2000px PNGs that are then scaled down to 100x100px JPEGs on server - waste of time and bandwidth

1. user selects image(s)
2. script opens the image using FileReader API
3. script appends it to new Image object (not displayed at all actually) 
4. new Image objects is drawn into new Canvas object, that is scaled down to desired dimensions
5. display the canvas, ie. a preview of the image to be uploaded
6. take the pic from canvas as JPEG in dataURI format
7. send it to server
8. save it on server side

(c) Josef Richter