uni-app中uni.createCameraContext相机组件，在华为mate中成像放大

uni-app中uni.createCameraContext相机组件，在华为mate中成像放大

产品分类

uniapp/小程序/微信

开发环境信息

示例代码

<template>
<view class="out-page">
<camera device-position="front" flash="off" @error="error" class="vid" v-if="vieShow">
</camera>
<cover-image src="../../static/front-camera.png" class="bj"></cover-image>
<cover-image src="../../static/camera-tips.png" class="bj-tit"></cover-image>
<view class="btn" v-if="vieShow">
<view>倒计时</view>
<view @click="takePhoto">拍照</view>
<view>翻转</view>
</view>  
</view>
<view class="blick-bj" v-else>  
    <view>加载中请稍后</view>  
</view>  

</view>
</template>

<script setup>
import {
ref,
onMounted
} from "vue";
let vieShow = ref(false)
let src = ref('')

onMounted(() => {  
    setTimeout(() => {  
        vieShow.value = true  
        console.log('初始化')  
    }, 1000)  
})  

let takePhoto = () => {  

    let ctx = uni.createCameraContext();  
    console.log('实例', ctx)  
    ctx.takePhoto({  
        quality: 'high',  
        success: (res) => {  
            console.log('画面信息', res)  
            let src = res.tempImagePath //获取到的画面信息  
            uni.navigateTo({  
                url: `/pages/lookPhoto/lookPhoto?src=${src}`  
            })  
        },  
        fail: (err) => {  
            console.log('出错了', err)  
        }  
    });  
}
</script>

<style lang="scss">
.out-page {
width: 100%;
height: 100vh;  

    .blick-bj {  
        width: 100%;  
        height: 100vh;  
        background-color: #000000;  
        color: #ffffff;  
        display: flex;  
        align-items: center;  
        justify-content: center;  
        font-size: 20px;  
        font-weight: bold;  
    }  

    .vid {  
        width: 100%;  
        // height: calc(100vh - 400rpx);  
        height: 300px;  
    }  

    .bj {  
        width: 100%;  
        height: calc(100vh - 400rpx);  
        position: fixed;  
        top: 0;  
        left: 0;  
    }  

    .bj-tit {  
        width: 300px;  
        height: 58px;  
        position: fixed;  
        top: 100px;  
        left: 50%;  
        transform: translateX(-50%);  
    }  

    .btn {  
        width: 100%;  
        height: 400rpx;  
        color: #ffffff;  
        background-color: #000000;  
        padding: 60rpx 0;  
        box-sizing: border-box;  
        position: fixed;  
        left: 0;  
        bottom: 0;  
        display: flex;  
        align-items: center;  
        justify-content: space-evenly;  
    }  
}
</style>

操作步骤

进入这个页面调起相机组件，它的成像其他手机没有问题，华为mate系列，成像就会很大，但是在成像页面熄屏再打开，成像就会正常。之后再重新进到这个页面，成像又是大的。

预期结果

成像正常

实际结果

成像过大

bug描述

uni.createCameraContext，为什么在华为mate微信小程序上，成像的大小不同？ 其他手机调用这个是正常的，华为mate调用这个成像就会变大，但是熄屏重新打开成像又变成正常的了。