Problem description
Use canvas to generate poster, the first time is successful, the second time occasionally render the picture is empty, the third time is directly transparent, the generated picture has Settings long press to save, a transparent picture appears
The solution
Set the dynamic canvasID when you click Generate poster
The canvas-ID on the same page cannot be repeated. If you use a canvas-ID that already exists, the canvas corresponding to this canvas tag will be hidden and will no longer work properly
In the component
<! -- #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 -->Copy the code
Canvas generates poster image component: Set the props parameter, id to mandatory
props: { <! Canvasid: {type: String, require: true}, <! --> posterData: {type: Object, default:{}},}Copy the code
Parent page: Click Generate poster to set the dynamic ID template
<uni-popup ref="share" type="center"> <topic-post-canvas ref="postCanvas" :canvasId="postCanvasId" ></topic-post-canvas> </uni-popup>Copy the code
The data in the
IsShowPostCanvas: false, // Whether to display the poster postCanvasId: 'canvas', // unique and non-repeating shareCardData:{}, // shareCardData - copywriting changes according to sharedata.type posterData: {}, // record parameters when opening the share popupCopy the code
Call 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(); },Copy the code
I failed to generate canvas for the second time because the Canvas ID was set to static