0

I'm using Ember on the frontend and Node/Express on the back end. I've got image uploading directly from my client to S3. My issue now is that the image sizes are huge (970 × 728 pixels (Natural: 3264 × 2448 pixels)) and I want to optimize the size. I've been able to do that using the canvas. But the resulting dataURI is also, very, very large. I could store it on my server, but that seems silly since then I'll have 1 large file sitting in s3 and another sitting in my server for every single image. I feel like the solution should be to upload the dataURI (in blob form) directly to s3 in the first place, but that's where I'm stumped. In order to draw the image in the canvas, I need the src url from s3. So how can I get the dataURI and save it to s3 without already having the original in s3 in the first place? Or should I be saving both versions in s3? Any advice on how to achieve this would be great. Thanks!

kaustubhb
  • 399
  • 1
  • 5
  • 19

1 Answers1

0

Browser support for this type of thing is limited. You could upload the large image to your server, use your server to resize the image, then upload the resized image from your server to s3 (making sure to delete the working copy). This is also good for hiding your AWS creds.

Another option is to use a service like: http://filepicker.io

Chris Tate
  • 458
  • 2
  • 10
  • Thanks for the suggestions crystal, for which part specifically is browser support limited? I've been reading that client resizing is becoming more common, so that server resources are freed up. I don't really need older browser support and I think canvas is fully supported in all the major browsers (http://caniuse.com/#feat=canvas). – kaustubhb Apr 15 '15 at 18:17
  • 2
    If that's the case, then try: http://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload – Chris Tate Apr 15 '15 at 18:21
  • Thanks! that looks very promising, I'll give it a shot. – kaustubhb Apr 15 '15 at 18:29