关于 uniapp - 微信小程序 canvas生成海报 第一次成功，第二次就透明（黑色） 解决方案

问题描述

使用canvas生成海报，第一次成功，第二次偶尔渲染图片为空，第三次直接全为透明, 生成后的图片有设置长按保存，出现的是一张透明的图片

解决方案

点击生成海报时，设置动态的canvasID

官方文档说明 tip：同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作

组件中

<!-- #ifdef MP-WEIXIN -->
<canvas :id="canvasId" type="2d" :style="{ width: '614rpx', height: canvasHeight + 'rpx' }" mode="widthFit" />
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<canvas :canvas-id="canvasId" :id="canvasId" :style="{ width: '614rpx', height: canvasHeight + 'rpx' }" />
<!-- #endif -->

canvas生成海报图片组件： 设置props参数，id为必传

    props: {
        <!--  必传 canvasid 且唯一 -->
        canvasId: {
            type: String,
            require: true 
        },
        <!-- 生成海报所需参数 -->
        posterData: {
            type: Object,
            default:{}
        },
    }

父级页面: 点击生成海报，则设置动态ID
template中

<uni-popup ref="share" type="center">
    <topic-post-canvas ref="postCanvas" :canvasId="postCanvasId" ></topic-post-canvas>
</uni-popup>

data 中

    // 分享参数
    isShowPostCanvas: false, // 是否显示海报
    postCanvasId: 'canvas', // 唯一且不重复
    shareCardData:{}, // 分享卡片的数据 - 文案根据shareData.type来改变
    posterData: {}, // 打开分享弹窗时，记录的参数

调用的methods中

    // 打开帖子分享弹窗
    openShare: function(e){
        console.log('share',e)
        // 动态设置canvasID
        let timeStamp =  Date.parse(new Date());
        this.postCanvasId =  this.postCanvasId + timeStamp;
        // 设置分享数据
        this.shareData = e;
        this.openSharePopup();
    },

本人因canvas id 设置为静态，才第二次生成 失败