4

Is there a way to interact with the iPhone/iPad camera roll/photo library purely using HTML5/ javascript right from the browser? I am working on a HTML5 web app and want to avoid PhoneGap at this point.

So far, I have been able to take a picture from the camera and/or load a picture from the gallery into the browser using the File API, but there is no handle(like image name or other unique identifier) to access the file later. Getting the image's data uri and storing in localStorage works, however, with this approach there are size limitations and hence it won't work for a large number of images.

All I want to do is associate a few images (either from the gallery or taken from the camera) with an identifier, be able to store them offline, access and upload when the device has network access.

Alternatively, is there a way to store the images in any other folder instead of the default Camera Roll and get path to the files stored there?

Any pointers would be appreciated.

Saurabh
  • 771
  • 1
  • 7
  • 18

1 Answers1

3

Afraid not - Apple introduced support for input type=file in iOS 6 (or 5, can't recall) but that's basically all you can do from mobile Safari - which, when you think about it, is really the same security model as a desktop browser.

Graham
  • 6,484
  • 2
  • 35
  • 39
  • Thanks Graham. It seems like the only way to achieve this is to resize the image to a reasonable size, convert it to a Base64 string, compress the string further and store it in WebSQL/IndexedDB. As a result, I was able to convert a 2.3 MB image file (taken with a 8MP camera) to about 180 KB Base64 string. – Saurabh Aug 06 '13 at 17:48
  • @Saurabh Wondering if you can share the code? I am trying to achieve similar approach.I am only interested in converting the image from inputy type=file to base64. – snowflakes74 Jul 22 '16 at 02:22
  • @snowflakes74 It's quite simple - use the [FileReader's readAsDataURL method](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL) to obtain a Data URI, then just remove the content before the first comma with `event.target.result.split(",", 2)[1]` to get the base64 encoded string. – Graham Jul 22 '16 at 13:22
  • @Graham Thank you, that is is exactly what I ended up doing. Thanks – snowflakes74 Jul 23 '16 at 13:59
  • This answer appears out of date since the Github website (NOT app) can browse the camera roll just fine. – boatcoder Feb 05 '22 at 23:10