【急急急】APP下NVUE使用liver-pusher预览和快照的图片不一致

示例代码：

<template> <!-- <view class="container"> --> <live-pusher :id="livePusherId" ref="livePusher" class="live-pusher" :url="config.url" :mode="config.quality" muted="config.isMute" :enable-camera="true" :auto-focus="config.autoFocus" :beauty="config.beauty"

whiteness="config.white" :aspect="config.ratio" :device-position="config.camera" @statechange="statechange"> </live-pusher>
<!-- </view> -->

<view class="overlay">
<!-- 顶部遮罩 -->
<view class="mask top" :style="{
position: 'absolute',
top: '0px',
left: '0px',
height: highlightTop + 'px',
width: systemInfo.screenWidth + 'px',
backgroundColor: 'rgba(0,0,0,0.7)'
}">
</view>

<!-- 底部遮罩 -->  
<view class="mask bottom" :style="{   
    position: 'absolute',   
    top: highlightTop +highlightHeight+ 'px',   
    left: '0px',    
    height: bottomMaskHeight + 'px',   
    width:  systemInfo.screenWidth + 'px',  
    backgroundColor: 'rgba(0,0,0,0.7)'   
}">  
</view>  

<!-- 左侧遮罩 -->  
<view class="mask left" :style="{   
    position: 'absolute',   
    top: leftMaskTop + 'px',   
    left: '0px',   
    width: leftMaskWidth + 'px',   
    height: highlightHeight + 'px',   
    backgroundColor: 'rgba(0,0,0,0.7)'   
}">  
</view>  

<!-- 右侧遮罩 -->  
<view class="mask right" :style="{   
     position: 'absolute',   
     top: leftMaskTop + 'px',   
     left: (highlightLeft + highlightWidth) + 'px',   
     width: leftMaskWidth + 'px',   
     height: highlightHeight + 'px',   
     backgroundColor: 'rgba(0,0,0,0.7)'   
 }">  
</view>  

<!-- 高亮边框 -->  
<view class="highlight-frame" :style="{   
    position: 'absolute',   
    top: highlightTop + 'px',   
    left: highlightLeft + 'px',   
    width: highlightWidth + 'px',   
    height: highlightHeight + 'px',   
    border: '2px solid #008CFF'   
}">  
    <view class="scan-line" :style="{   
        position: 'absolute',   
        top: scanTop + 'px',   
        left: '0px',   
        right: '0px',   
        height: '2px',   
        backgroundColor: '#008CFF'   
    }">  
    </view>  
    <view class="corner tl"></view>  
    <view class="corner tr"></view>  
    <view class="corner bl"></view>  
    <view class="corner br"></view>  
</view>  
<text class="tip-text" :style="{top: (highlightTop + highlightHeight + 10)+'px'}">{{tipText}}</text>  

</view>

</template>

<script setup>
import {
onLoad,
onUnload,
onHide
} from "@dcloudio/uni-app";
import {
ref,
getCurrentInstance,
nextTick,
onMounted
} from "vue";

import {  
    useDetectionStore  
} from '../../store/modules/detection'  

const userDetectionStore = useDetectionStore()  

const systemInfo = uni.getSystemInfoSync();  

const pusherComponentSize = ref({ width: 0, height: 0 });

// 获取当前设备宽、高  
const screen = {  
    width: 375,  
    height: 667,  
}  
// 动态计算遮罩层的宽高和位置  
const bottomMaskHeight = ref(0);  
const leftMaskWidth = ref(0);  
const highlightWidth = ref(0);  
const highlightHeight = ref(0);  
const highlightTop = ref(0);  
const highlightLeft = ref(0);  
const leftMaskTop = ref(0);  

// livePusher相关申明  
const livePusherId = ref(null);  
const livePusher = ref(null);  
const livePusherContext = ref(null);  

// livePusher 配置  
const config = ref({  
    url: '',  
    quality: 'SD',  
    ratio: '9:16',  
    isMute: false,  
    autoFocus: true,  
    beauty: 0,  
    white: 0,  
    camera: 'back'  
})  
// 添加扫描线位置变量  
const scanTop = ref(0);  
// 扫描线定时器  
let scanTimer = null;  
// 定时拍摄  
let shotTimer = null;  
// 文本提示  
const tipText = ref('');  

// 切换预览状态  
const togglePreview = (target) => {  

    if (!livePusherContext.value) {  

        return;  
    }  

    if (target === 'stop') {  
        // 停止预览  
        livePusherContext.value.stopPreview({  
            success: () => {  

            },  
            fail: (err) => {  
                uni.showModal({  
                    title: '停止预览失败',  
                    content: err.message || err.errMsg,  
                    showCancel: false  
                });  
            }  
        });  
    }  

    if (target === 'start') {  
        // 开始预览  
        livePusherContext.value.startPreview({  
            success: () => {  
                startScanAnimation();  
            },  
            fail: (err) => {  
                uni.showModal({  
                    title: '预览开启失败',  
                    content: err.message || err.errMsg,  
                    showCancel: false  
                });  
            }  
        });  
    }  
}  

