微信camera官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/camera.html

1. html

整体效果 样式可以自行定义的一个拍照组件 未找到摄像头是因为台式机电脑没有摄像头 真机测试可以使用

<view class="tackpic"><view class="font-title" v-if="!setData.src"><view>对准文档 拍照扫描</view></view><view class="yulan-box" v-if="setData.src"><image :src="setData.src" mode=""></image><button class="successBtn" @click="submitForm">完成</button></view><camera device-position="back" flash="off" @error="cameraError"style="width: 100%;height: calc(100vh - 240rpx)"></camera><view v-if="setData.src==''" class="pic-bot"><view class="left" @click="takealbum"><u-icon name="photo" size="50" color="#fff"></u-icon></view><view class="center" @click="takePhoto"><view class="takeout"><view class="takein"></view></view></view></view></view>

2)方法

cameraError方法进入拍照页面时会提醒授权相机。如果用户点击不同意授权就会打回上一页，当再进入这个页面时会提醒让用户开启授权

uploadImgFile为uni自带的上传图片aip

takealbum方法点击时调用uniapp的从相册选择图 （）sourceType: 为‘album’从相册获取，为‘camera’时直接拍照，什么都不填写时默认两种选择

methods: {cameraError() {wx.showModal({title: '提示',content: '请开启摄像头权限，否则无法拍照',confirmText: '去开启',success(res) {if (res.confirm) {wx.openSetting({success(res) {if (res.authSetting["scope.camera"]) {// 重点是这里，再次允许授权后需要刷新一下页面，camera组件才会出来wx.redirectTo({url: '/pages_home/components/takePictures'})} else {wx.navigateBack({delta: 1})}}})} else if (res.cancel) {console.log('用户点击取消')wx.navigateBack({delta: 1})}}})},//添加防抖--提交submitFormFn() {let that = thisthat.uploadImgFile(this.setData.src, that)},submitForm() {if (this.timeout) {clearTimeout(this.timeout);}this.timeout = setTimeout(this.submitFormFn, 1000);},uploadImgFile(filePath, that) {uni.uploadFile({url: `${process.uniEnv.baseUrl}/baseVinCode/getVinCodeByImg`,filePath: filePath,name: 'file',formData: {file: filePath},header: {'Content-Type': 'multipart/form-data',},success: response => {let res = JSON.parse(response.data.toString("utf8"));const {data,code} = res;if (code == 200) {uni.redirectTo({url: `/pages_home/photoIdentification?imageSrc=${filePath}&vinCode=${data}`});} else {uni.showToast({title: res.msg,duration: 3000});}},complete: () => {uni.hideLoading()}});},takePhoto() {const ctx = wx.createCameraContext()ctx.takePhoto({quality: 'high',success: (res) => {console.log(res, '------42');
//res.tempImagePath获取点击拍照后的图片路径 然后赋值给image标签显示图片。点击拍照图片就会存入手机相册this.setData.src = res.tempImagePath}})},takePic() {},takealbum() {this.chooseImage('album')},chooseImage(sourceType) {const that = thisuni.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: [sourceType],success: (res) => {if (res.tempFiles[0]['size'] > 20 * 1024 * 1024) {uni.showToast({title: '图片大小不能超过20M',icon: 'none',duration: 3000});return;}uni.showLoading({title: '上传中...'})if (res.tempFiles[0]['size'] < 5 * 1024 * 1024) {that.uploadImgFile(res.tempFilePaths[0], that)} else {uni.compressImage({src: res.tempFilePaths[0],quality: 80,success: res => {that.uploadImgFile(res.tempFilePath, that)}})}}});},}

3）css样式

.successBtn {background-color: #05c160;padding: 4rpx 30rpx;color: #fff;height: 80rpx;position: absolute;bottom: 50rpx;right: 50rpx;display: flex;justify-content: center;align-items: center;border-radius: 10rpx;}.yulan-box {position: relative;width: 100%;height: 100%;}image {width: 100%;height: 100vh;}.tackpic {width: 100%;height: 100vh;background-color: #242424;.font-title {position: fixed;top: 3%;background-color: transparent;width: 100%;height: 50rpx;color: #fff;display: flex;align-items: center;justify-content: center;z-index: 999;view {padding: 20rpx 30rpx;border-radius: 10rpx;font-size: 12px;background-color: rgba(0, 0, 0, 0.3);}}.pic-bot.data-v-1c7472ae {width: 100%;height: 240rpx;background-color: #242424 !important;position: relative;}}.pic-bot {width: 100%;display: flex;.left {width: 30%;display: flex;align-items: center;justify-content: center;}.center {width: 40%;padding: 20rpx;display: flex;align-items: center;justify-content: center;.takeout {width: 120rpx;height: 120rpx;border-radius: 50%;background-color: transparent;border: 3px solid #fff;display: flex;align-items: center;justify-content: center;position: absolute;bottom: 120%;.takein {width: 80rpx;height: 80rpx;border-radius: 40rpx;background-color: #fff;}}}.right {width: 30%;}}