0

I need to support a basic set of image operations (blur, brightness/contrast, etc), so users can modify and preview their images before uploading them. I know there are multiple image libraries that can modify images on the fly. However, simply prompting for a file path and then adding an img with that path doesn't work due to all the local file and cross domain safety measures. Is there a way to do this without uploading the images to the server first?

Edit: Preview an image before it is uploaded has the solution I was looking for.

Community
  • 1
  • 1
riv
  • 5,954
  • 1
  • 24
  • 47
  • 1
    sounds complicated, I'm afraid you'd need flash to do this. – MightyPork Aug 15 '13 at 18:58
  • 1
    Like this http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded? – j08691 Aug 15 '13 at 18:58
  • Viewing is definitely possible with a `` with `FileReader`'s `readAsDataURL` method. Altering might be possible, depending on whether `data:` URLs are considered cross-origin or not. – apsillers Aug 15 '13 at 19:00
  • Of course, use a local HTTP server such as: Apache, Nginx, Python's SimpleHTTPServer module or an NPM module. If you use Google Chrome, launching it with --allow-file-access-from-files should do the trick, I'm sure you can do this with Firefox too, but Google will help you better than I can – just_a_dude Aug 15 '13 at 19:01
  • Thanks j08691, that worked perfectly! – riv Aug 15 '13 at 19:08
  • The link posted by @j08691 will get a file from the filesystem onto a canvas. After you alter the canvas with a manipulation library, you need to get the image to the server: http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server/13198699#13198699 – apsillers Aug 15 '13 at 19:08
  • @apsillers: yes I already got it to work as the link suggested; I'm not sure if uploading a locally modified image is the right thing to do though, as I would probably use a low-res version for preview, and the server needs a high quality image for printing. – riv Aug 15 '13 at 19:11

0 Answers0