uniapp自定义相机

1.我们使用uniapp自带的camera来创建一个画布
<view class="camera-container">
        <camera :device-position="cameraPosition" flash="off" :show-button="false" @error="handleCameraError"
            style="height: 82vh;"></camera>
        <text class="wz">请将你要识别的植物置于镜头范围内</text>
        <view class="zujbox">
            <view class="xc" @click="uploadPictrue">相册</view>
            <view class="pz" @click="photo">
                <image src="../../../static/djpz.png"></image>
            </view>
            <view class="qieh" @click="switchCamera">
                <image src="../../../static/xj.png" mode=""></image>
            </view>
        </view>
    </view>

以下是js代码 赋值粘贴即可

<script>
    import {
        uploadAvatar
    } from "@/api/system/user"
    import {
        getToken
    } from '@/utils/auth'
    import {
        getplant
    } from '@/api/login.js'
    import config from '@/config'
    const baseUrl = config.baseUrl

//这一部分是我的封装请求 你可以引入自己的封装请求

    export default {
        data() {
            return {
                cameraPosition: 'back', // 初始摄像头位置为后置
                src: "",
                photoUrl: "",
                tempFilePathpic: '',
                zwlist: [],
                token: '',
            }
        },
        methods: {
            photo() {
                let that = this
                const cameraContext = uni.createCameraContext();
                cameraContext.takePhoto({
                    quality: 'high',
                    success: (res) => {
                        console.log(res);
                        const tempFilePath = res.tempImagePath;
                        that.tempFilePathpic = res.tempImagePath
                        // console.log(tempFilePath);
                        // 可以在这里处理拍照后的逻辑，比如显示图片预览或保存图片  
                        uni.uploadFile({
                            url: baseUrl + "/common/upload", // 上传图片的接口地址
                            filePath: tempFilePath, //所要上传的图片地址
                            name: 'file', //所要上传的文件类型
                            header: {
                                accept: 'application/json'
                            },
                            success: (res) => { //成功的回调函数
                                // let fileName = JSON.parse(res.data).fileName;
                                let urlpic = baseUrl + JSON.parse(res.data).fileName;
                                let url = encodeURIComponent(urlpic) //进行转码
                                // 识别植物的请求参数
                                getplant(url).then(res => {
                                    // console.log(res.msg)
                                    that.zwlist = res.data
                                    // 跳转到植物列表
                                    uni.navigateTo({
                                        url: '/pages/identify/listing?list=' + JSON
                                            .stringify(that.zwlist) + '&cart=' +
                                            JSON
                                            .stringify(that.tempFilePathpic)
                                    })
                                })
                            }
                        })
                    }
                });
            },
            handleCameraError(e) {
                console.error('相机出错：', e.detail);
                // 处理相机错误情况  
            },
            switchCamera() {
                this.cameraPosition = this.cameraPosition == 'back' ? 'front' : 'back'; // 切换摄像头位置  
                console.log(this.cameraPosition)
            },

            uploadPictrue() {
                console.log(11);
                let that = this
                // 从相册选择1张图
                uni.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album'],
                    success: function(res) {
                        // 获取上传的图片路径
                        const tempFilePath = res.tempFiles[0].path
                        that.tempFilePathpic = res.tempFiles[0].path
                        uni.uploadFile({
                            url: baseUrl + "/common/upload", // 上传图片的接口地址
                            filePath: tempFilePath, //所要上传的图片地址
                            name: 'file', //所要上传的文件类型
                            header: {
                                accept: 'application/json'
                            },
                            success: (res) => {
                                console.log(res);
                                let urlpic = baseUrl + JSON.parse(res.data).fileName
                                let url = encodeURIComponent(urlpic) //get请求 图片链接拼接到请求链接后面 将图片进行转码
                                // console.log(url)
                                getplant(url).then(res => {
                                    that.zwlist = res.data
                                    // console.log(that.zwlist,'zwlist');
                                    // 请求成功后带着参数跳转到植物列表
                                    uni.navigateTo({
                                        url: '/pages/identify/listing?list=' + JSON
                                            .stringify(that.zwlist) + '&cart=' +
                                            JSON.stringify(that.tempFilePathpic)
                                    })
                                })
                            }
                        })
                    }
                })
            },
        }
    };
</script>

<style lang="scss">
    .xc {
        margin-top: 20rpx;
        width: 102rpx;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
        background-color: #00BAAD;
        border-radius: 10rpx;
        color: #fff;
        padding: 0 20rpx;
        box-sizing: border-box;
        font-size: 28rpx;
    }

    .zujbox {
        margin-top: 30rpx;
        display: flex;
        justify-content: space-between;
        padding: 0 92rpx;
        box-sizing: border-box;
    }

    .pz {
        image {
            width: 110rpx;
            height: 110rpx;
        }
    }

    .qieh {
        margin-top: 20rpx;

        image {
            width: 72rpx;
            height: 60rpx;
        }
    }

    .wz {
        display: block;
        margin-top: 20rpx;
        width: 100%;
        text-align: center;
        color: #999;
    }

    .camera-container {
        position: fixed;
        width: 100%;
        height: 100vh;
        /* 设置相机预览区域的高度 */
        overflow: hidden;
    }
</style>

最后呈现的效果图为下