微信camera拍照组件的使用（uniapp小程序）代码可直接复制看效果
微信camera官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/camera.html
html
整体效果 样式可以自行定义的一个拍照组件 未找到摄像头是因为台式机电脑没有摄像头 真机测试可以使用
对准文档 拍照扫描
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 = this
that.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 = this
uni.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%;
}
}