使用Camera API
通过Camera API,你可以使用手机的摄像头拍照,然后把拍到的照片发送给当前网页.这些操作主要是通过一个input元素来实现的,其中该元素的type属性必须为"file",accept属性要允许图片格式,这样才能知道这个文件选择框是用来选择图片的.,完整的HTML结构看起来是这样的:
<input type="file" id="take-picture" accept="image/*">当用户激活这个HTML元素的时候,系统会呈现给用户一个选择界面,其中一个选项是选择本地的图片文件,另一个选项是要通过摄像头直接 拍摄照片作为所选文件.如果用户选择了摄像头,则会进入手机的拍照模式.拍照结束后,,用户可以选择确定还是放弃.如果接受了,则该照片会作为所选文件发 送给那个<input type="file">元素,同时触发该元素的onchange事件.
获取到所拍摄照片的引用EDIT
通过File API,你可以获取到用户所拍摄的照片或者所选择的图片文件的引用:
var takePicture = document.querySelector("#take-picture"); takePicture.onchange = function (event) { // 获得图片文件的引用 var files = event.target.files, file; if (files && files.length > 0) { file = files[0]; } };在网页中展示图片EDIT
如果你获取到了那张照片的引用(也就是File对象),你就可以使用window.URL.createObjectURL()方法创建一个指向那个照片的URL,然后把得到的URL赋给img元素的src属性:
// 获取到img元素
var showPicture = document.querySelector("#show-picture"); // 获取到window.URL对象 var URL = window.URL || window.webkitURL; // 创建一个对象URL字符串 var imgURL = URL.createObjectURL(file); // 设置img元素的src属性为那个URL showPicture.src = imgURL; // 释放那个对象URL,提高性能 URL.revokeObjectURL(imgURL);如果浏览器不支持createObjectURL()方法,还可以使用FileReader来实现:
// 如果createObjectURL方法不可用
var fileReader = new FileReader(); fileReader.onload = function (event) { showPicture.src = event.target.result; }; fileReader.readAsDataURL(file);完整的示例代码EDIT
这里有一个完整的使用Camera API的demo,下面是这个demo的完整代码:
HTML页面:
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>Camera API</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="screen"> </head> <body> <div class="container"> <h1>Camera API</h1> <section class="main-content"> <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p> <p> <input type="file" id="take-picture" accept="image/*"> </p> <h2>Preview:</h2> <p> <img src="about:blank" alt="" id="show-picture"> </p> <p id="error"></p> </section> <p class="footer">All the code is available in the <a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">Camera API repository on GitHub</a>.</p> </div> <script src="js/base.js"></script> </body> </html>JavaScript文件:
(function () { var takePicture = document.querySelector("#take-picture"), showPicture = document.querySelector("#show-picture"); if (takePicture && showPicture) { // Set events takePicture.onchange = function (event) { // Get a reference to the taken picture or chosen file var files = event.target.files, file; if (files && files.length > 0) { file = files[0]; try { // Get window.URL object var URL = window.URL || window.webkitURL; // Create ObjectURL var imgURL = URL.createObjectURL(file); // Set img src to ObjectURL showPicture.src = imgURL; // Revoke ObjectURL URL.revokeObjectURL(imgURL); } catch (e) { try { // Fallback if createObjectURL is not supported var fileReader = new FileReader(); fileReader.onload = function (event) { showPicture.src = event.target.result; }; fileReader.readAsDataURL(file); } catch (e) { // var error = document.querySelector("#error"); if (error) { error.innerHTML = "Neither createObjectURL or FileReader are supported"; } } } } }; } })();浏览器兼容性EDIT
- Desktop
- Mobile
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Camera API | Not supported | Not supported | Not supported | Not supported | Not supported |
createObjectURL() | 16 | 8.0 (8.0) | 10+ | Not supported | Not supported |
FileReader | 16 | 3.6 (1.9.2) | 10+ | 11.6+ | Not supported |
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
