微信camera拍照组件的使用（uniapp小程序）代码可直接复制看效果

微信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 = 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样式文章来源地址https://www.toymoban.com/news/detail-561925.html

.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%;
        }
    }