vue 获取摄像头拍照，并旋转、裁剪生成新的图片
描述：
vue项目中，获取摄像头进行拍照，并对拍摄的图片进行旋转、裁剪等处理
html部分
<!-- 摄像头列表 -->
<el-select v-model="autoVal" size="small" @change="change('auto', true)">
<el-option
v-for="item in vidList"
:key="item.deviceId"
:value="item.deviceId"
:label="item.label"
/>
</el-select>
<!-- 拍照按钮 -->
<el-button size="small" type="primary" @click="getImg('auto')">拍照</el-button>
<!-- 拍照画面显示区 -->
<div id="right-bottom" v-loading="loading" class="right-bottom">
<video v-show="videoFalg" id="video" ref="videoElement" autoplay :srcObject="videoSource" />
<video v-show="false" id="videoElement" ref="video" autoplay :srcObject="videoSource" />
<img id="img" src="" alt="">
<div v-show="!a3Ora4 && !isNewModel" id="videoboder" class="videoboder" />
<canvas v-show="false" id="canvas" />
<!-- <video ref="videoElement" autoplay id="video"></video> -->
</div>
第一步：初始化
data() {
resolutionRatio: '2592x1944',
a3Ora4: false,
videoSource: null,
acrossOrvertical: true, // 横版
autoVal: '',
videoFalg: false,
constraints: {},
val: '',
loading: false,
imgLoading: false,
autoSelectedIndex: '',
vidList: [],
},
mounted() {
this.getMediaInfo()
},
methods: {
// 第一步
getMediaInfo() {
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
this.constraints = {
video: {
width: { ideal: 2592 },
height: { ideal: 1944 },
deviceId: ''
}
}
// 初始化
this.getUserMedia(this.constraints, this.deSuccess, this.error, '0')
} else {
alert('不支持访问用户媒体')
}
},
第二步：getUserMedia
getUserMedia(constraints, success, error, type) {
this.videoFalg = type !== '0'
if (navigator.mediaDevices.getUserMedia) {
// 最新的标准API
navigator.mediaDevices.getUserMedia(constraints)
.then(success)
.catch(error)
} else if (navigator.webkitGetUserMedia) {
// webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error)
} else if (navigator.mozGetUserMedia) {
// firfox浏览器
navigator.mozGetUserMedia(constraints, success, error)
} else if (navigator.getUserMedia) {
// 旧版API
navigator.getUserMedia(constraints, success, error)
}
},
success(stream) {
const video = document.getElementById('video')
const el = document.getElementById('videoElement')
const videoElement = this.$refs.videoElement
// 兼容webkit核心浏览器
if (this.videoFalg) {
this.videoSource = stream
videoElement.srcObject = stream
el.srcObject = stream
}
this.loading = false
video.onloadedmetadata = (e) => {
video.play()
}
},
error(err) {
console.log(err)
},
deSuccess(stream) {
// 获取拍照设备列表
this.getDevice()
}
第三步，获取拍照设备列表
getDevice() {
if (!navigator.mediaDevices?.enumerateDevices) {
console.log('不支持')
} else {
navigator.mediaDevices
.enumerateDevices()
.then((devices) => {
devices.forEach((device) => {
if (device.kind === 'videoinput') {
this.vidList.push(device)
}
})
if (this.vidList.length && localStorage.getItem('videoSelectId')) {
// 默认选中获取上次选择的设备
this.val = localStorage.getItem('videoSelectId')
this.change(this.val)
}
})
.catch((err) => {
console.error(`${err.name}: ${err.message}`)
})
}
},
切换摄像头时执行（一定要先释放上一次使用的摄像头，再切换新的）
async change() {
// 如果 videoSource 不为空，则先释放摄像头！！！！（重点）
if (this.videoSource !== null) {
this.videoSource.getTracks().forEach(function (track) {
track.stop()
})
this.videoSource = null
}
// 这里用定时器，是为了保证上次的摄像头已经完全释放，再切换到新的设备（重点）
setTimeout(() => {
const index = this.resolutionRatio.lastIndexOf('x')
const srtSart = this.resolutionRatio.substring(0, index)
const srtEnd = this.resolutionRatio.substring(index + 1, val.length)
// 存储选中的设备id
localStorage.setItem('videoSelectId', this.autoVal)
this.constraints = {
video: {
width: { ideal: srtSart * 1 },
height: { ideal: srtEnd * 1 },
deviceId: { exact: this.autoVal }
}
}
}
this.loading = true
this.getUserMedia(this.constraints, this.success, this.error, '1')
}, 1000)
},
拍照，并将拍照的图片根据需要进行旋转，获得新的图片
注意：以下代码中包含多个业务逻辑，A3/A4、横版/竖版、旋转指定角度、自动裁剪（opencv.js）、自动裁剪识别失败后自动弹出手动裁剪弹窗（cropperjs）等，可按需获取, 此处只做简单记录
getImg(type) {
if (!this.val && !this.autoVal) {
this.$message.warning('请先选择设备')
return
}
this.imgLoading = true
const el = document.getElementById('videoElement')
const canvas = document.getElementById('canvas')
var dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1
let base64Url = ''
const context = canvas.getContext('2d')
// 清空画布
context.clearRect(0, 0, canvas.width, canvas.height)
context.scale(dpr, dpr)
if (this.isNewModel || !this.isNewModel && this.a3Ora4) {
console.log('进入a3')
console.log('容器宽高')
console.log('el.videoWidth', el.videoWidth)
console.log('el.videoHeight', el.videoHeight)
canvas.width = el.videoWidth * dpr
canvas.height = el.videoHeight * dpr
console.log('容器宽高*dpr')
console.log('canvas.width', canvas.width)
console.log('canvas.height', canvas.height)
console.log('el.videoWidth * dpr', el.videoWidth * dpr)
console.log('el.videoHeight * dpr', el.videoHeight * dpr)
context.drawImage(el, 0, 0, el.videoWidth, el.videoHeight, 0, 0, canvas.width, canvas.height)
const imgdata = context.getImageData(0, 0, canvas.width, canvas.height)
console.log('imgdata', imgdata)
if (this.isNewModel) {
// 新模式拍照 --- 为识别图片后自动裁剪逻辑，此处用到了opencv.js, 可根据需要忽略
// eslint-disable-next-line no-undef
const sourceMat = cv.imread('canvas')
try {
// eslint-disable-next-line no-undef
const convertScaleAbsMat = getRect(sourceMat, 'canvas', this.currentScheme)
// 有数据,表示识别成功
if (convertScaleAbsMat) {
// eslint-disable-next-line no-undef
showImage('canvas', convertScaleAbsMat)
} else {
// 识别失败，弹出图片裁剪弹窗手动裁剪，详见上一篇
base64Url = canvas.toDataURL('image/jpeg')
this.currentType = type
this.originBase64 = base64Url
this.cropperVisible = true
setTimeout(() => {
this.imgLoading = false
}, 1000)
return
}
// 防止内存泄漏
if (!sourceMat.isDeleted()) {
sourceMat.delete()
}
} catch (error) {
console.error('error', error, sourceMat.isDeleted())
setTimeout(() => {
this.imgLoading = false
}, 1000)
if (!sourceMat.isDeleted()) {
sourceMat.delete()
}
}
} else {
// 原模式a3拍照
const d /* 图像的总通道*/ = imgdata.data
for (var ii = 0; ii < d.length; ii += 4) {
const average = d[ii] * 0.1 + d[ii + 1] * 0.5 + d[ii + 2] * 0.9
d[ii + 0] = average // 红
d[ii + 1] = average // 绿
d[ii + 2] = average // 蓝
}
// 4.把处理后的像素信息放回画布
context.clearRect(0, 0, canvas.width, canvas.height)
context.putImageData(imgdata, 0, 0)
}
base64Url = canvas.toDataURL('image/jpeg')
if (!this.acrossOrvertical && this.isNewModel) {
// 新模式且是竖版
const image = new Image()
image.src = base64Url
const that = this
// 以下为旋转图片逻辑
image.onload = function() {
const newCanvas = document.createElement('canvas')
const newContext = newCanvas.getContext('2d')
newCanvas.width = image.height
newCanvas.height = image.width
newContext.clearRect(0, 0, newCanvas.width, newCanvas.height)
newContext.translate(newCanvas.width / 2, newCanvas.height / 2)
// rotateVal 为旋转的角度
newContext.rotate(that.rotateVal * Math.PI / 180)
newContext.translate(-newCanvas.width / 2, -newCanvas.height / 2)
newContext.drawImage(image, newCanvas.width / 2 - image.width / 2, newCanvas.height / 2 - image.height / 2, image.width, image.height)
newContext.translate(newCanvas.width / 2, newCanvas.height / 2)
// rotateVal 为旋转的角度
newContext.rotate(-that.rotateVal * Math.PI / 180)
newContext.translate(-newCanvas.width / 2, -newCanvas.height / 2)
newContext.restore()
base64Url = newCanvas.toDataURL('image/jpeg')
const blob = that.convertBase64UrlToBlob(base64Url)
const url = window.URL.createObjectURL(that.convertBase64UrlToBlob(base64Url))
setTimeout(() => {
that.imgLoading = false
}, 1000)
that.$emit('photograph', url, blob, type)
return
}
} else {
if (this.rotateVal === 180) {
console.log('是A4/180')
const image = new Image()
image.src = base64Url
const that = this
image.onload = function() {
// 旋转180度
const newCanvas = document.createElement('canvas')
const newContext = newCanvas.getContext('2d')
newCanvas.width = image.width
newCanvas.height = image.height
newContext.clearRect(0, 0, newCanvas.width, newCanvas.height)
newContext.translate(newCanvas.width / 2, newCanvas.height / 2)
newContext.rotate(Math.PI)
newContext.translate(-newCanvas.width / 2, -newCanvas.height / 2)
newContext.drawImage(image, 0, 0, image.width, image.height)
newContext.translate(newCanvas.width / 2, newCanvas.height / 2)
console.log('旋转180：', that.rotateVal, -that.rotateVal * Math.PI / 180)
newContext.rotate(-Math.PI)
newContext.translate(-newCanvas.width / 2, -newCanvas.height / 2)
newContext.restore()
base64Url = newCanvas.toDataURL('image/jpeg')
const blob = that.convertBase64UrlToBlob(base64Url)
const url = window.URL.createObjectURL(that.convertBase64UrlToBlob(base64Url))
setTimeout(() => {
that.imgLoading = false
}, 1000)
that.$emit('photograph', url, blob, type)
}
} else {
const blob = this.convertBase64UrlToBlob(base64Url)
const url = window.URL.createObjectURL(this.convertBase64UrlToBlob(base64Url))
setTimeout(() => {
this.imgLoading = false
}, 1000)
this.$emit('photograph', url, blob, type)
}
}
} else if (!this.isNewModel && !this.a3Ora4) {
console.log('进入a4')
// 横版
if (this.acrossOrvertical) {
canvas.width = el.videoWidth * dpr
canvas.height = el.videoHeight * dpr
context.drawImage(el, 200, 200, el.videoWidth - 200, el.videoHeight - 200, 0, 0, (el.videoWidth + 170) * dpr, (el.videoHeight + 230) * dpr)
const imgdata = context.getImageData(0, 0, canvas.width, canvas.height)
const d /* 图像的总通道*/ = imgdata.data
// 2.遍历每一个像素
for (let i = 0; i < d.length; i += 4) {
const average = d[i] * 0.1 + d[i + 1] * 0.5 + d[i + 2] * 0.9
d[i + 0] = average // 红
d[i + 1] = average // 绿
d[i + 2] = average // 蓝
}
// 4.把处理后的像素信息放回画布
context.clearRect(0, 0, canvas.width, canvas.height)
context.putImageData(imgdata, 0, 0)
base64Url = canvas.toDataURL('image/jpeg')
if (this.rotateVal === 180) {
console.log('是A4/180')
const image = new Image()
image.src = base64Url
const that = this
image.onload = function() {
// 旋转180度
const newCanvas = document.createElement('canvas')
const newContext = newCanvas.getContext('2d')
newCanvas.width = image.width
newCanvas.height = image.height
newContext.clearRect(0, 0, newCanvas.width, newCanvas.height)
newContext.translate(newCanvas.width / 2, newCanvas.height / 2)
newContext.rotate(Math.PI)
newContext.translate(-newCanvas.width / 2, -newCanvas.height / 2)
newContext.drawImage(image, 0, 0, image.width, image.height)
newContext.translate(newCanvas.width / 2, newCanvas.height / 2)
console.log('旋转180：', that.rotateVal, -that.rotateVal * Math.PI / 180)
newContext.rotate(-Math.PI)
newContext.translate(-newCanvas.width / 2, -newCanvas.height / 2)
newContext.restore()
base64Url = newCanvas.toDataURL('image/jpeg')
const blob = that.convertBase64UrlToBlob(base64Url)
const url = window.URL.createObjectURL(that.convertBase64UrlToBlob(base64Url))
setTimeout(() => {
that.imgLoading = false
}, 1000)
that.$emit('photograph', url, blob, type)
}
} else {
const blob = this.convertBase64UrlToBlob(base64Url)
const url = window.URL.createObjectURL(this.convertBase64UrlToBlob(base64Url))
setTimeout(() => {
this.imgLoading = false
}, 1000)
this.$emit('photograph', url, blob, type)
}
} else {
// 竖版
canvas.width = el.videoWidth * dpr
canvas.height = el.videoHeight * dpr
context.drawImage(el, 200, 200, el.videoWidth - 200, el.videoHeight - 200, 0, 0, (el.videoWidth + 170) * dpr, (el.videoHeight + 230) * dpr)
const imgdata = context.getImageData(0, 0, canvas.width, canvas.height)
const d /* 图像的总通道*/ = imgdata.data
// 2.遍历每一个像素
for (let i = 0; i < d.length; i += 4) {
const average = d[i] * 0.1 + d[i + 1] * 0.5 + d[i + 2] * 0.9
d[i + 0] = average // 红
d[i + 1] = average // 绿
d[i + 2] = average // 蓝
}
// 4.把处理后的像素信息放回画布
context.clearRect(0, 0, canvas.width, canvas.height)
context.putImageData(imgdata, 0, 0)
base64Url = canvas.toDataURL('image/jpeg')
const image = new Image()
image.src = base64Url
const that = this
image.onload = function() {
// 旋转90度
const newCanvas = document.createElement('canvas')
const newContext = newCanvas.getContext('2d')
newCanvas.width = image.height
newCanvas.height = image.width
newContext.clearRect(0, 0, newCanvas.width, newCanvas.height)
newContext.translate(newCanvas.width / 2, newCanvas.height / 2)
newContext.rotate(that.rotateVal * Math.PI / 180)
newContext.translate(-newCanvas.width / 2, -newCanvas.height / 2)
newContext.drawImage(image, newCanvas.width / 2 - image.width / 2, newCanvas.height / 2 - image.height / 2, image.width, image.height)
newContext.translate(newCanvas.width / 2, newCanvas.height / 2)
newContext.rotate(-that.rotateVal * Math.PI / 180)
newContext.translate(-newCanvas.width / 2, -newCanvas.height / 2)
newContext.restore()
base64Url = newCanvas.toDataURL('image/jpeg')
const blob = that.convertBase64UrlToBlob(base64Url)
const url = window.URL.createObjectURL(that.convertBase64UrlToBlob(base64Url))
setTimeout(() => {
that.imgLoading = false
}, 1000)
that.$emit('photograph', url, blob, type)
}
}
}
},
原文地址：https://blog.csdn.net/xiamoziqian/article/details/143787838
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！