微信camera拍照组件的使用uni-app小程序代码可直接复制看效果

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

1. html

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

1.  
   <view class="tackpic">
2.  
   <view class="font-title" v-if="!setData.src">
3.  
   <view>对准文档 拍照扫描</view>
4.  
   </view>
5.  
   <view class="yulan-box" v-if="setData.src">
6.  
   <image :src="setData.src" mode=""></image>
7.  
   <button class="successBtn" @click="submitForm">完成</button>
8.  
   </view>
9.  
   <camera device-position="back" flash="off" @error="cameraError"
10.  
    style="width: 100%;height: calc(100vh - 240rpx)"></camera>
11.  
    <view v-if="setData.src==''" class="pic-bot">
12.  
    <view class="left" @click="takealbum">
13.  
    <u-icon name="photo" size="50" color="#fff"></u-icon>
14.  
    </view>
15.  
    <view class="center" @click="takePhoto">
16.  
    <view class="takeout">
17.  
    <view class="takein">
18.  
     
19.  
    </view>
20.  
    </view>
21.  
    </view>
22.  
    </view>
23.  
    </view>

2)方法

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

uploadImgFile为uni自带的上传图片aip

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

1.  
   methods: {
2.  
   cameraError() {
3.  
   wx.showModal({
4.  
   title: '提示',
5.  
   content: '请开启摄像头权限，否则无法拍照',
6.  
   confirmText: '去开启',
7.  
   success(res) {
8.  
   if (res.confirm) {
9.  
   wx.openSetting({
10.  
    success(res) {
11.  
    if (res.authSetting["scope.camera"]) {
12.  
    // 重点是这里，再次允许授权后需要刷新一下页面，camera组件才会出来
13.  
    wx.redirectTo({
14.  
    url: '/pages_home/components/takePictures'
15.  
    })
16.  
    } else {
17.  
    wx.navigateBack({
18.  
    delta: 1
19.  
    })
20.  
    }
21.  
    }
22.  
    })
23.  
    } else if (res.cancel) {
24.  
    console.log('用户点击取消')
25.  
    wx.navigateBack({
26.  
    delta: 1
27.  
    })
28.  
    }
29.  
    }
30.  
    })
31.  
     
32.  
    },
33.  
    //添加防抖--提交
34.  
    submitFormFn() {
35.  
    let that = this
36.  
    that.uploadImgFile(this.setData.src, that)
37.  
    },
38.  
    submitForm() {
39.  
    if (this.timeout) {
40.  
    clearTimeout(this.timeout);
41.  
    }
42.  
    this.timeout = setTimeout(this.submitFormFn, 1000);
43.  
    },
44.  
     
45.  
     
46.  
    uploadImgFile(filePath, that) {
47.  
    uni.uploadFile({
48.  
    url: `${process.uniEnv.baseUrl}/baseVinCode/getVinCodeByImg`,
49.  
    filePath: filePath,
50.  
    name: 'file',
51.  
    formData: {
52.  
    file: filePath
53.  
    },
54.  
    header: {
55.  
    'Content-Type': 'multipart/form-data',
56.  
    },
57.  
    success: response => {
58.  
    let res = JSON.parse(response.data.toString("utf8"));
59.  
    const {
60.  
    data,
61.  
    code
62.  
    } = res;
63.  
    if (code == 200) {
64.  
    uni.redirectTo({
65.  
    url: `/pages_home/photoIdentification?imageSrc=${filePath}&vinCode=${data}`
66.  
    });
67.  
    } else {
68.  
    uni.showToast({
69.  
    title: res.msg,
70.  
    duration: 3000
71.  
    });
72.  
    }
73.  
    },
74.  
     
75.  
    complete: () => {
76.  
    uni.hideLoading()
77.  
    }
78.  
     
79.  
    });
80.  
    },
81.  
    takePhoto() {
82.  
    const ctx = wx.createCameraContext()
83.  
    ctx.takePhoto({
84.  
    quality: 'high',
85.  
    success: (res) => {
86.  
    console.log(res, '------42');
87.  
    //res.tempImagePath获取点击拍照后的图片路径 然后赋值给image标签显示图片。点击拍照图片就会存入手机相册
88.  
    this.setData.src = res.tempImagePath
89.  
    }
90.  
    })
91.  
    },
92.  
    takePic() {
93.  
     
94.  
    },
95.  
     
96.  
    takealbum() {
97.  
    this.chooseImage('album')
98.  
    },
99.  
    chooseImage(sourceType) {
100.  
     const that = this
101.  
     uni.chooseImage({
102.  
     count: 1,
103.  
     sizeType: ['original', 'compressed'],
104.  
     sourceType: [sourceType],
105.  
     success: (res) => {
106.  
     if (res.tempFiles[0]['size'] > 20 * 1024 * 1024) {
107.  
     uni.showToast({
108.  
     title: '图片大小不能超过20M',
109.  
     icon: 'none',
110.  
     duration: 3000
111.  
     });
112.  
     return;
113.  
     }
114.  
     uni.showLoading({
115.  
     title: '上传中...'
116.  
     })
117.  
     if (res.tempFiles[0]['size'] < 5 * 1024 * 1024) {
118.  
     that.uploadImgFile(res.tempFilePaths[0], that)
119.  
     } else {
120.  
     uni.compressImage({
121.  
     src: res.tempFilePaths[0],
122.  
     quality: 80,
123.  
     success: res => {
124.  
     that.uploadImgFile(res.tempFilePath, that)
125.  
     }
126.  
     })
127.  
     }
128.  
      
129.  
     }
130.  
     });
131.  
     },
132.  
     }

