背景
我们平常可能有需求是要自定义拍照，比如在相机界面加上一些自定义的辅助线、遮罩等等，但是前端不像原生开发可以自定义相机，我们只能另辟蹊径了。
常用拍照方案
首先总结一下常用的拍照方案，这里只说 web 开发。
方案一
通过 <input type="file"> 控件调用移动端的摄像头，实现拍照。
优点
- 兼容性好
缺点
- 拍照调取系统相机，无法自定义
方案二
通过 video 控件，通过捕获 video 的流，使用 canvas 截取 video 中的图像实现拍照
优点
- 可以实现对拍照界面的重写
缺点
- 会有兼容性问题
两种方案都不能直接唤起相册，目前据了解只有方案一不加 capture 属性可以弹出从相册选择的弹框，如图：
具体实现
方案一实践
<input id="takepicture" type="file" accept="image/*" capture="camera">
accept 可选值
该属性的值可以是一个，也可以说由逗号分割开的多个文件类型：
包括，以 . 开始的文件扩展名。（例如：".jpg,.png,.doc"）
或者，是一个有效的 MIME 类型，可以不需要扩展名，如下：
audio/* 表示所有音频文件 HTML5（支持）
video/* 表示视频文件 HTML5（支持）
image/* 表示图片文件 HTML5（支持）
支持逗号分隔的 MIME 类型字符串，写可以写成如下的方式：
accept="image/png" 或者 accept=".png" ，只接受 png 图片。
accept="image/png, image/jpeg" 或者 accept=".png, .jpg, .jpeg" ，接受 PNG 和 JPEG 文件。
accept="image/*" ，接受任何图片文件类型。
accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" ，接受任何 MS Doc 文件类型。
capture 可选值：
当 accept="audio/*或video/*" 时capture只有两种值，一种是user，用于调用面向人脸的摄像头(例如手机前置摄像头)，一种是environment，用于调用环境摄像头(例如手机后置摄像头)。
当accept=”audio”时，只要有capture就调用设备麦克风，忽略user和environment值。
至于网上提到的camera和filesystem，官方没提。可能是这些字符串被隐式转换为 true 了
官方文档
const takePictureOnclick = () => {
const takePicture = document.getElementById('takepicture');
takePicture.click();
}
方案二实践
<template>
<div class="camera_outer">
<video
id="videoCamera"
:width="videoWidth"
:height="videoHeight"
autoplay
/>
<canvas
id="canvasCamera"
style="display: none"
:width="videoWidth"
:height="videoHeight"
/>
<div
v-if="imgSrc"
class="img_bg_camera"
>
<img
:src="imgSrc"
alt=""
class="tx_img"
>
</div>
<button @click="getCompetence()">
打开摄像头
</button>
<button @click="stopNavigator()">
关闭摄像头
</button>
<button @click="setImage()">
拍照
</button>
</div>
</template>
<script>
export default {
data () {
return {
videoWidth: 300,
videoHeight: 300,
imgSrc: '',
thisCancas: null,
thisContext: null,
thisVideo: null
}
},
mounted () {
this.getCompetence()
},
methods: {
// 调用权限（打开摄像头功能）
getCompetence () {
var _this = this
this.thisCancas = document.getElementById('canvasCamera')
this.thisContext = this.thisCancas.getContext('2d')
this.thisVideo = document.getElementById('videoCamera')
// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {
}
}
// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
// 使用getUserMedia，因为它会覆盖现有的属性。
// 这里，如果缺少getUserMedia属性，就添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先获取现存的getUserMedia(如果存在)
var getUserMedia =
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.getUserMedia
// 有些浏览器不支持，会返回错误信息
// 保持接口一致
if (!getUserMedia) {
return Promise.reject(
new Error('getUserMedia is not implemented in this browser')
)
}
// 否则，使用Promise将调用包装到旧的navigator.getUserMedia
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject)
})
}
}
var constraints = {
audio: false,
video: {
width: this.videoWidth,
height: this.videoHeight,
transform: 'scaleX(-1)'
}
}
navigator.mediaDevices
.getUserMedia(constraints)
.then(function (stream) {
// 旧的浏览器可能没有srcObject
if ('srcObject' in _this.thisVideo) {
_this.thisVideo.srcObject = stream
} else {
// 避免在新的浏览器中使用它，因为它正在被弃用。
_this.thisVideo.src = window.URL.createObjectURL(stream)
}
_this.thisVideo.onloadedmetadata = function (e) {
_this.thisVideo.play()
}
})
.catch((err) => {
console.log(err)
})
},
// 绘制图片（拍照功能）
setImage () {
var _this = this
// 点击，canvas画图
_this.thisContext.drawImage(
_this.thisVideo,
0,
0,
_this.videoWidth,
_this.videoHeight
)
// 获取图片base64链接
var image = this.thisCancas.toDataURL('image/png')
_this.imgSrc = image
this.$emit('refreshDataList', this.imgSrc)
},
// base64转文件
dataURLtoFile (dataurl, filename) {
var arr = dataurl.split(',')
var mime = arr[0].match(/:(.*?);/)[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, {
type: mime })
},
// 关闭摄像头
stopNavigator () {
this.thisVideo.srcObject.getTracks()[0].stop()
}
}
}
</script>
<style lang="scss" scoped>
.camera_outer {
position: relative;
overflow: hidden;
background-size: 100%;
video,
canvas,
.tx_img {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
.btn_camera {
position: absolute;
bottom: 4px;
left: 0;
right: 0;
height: 50px;
background-color: rgba(0, 0, 0, 0.3);
line-height: 50px;
text-align: center;
color: #ffffff;
}
.bg_r_img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.img_bg_camera {
position: absolute;
right: 0;
top: 0;
img {
width: 300px;
height: 300px;
}
.img_btn_camera {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
line-height: 50px;
text-align: center;
background-color: rgba(0, 0, 0, 0.3);
color: #ffffff;
.loding_img {
width: 50px;
height: 50px;
}
}
}
}
</style>