【设备】摄像头(Camera)
概述
摄像头(Camera)API是通过input元素来实现的，其中该元素的type属性必须为“file”,accept属性要允许图片格式，这样才能指示该文件选择框允许选择图片，包括直接通过摄像头拍摄图片。
<input type="file" id="pic" accept="image/*">当用户激活input元素时，系统会显示一个选择页面，其中一个选项是选择本地的图片文件，另外一个选项是通过摄像头直接拍摄图片作为选择的图片。
若用户选择摄像头，就进入设备(包括PC、手机、平板等)的拍照模式。拍照完成后，用户能够选择确认或放弃，如果确认，该图片会作为所选文件发送给<input type=“file”>元素，同时触发该元素的onchange事件。
代码示例
获取照片
通过File API,可获取到用户所拍摄的图片的引用。
function takePicture(callback) { //获取文件选择框 var filePhoter = document.getElementById("filePhoter "); filePhoter .onchange = function(e) { //获取图片文件的引用 var files = e.target.files, file; if(files && files.length > 0) { file = files[0] } //调用回调函数 callback(file); } }展示图片
获得了图片(也就是File对象)之后，我们就可以直接在前端将改图片显示到页面上。
使用URL.createObjectURL()方法
function showPicture(picFile) //获取到img元素 var imgEl= document.getElementById("pictureShower");
// 获取到window.URL对象 var URL = window.URL || window.webkitURL;
// 创建一个对象URL字符串 var imgURL = URL.createObjectURL(file);
// 设置img元素的src属性为那个URL imgEl.src = imgURL;
// 释放那个对象URL URL.revokeObjectURL(imgURL); }使用FileReader.readAsDataURL()方法
function showPicture(picFile) //获取到img元素 var imgEl= document.getElementById("pictureShower"); var fileReader = new FileReader(); fileReader.onload = function (event) { imgEl.src = event.target.result; }; fileReader.readAsDataURL(file); }本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-06-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录