从html5中获取一张图片

Question

我读过很多从html5页面获取图像的方法。我仍然不确定什么最适合我的需要:

• 对浏览器和操作系统的广泛支持:至少:chrome, firefox, android默认，safari
我不需要实时采集。用户必须按下按钮拍照，请求系统相机应用

至少有三种解决方案:

• <input type="file" accept="image/*;capture=camera">
• Navigator.getUserMedia()(似乎已弃用)
• MediaDevices.getUserMedia()(似乎是实验性的)

无论如何，我看到很多例子嵌入相机到页面(w/ getUserMedia)，所以我不知道我是否可以只依靠第一种方法。

Answer 1

使用WebRTC getUserMedia API将覆盖除Safari以外的所有现代浏览器:http://caniuse.com/#feat=stream

下面是一个使用getUserMedia拍摄静态图片的示例页面(带有指向描述代码的页面的链接)。大多数getUserMedia演示在一个可见的画布区域中显示视频流，但这不是必需的。您可以使用getUserMedia捕获图像，而无需在可见画布中显示视频流。

不幸的是，苹果采用WebRTC api的速度很慢，所以我认为文件输入标签是最好的，除非你愿意使用Cordova之类的东西。下面是如何使用文件输入标记的描述。

Media Capture API是候选推荐，这意味着它正在成为标准，然而，我不知道有任何浏览器实现了当前的W3C推荐(在输入标签中使用裸捕获属性)。<input type="file" accept="image/*">样式目前似乎只支持移动浏览器。

总之，如果你想在不久的将来有广泛的浏览器支持，你将需要支持这两种方法，直到苹果开始支持WebRTC API，或者直到其他桌面浏览器开始支持Media Capture API(或带有Capture属性的变体，目前被移动浏览器支持)。