android html5，如何从图库应用中获取照片并将其放入画布中

Posted 2023-03-05

【中文标题】android html5，如何从图库应用中获取照片并将其放入画布中

【英文标题】：android html5, how to get a photo from the Gallery app and put it into a canvas

【发布时间】：2015-06-03 12:30:38

【问题描述】：

我需要以下物品：

我在 android 上有一个 html5 应用程序

当用户点击“选择图片”按钮时，android 会显示默认的图库应用（或用户的任何其他应用），并且用户选择其中一张照片

android返回我的html5页面，传递userImage，html5页面将图片放入画布中（而不是通过web表单将照片上传到服务器）：

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

如何使用 HTML5 getUserMedia API 做到这一点？

【问题讨论】：

好的。但是，使用<input type="file" accept="image/*"/> 会通过表单将照片上传到网络服务器，不是吗？我需要将照片放在 html 画布中，使用静态 html 页面，而不向网络服务器发送数据。

太棒了！我在这里看到一个简单的演示：developer.mozilla.org/samples/domref/file-click-demo.html，带有文档：developer.mozilla.org/samples/domref/file-click-demo.htmlhttps:/… 请写下来作为答案，以便我可以将它奖励给你。

【参考方案1】：

getUserMedia API 是一个捕获 API。 这意味着它将访问硬件媒体（相机、麦克风）。您将无法通过此 API 访问已保存的图像（例如在图库应用中）。 也许您会对<input type="file" accept="image/*"/> 从此类应用程序中获取图像的方式更感兴趣。 用户选择的图像将存储在浏览器缓存中，可通过youInputElement.files 访问。

要在画布上绘制它，您必须将其传递给新的 Image()，这要感谢 URL.createObjectUrL() 或 FileReader()；

如您所见，有an example on MDN。