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

4***@qq.com (作者)

鸿蒙4.2.0版本的，目前华为mate系列的旗舰机好像好像都有这个问题，机型我这边没有这么多，同类型的小程序用这些机型都有这个问题

2025-01-10 17:06

4***@qq.com (作者)

这边是我测试的源码，你们这边可以用mate机型尝试一下

<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 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>

2025-01-10 17:26