3）css样式

1.  
   .successBtn {
2.  
   background-color: #05c160;
3.  
   padding: 4rpx 30rpx;
4.  
   color: #fff;
5.  
   height: 80rpx;
6.  
   position: absolute;
7.  
   bottom: 50rpx;
8.  
   right: 50rpx;
9.  
   display: flex;
10.  
    justify-content: center;
11.  
    align-items: center;
12.  
    border-radius: 10rpx;
13.  
    }
14.  
     
15.  
    .yulan-box {
16.  
    position: relative;
17.  
    width: 100%;
18.  
    height: 100%;
19.  
    }
20.  
     
21.  
    image {
22.  
     
23.  
    width: 100%;
24.  
    height: 100vh;
25.  
    }
26.  
     
27.  
    .tackpic {
28.  
    width: 100%;
29.  
    height: 100vh;
30.  
    background-color: #242424;
31.  
     
32.  
    .font-title {
33.  
    position: fixed;
34.  
    top: 3%;
35.  
    background-color: transparent;
36.  
    width: 100%;
37.  
    height: 50rpx;
38.  
    color: #fff;
39.  
    display: flex;
40.  
    align-items: center;
41.  
    justify-content: center;
42.  
    z-index: 999;
43.  
     
44.  
    view {
45.  
     
46.  
    padding: 20rpx 30rpx;
47.  
    border-radius: 10rpx;
48.  
    font-size: 12px;
49.  
    background-color: rgba(0, 0, 0, 0.3);
50.  
    }
51.  
    }
52.  
     
53.  
    .pic-bot.data-v-1c7472ae {
54.  
    width: 100%;
55.  
    height: 240rpx;
56.  
    background-color: #242424 !important;
57.  
    position: relative;
58.  
    }
59.  
    }
60.  
     
61.  
    .pic-bot {
62.  
    width: 100%;
63.  
    display: flex;
64.  
     
65.  
    .left {
66.  
    width: 30%;
67.  
    display: flex;
68.  
    align-items: center;
69.  
    justify-content: center;
70.  
    }
71.  
     
72.  
    .center {
73.  
     
74.  
    width: 40%;
75.  
    padding: 20rpx;
76.  
    display: flex;
77.  
    align-items: center;
78.  
    justify-content: center;
79.  
     
80.  
    .takeout {
81.  
    width: 120rpx;
82.  
    height: 120rpx;
83.  
    border-radius: 50%;
84.  
    background-color: transparent;
85.  
    border: 3px solid #fff;
86.  
    display: flex;
87.  
    align-items: center;
88.  
    justify-content: center;
89.  
    position: absolute;
90.  
    bottom: 120%;
91.  
     
92.  
    .takein {
93.  
    width: 80rpx;
94.  
    height: 80rpx;
95.  
    border-radius: 40rpx;
96.  
    background-color: #fff;
97.  
    }
98.  
    }
99.  
    }
100.  
      
101.  
     .right {
102.  
     width: 30%;
103.  
     }
104.  
     }