uniapp APP端 DOM生成图片保存到相册

<template>
    <view class="container" style="padding-bottom: 30rpx;">
        <view class="hdbg pr w100 " style="height: 150rpx;">
            <top-bar content='分享' @Back="Back"></top-bar>
        </view>
        <view id="capture" class="page-body">
            <view class="fx">
                <image :src="list.image_base" mode="" crossorigin="anonymous"></image>
            </view>
            <view class="cred-arr">
                <view class="cred">
                    <view class="erweim">
                        <image :src="list.qrcode" mode=""></image>
                    </view>
                    <!-- <view class="fs28 smwb smt">扫码下载APP</view> -->
                </view>
            </view>
        </view>
        <view class="page-foot flex justify-center pt30">
            <view class="butten_left mr30" @click="generateImage">分享海报</view>
            <view class="butten_right" @click="onshare">分享链接</view>
        </view>
        <canvas canvas-id="shareCanvas"
            style="width: 750rpx; height: 1334rpx; position: fixed; left: -9999rpx;"></canvas>
    </view>
</template>

<script>
    import html2canvas from 'html2canvas';
    export default {
        data() {
            return {
                list: {},
                canvasWidth: 355,
                canvasHeight: 600

            }
        },
        onLoad() {
            this.getlist()
            
        },
        methods: {
            Back() {
                uni.navigateBack()
            },
            getlist() {
                this.https('xxxxxxx', 'Post').then((res) => {
                    console.log(res)
                    this.list = res
                })
            },
            onshare() {
                uni.setClipboardData({
                    data: this.list.url,
                    success: function() {
                        uni.showToast({
                            title: '复制链接成功',
                            icon: 'none',
                            duration: 2000
                        });
                    },
                    fail: function() {
                        console.log('复制失败');
                    }
                });
            },
            async generateImage() {

                // #ifdef APP
                const ctx = uni.createCanvasContext('shareCanvas', this);

                // 绘制背景
                ctx.save();
                ctx.drawImage(this.list.image_base, 0, 0, this.canvasWidth, this.canvasHeight);
                ctx.restore();

                // 绘制二维码
                ctx.save();
                const qrCodeSize = 160;
                const qrCodeX = (this.canvasWidth - qrCodeSize) / 2;
                const qrCodeY = this.canvasHeight - 240;
                ctx.drawImage(this.list.qrcode, qrCodeX, qrCodeY, qrCodeSize, qrCodeSize);
                ctx.restore();

                

                // 绘制完成
                ctx.draw(false, () => {
                    // 将canvas转换为图片
                    uni.canvasToTempFilePath({
                        canvasId: 'shareCanvas',
                        success: (res) => {
                            // 保存图片到相册
                            uni.saveImageToPhotosAlbum({
                                filePath: res.tempFilePath,
                                success: () => {
                                    uni.showToast({
                                        title: '保存成功',
                                        icon: 'success'
                                    });
                                },
                                fail: () => {
                                    uni.showToast({
                                        title: '保存失败',
                                        icon: 'none'
                                    });
                                }
                            });
                        },
                        fail: (err) => {
                            console.log('生成图片失败', err);
                            uni.showToast({
                                title: '生成图片失败',
                                icon: 'none'
                            });
                        }
                    }, this);
                });

                // #endif
                // #ifndef APP
                const element = document.getElementById('capture')
                                console.log(element)
                                
                                
                                html2canvas(element).then((canvas) => {
                                    console.log(canvas)
                                    const imagedata = canvas.toDataURL('image/png')
                                    const link = document.createElement('a');
                                    link.href = imagedata;
                                    link.download = 'filename.png'; // 设置下载文件名
                                    link.click(); // 触发下载
                                    uni.showToast({
                                        title: '下载海报成功',
                                        icon: 'none',
                                        duration: 2000
                                    });
                
                                })
                
                // #endif
            }
        }
    }
</script>
<style>
    .container {
        width: 100%;
        min-height: 100vh;
        background-color: #f5f5f5;
    }

    .page-body {
        width: 100%;
        padding: 30rpx;
        box-sizing: border-box;
        position: relative;
    }

    .fx {
        width: 100%;
        margin-bottom: 30rpx;
    }

    .fx image {
        width: 100%;
        height: 1226rpx;
    }

    .cred-arr {
        width: calc(100% - 60rpx);
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 260rpx;
    }

    .cred {
        text-align: center;
    }

    .erweim {
        width: 300rpx;
        height: 300rpx;
        margin: 0 auto;
    }

    .erweim image {
        width: 100%;
        height: 100%;
    }

    .page-foot {
        width: 100%;
        height: 158rpx;
        background-color: #fff;
        box-shadow: 0rpx 2rpx 14rpx 6rpx rgba(0,0,0,0.08);
        margin-top: 30rpx;
    }

    .butten_left,
    .butten_right {
        width: 300rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 40rpx;
        font-size: 28rpx;
    }

    .butten_left {
        background-color: #ff6b6b;
        color: #fff;
    }

    .butten_right {
        background-color: #4CAF50;
        color: #fff;
    }
</style>