android html5, how to get a photo from the Gallery app and put it into a canvas

1
votes

I need the following:

  • I have a html5 application on android

  • When the user clicks on the button "Select image", android shows the default Gallery app (or any other app of the user), and the user selects one of this photos

  • android returns back to my html5 page, passing the userImage, and the html5 page puts the image into a canvas (instead of uploading the photo to a server through a web form):

    var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.drawImage(userImage, 0, 0);

how to do this with HTML5 getUserMedia API?

1
html
ok. however, using <input type="file" accept="image/*"/> will upload the photo to the webserver through the form, isn't it? I need to put the photo in a html canvas, using a static html page, without sending data to the webserver. – David Portabella
great! I see a simple demo here: developer.mozilla.org/samples/domref/file-click-demo.html , with documentation: developer.mozilla.org/samples/domref/file-click-demo.htmlhttps:/… please write this down as an answer so that I can award it to you. – David Portabella

1 Answers

2
votes

The getUserMedia API is a capture API.
Which means it will access to hardware media (camera, microphone). You won't be able to access saved images (e.g in Gallery app) through this API.
Maybe you'll be more interested in <input type="file" accept="image/*"/> way to get an image from this kind of app. The Image selected by the user will be stored in browser cache, accessible through youInputElement.files.

To draw it on a canvas, you'll have to pass it to a new Image(), thanks to URL.createObjectUrL() or FileReader();

As you noticed, there is an example on MDN.