首页 专题 H5案例 前端导航 UI框架

使用Camera

作者:TG 日期: 2016-05-28 阅读: 538
通过Camera API,你可以使用手机的摄像头拍照,然后把拍到的照片发送给当前网页.这些操作主要是通过一个input元素来实现的,其中该元素的type属性必须为"file",accept属性要允许图片格式,这样才能知道这个文件选择框是用来选择图片的。
语法

<input type="file" id="take-picture" accept="image/*">

当用户点击激活这个input后,我们可以选择本地的图片文件,也可以通过摄像头直接拍摄照片作为所选文件。

选择了图片后,会触发该元素的onchange事件,这时,我们可以通过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]; } };

在网页中展示图片

如果你获取到了那张照片的引用(也就是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);

完整代码

(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"; } } } } }; } })();


关注”全栈技术杂货铺“

全栈技术杂货铺