4***@qq.com
4***@qq.com
  • 发布:2025-01-07 11:50
  • 更新:2025-01-07 11:50
  • 阅读:16

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

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 版本 23H2(OS 内部版本 22631.4602)

HBuilderX类型: 正式

HBuilderX版本号: 3.99

第三方开发者工具版本号: 1.06.2308310

基础库版本号: 3.7.3

项目创建方式: HBuilderX

示例代码:

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

操作步骤:

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

预期结果:

成像正常

实际结果:

成像过大

bug描述:

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

2025-01-07 11:50 负责人:无 分享
已邀请:

要回复问题请先登录注册