// 扫描线动画  
const startScanAnimation = () => {  
    stopScanAnimation();  
    let top = 0;  
    const frameHeight = systemInfo.windowHeight * 0.5; // 高亮框高度为窗口的50%  
    scanTimer = setInterval(() => {  
        top += 2;  
        if (top > frameHeight) {  
            top = 0;  
        }  
        scanTop.value = top;  
    }, 30);  
}  

// 将快照发送给服务器  
const takeScreenshot = async () => {  
    return new Promise((resolve, reject) => {  
        livePusherContext.value.snapshot({  
            success: async (res) => {  

           // 1. 获取快照图片的真实尺寸 (图片坐标系)  
                const imageInfo = await uni.getImageInfo({ src: res.message.tempImagePath });  
                const { width: imgWidth, height: imgHeight } = imageInfo;  
                console.log('--- [Step 1] 快照图片尺寸 (px):', { imgWidth, imgHeight });  

                // 2. 获取屏幕/组件的尺寸 (屏幕坐标系)  
                const { screenWidth, windowHeight } = systemInfo;  
                console.log('--- [Step 2] 预览窗口尺寸 (px):', { screenWidth, windowHeight });  

                // 3. 【核心】基于“宽度填满，上下裁剪”的模型进行计算  
                // a. 计算视频流在屏幕上的缩放比例  
                const scale = screenWidth / imgWidth;  
                console.log('--- [Step 3a] 缩放比例 (screen/img):', scale);  

                // b. 计算视频流按此比例缩放后，在屏幕上的总高度  
                const scaledImgHeight = imgHeight * scale;  
                console.log('--- [Step 3b] 缩放后的视频高度 (px):', scaledImgHeight);  

                // c. 计算视频流顶部被裁剪掉的高度 (换算回图片坐标系)  
                // 这就是“图片偏下”的根本原因  
                const offsetY_img = (scaledImgHeight - windowHeight) / 2 / scale;  
                console.log('--- [Step 3c] 图片顶部被裁剪的高度 (px):', offsetY_img);  

                // 4. 【核心】坐标转换  
                const boxX_screen = highlightLeft.value;  
                const boxY_screen = highlightTop.value;  
                const boxW_screen = highlightWidth.value;  
                const boxH_screen = highlightHeight.value;  
                console.log('--- [Step 4] 高亮框屏幕坐标 (px):', { boxX_screen, boxY_screen, boxW_screen, boxH_screen });  

                const cropData = {  
                    // X坐标没有偏移，直接按比例缩放  
                    crop_x: Math.round(boxX_screen / scale),  
                    // Y坐标需要加上被裁剪掉的顶部偏移量  
                    crop_y: Math.round(boxY_screen / scale + offsetY_img),  
                    crop_width: Math.round(boxW_screen / scale),  
                    crop_height: Math.round(boxH_screen / scale),  
                };  

                console.log('--- [Step 5] 最终发送给后端的裁剪数据:', cropData);  

                const resData = await userDetectionStore.uploadDetecionImg(res.message  
                    .tempImagePath);  
                if (resData?.code === 200) {  
                    uni.redirectTo({  
                        url: '/pages/data/detailsData'  
                    });  
                } else {  
                    tipText.value = resData?.msg;  
                }  
            },  
            fail: (err) => {  
                reject(err.message || err.errMsg);  
            }  
        });  
    });  
};  

const autoCaptureProcess = async () => {  
    const imgPath = await takeScreenshot();  
};  

// 快照  
const takeSnapshot = () => {  
    shotTimer = setInterval(takeScreenshot, 1000);  
}  

// livePusher状态改变  
const statechange = (e) => {  
    const errCode = e.detail.code || e.detail.errCode;  
    const errMsg = e.detail.message || e.detail.errMsg;  

    if (errCode == 1007) {  
        takeSnapshot();  
    }  
}  

