uniapp 如何截取某个view生成新图片

在uniapp中，可以使用uni.createSelectorQuery()获取到某个view的信息，然后使用canvas将其转换为图片。

具体步骤如下：

1. 在需要截取的view上添加一个标识，比如id或class。

2. 在页面中引入canvas组件，并设置canvas的宽高与截取的view相同。

<canvas id="myCanvas" canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>

3. 在页面的js文件中，使用uni.createSelectorQuery()获取到需要截取的view的信息。

uni.createSelectorQuery().select('#viewToCapture').boundingClientRect(function(rect) {
    // 获取到view的信息后，可以将其转换为图片
}).exec();

4. 在boundingClientRect()回调函数中，使用canvas将view转换为图片。

// 获取到canvas对象
const ctx = uni.createCanvasContext('myCanvas', this);

// 将view绘制到canvas上
ctx.draw(true, () => {
    // 将canvas转换为图片
    uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
            console.log(res.tempFilePath);
        }
    }, this);
});

5. 最后，可以在success回调函数中拿到生成的图片路径，进一步处理或展示。

完整代码如下：

<template>
    <view id="viewToCapture">
        截取这个view生成新图片
    </view>
    <canvas id="myCanvas" canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>
</template>

<script>
    export default {
        methods: {
            captureView() {
                uni.createSelectorQuery().select('#viewToCapture').boundingClientRect(function(rect) {
                    const ctx = uni.createCanvasContext('myCanvas', this);

                    ctx.drawImage(rect.left, rect.top, rect.width, rect.height, 0, 0, rect.width, rect.height);

                    ctx.draw(true, () => {
                        uni.canvasToTempFilePath({
                            canvasId: 'myCanvas',
                            success: (res) => {
                                console.log(res.tempFilePath);
                            }
                        }, this);
                    });
                }).exec();
            }
        }
    }
</script>