I have an HTML5 application that allows users to drag-n-drop an image to a canvas, or alternatively, browse for it on their local disk. Once I got the image, I display it in the canvas using context.drawImage(). Got all the kinks out and it works great.
BUT. Now my customer want to use it on an iPad. Drag-n-drop is out of the question (the browser is a full window on iDevices). But the browse functionality, which is basically an input of type file, doesn’t work either.
To clarify, the behavior I need is selecting an image from the gallery and displaying it in a canvas.
Any ideas on how I can achieve this?
Thanks for your time.
Unfortunately, there are no satisfying answers for this.
http://learnbythedrop.com/forum/iphoneipad-safari-image-upload-resrictions
Basically, mobile safari is pretty severely sandboxed – file uploads don’t work, can’t grab files from photos, etc.
With iOS 5 there may be a solution for this using iCloud. Content is stored and pushed to mobile devices. Perhaps you’ll be able to access the image from your photo stream?
Alternately, you could use a service like photo bucket or flickr to store your images, then use the API to access them from your page.