// 初始化  
const createLivePusher = () => {  
    livePusherId.value = `livePusher_${Date.now()}`;  

    if (livePusherContext.value) {  
        livePusherContext.value = null;  
    };  

    // 动态计算遮罩层的宽高和位置  
    const screenWidth = systemInfo.screenWidth;  
    const screenHeight = systemInfo.screenHeight;  

    console.log(" screenWidth " + screenWidth);  
    console.log(" screenHeight " + screenHeight);  

    // 高亮框的宽高和位置  
    highlightWidth.value = screenWidth * 0.3; // 占屏幕宽度的45%  
    highlightHeight.value = screenHeight * 0.4; // 占屏幕高度的50%  
    highlightTop.value = screenHeight * 0.3; // 距离顶部25%  
    highlightLeft.value = screenWidth * 0.35; // 距离左侧30%  

    // console.log(" screenWidth " + screenWidth);  
    // console.log(" screenHeight " + screenHeight);  
    // console.log(" highlightWidth " + highlightWidth.value);  
    // console.log(" highlightHeight " + highlightHeight.value);  
    // console.log(" highlightTop " + highlightTop.value);  
    // console.log(" highlightLeft " + highlightLeft.value);  

    // 底部遮罩：高度 = 屏幕总高度 - 高亮区域顶部 - 高亮区域高度  
    bottomMaskHeight.value = screenHeight - highlightTop.value - highlightHeight.value;  

    // 左侧遮罩：宽度 = 高亮区域左侧位置  
    leftMaskWidth.value = highlightLeft.value;  
    // 左侧遮罩层的顶部位置与高亮区域顶部对齐  
    leftMaskTop.value = highlightTop.value;  

    nextTick(() => {  
        const currentPage = getCurrentPages()[getCurrentPages().length - 1];  
        livePusherContext.value = uni.createLivePusherContext(livePusherId.value, currentPage.$vm);  
        console.log('Live-pusher 组件尺寸:', JSON.stringify(livePusherContext.value))  
        // const query = uni.createSelectorQuery().in(currentPage);  
        // query.select('.live-pusher').boundingClientRect(data => {  
        //     if (data) {  
        //         pusherComponentSize.value = { width: data.width, height: data.height };  
        //         console.log('Live-pusher 组件尺寸:', pusherComponentSize.value);  
        //     }  
        // }).exec();  

        setTimeout(togglePreview.bind(null, 'start'), 100)  

    })  
}  

// 停止扫描线动画  
const stopScanAnimation = () => {  
    if (scanTimer) {  
        clearInterval(scanTimer);  
    }  
    scanTimer = null;  
}  

// 停止定时快照  
const stopAutoCapture = () => {  
    if (shotTimer) {  
        clearInterval(shotTimer)  
    }  
    shotTimer = null  
}  

onUnload(() => {  
    stopScanAnimation();  
    stopAutoCapture();  
});  

onHide(() => {  
    stopScanAnimation();  
    stopAutoCapture();  
});  

onLoad(() => {  
    createLivePusher();  
});  

</script>

<style scoped>
.container {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
background: rgba(0, 0, 0, 0.700);
}

/* 推流容器：占满根容器（确保画面全屏） */  
.live-pusher {  
    display: flex;  
    flex-direction: column;  
    flex: 1;  
    background: rgba(0, 0, 0, 0.700);  
}  

/* 截图预览：保持原有 */  
.snapshot-preview {  
    position: fixed;  
    right: 20px;  
    top: 100px;  
    z-index: 1000;  
}  

.snapshot-preview-image {  
    width: 100%;  
    height: auto;  
}  

.overlay {  
    position: absolute;  
    top: 0;  
    left: 0;  
    pointer-events: none;  
    z-index: 9999;  
    flex: 0  
}  

/* 半透明遮罩 */  
.mask {  
    position: absolute;  
    background: rgba(0, 0, 0, 0.700);  
}  

/* 高亮边框 */  
.highlight-frame {  
    position: absolute;  
    border: 2px solid #008CFF;  
    overflow: hidden;  
    position: relative;  
    box-shadow: 0 0 15px rgba(39, 89, 255, 0.5);  
}  

/* 四角装饰 */  
.corner {  
    position: absolute;  
    width: 20px;  
    height: 20px;  
    border-style: solid;  
    border-color: #008CFF;  
    z-index: 2;  
}  

.tl {  
    /* 左上角 */  
    top: -2px;  
    left: -2px;  
    border-width: 2px 0 0 2px;  
}  

.tr {  
    /* 右上角 */  
    top: -2px;  
    right: -2px;  
    border-width: 2px 2px 0 0;  
}  

.bl {  
    /* 左下角 */  
    bottom: -2px;  
    left: -2px;  
    border-width: 0 0 2px 2px;  
}  

.br {  
    /* 右下角 */  
    bottom: -2px;  
    right: -2px;  
    border-width: 0 2px 2px 0;  
}  

.tip-text {  
    color: #EBEFFA;  
    font-size: 14px;  
    text-align: center;  
    position: absolute;  
    align-items: center;  
    word-wrap: break-word;  
    lines: 2;  
    width: 750rpx;  
    left: 0;  
}  

</style>

操作步骤：

复现步骤参考代码，预览时物品在高亮框中，快照后将图片发送给后端，后端再用前端高亮框的裁剪比例裁剪图片此时物品不在高亮框中。

预期结果：

预览和快照图片需一致

实际结果：

预览和快照图片不一致