uniapp 使用canvas 画海报，有手粘贴即可用

html部分

<view  @click="doposter">下载海报</view>
<canvas canvas-id="myCanvas" type='2d' style="width: 370px; height: 550px;opcity:0;position: fixed;z-index:-1;" id="myCanvas" />

js 部分

 drawBackground() {
   
                const canvasId   = 'myCanvas'
                const ctx        = uni.createCanvasContext(canvasId, this)
                const title      = this.title
                const goodsCover = this.selcetShareImgUrl // 分享商品图片 需要换成自己的产品图片
                const goodsTitle = this.goods.name // 商品名称
                const goodsPrice = '￥ '+this.goods.original_price
                const des1       = '① 长按识别二维码'
                const des2       = '② 查看商品详情'
                const qrcode     = this.goods.share.code //二维码地址 需要换成自己的二维码
                
                //  绘制背景图
                ctx.setFillStyle('#fff')
                ctx.fillRect(0, 0, 370, 550)
                
                // 字体颜色
                ctx.setFontSize(17)
                ctx.setFillStyle('#111')
                ctx.fillText(title, 50, 39.9)
                ctx.fillText(title, 49.9, 40)
                ctx.fillText(title, 50,40)
                ctx.fillText(title, 50, 40.1)
                ctx.fillText(title, 50.1, 40.1)
                
                
                 // 商品名称 且拦截页面文字长度
                 let titleGoods = this.goods.name.split('').length <= 20 ? this.goods.name : this.goods.name.substring(0,18)+' ...'
                 ctx.setFontSize(16)
                 ctx.setFillStyle('#111')
                 ctx.fillText(titleGoods , 30 , 420)
                 
                 // 商品价格
                 ctx.setFontSize(18)
                 ctx.setFillStyle('#f36d00')
                 ctx.fillText(goodsPrice, 29.9, 450)
                 ctx.fillText(goodsPrice, 30,450)
                 ctx.fillText(goodsPrice, 30, 450.1)
                 ctx.fillText(goodsPrice, 30.1, 450)
                
                //  二维码描述
                ctx.setFontSize(13)
                ctx.setFillStyle('#999')
                ctx.fillText(des1, 30, 490)
                
                ctx.setFontSize(13)
                ctx.setFillStyle('#999')
                ctx.fillText(des2, 30, 520)
                
                uni.downloadFile({
   
                    url:goodsCover,
                    success: (res) => {
   
                        // 商品图片
                        ctx.drawImage(res.tempFilePath, 30, 70, 310, 310)
                        //  二维码
                        ctx.drawImage(qrcode, 240, 420, 110, 110)
                        ctx.draw(false, () => {
   
                            uni.canvasToTempFilePath({
   
                                 canvasId: canvasId,
                                success: (res) => {
   
                                    console.log('临时图片路径：', res.tempFilePath);
                                        uni.saveImageToPhotosAlbum({
   
                                            filePath: res.tempFilePath,
                                            success: () => {
   
                                                uni.hideLoading()
                                                uni.showModal({
   
                                                    title: '提示',
                                                    content: ' 图片保存成功',
                                                    showCancel: false,
                                                    confirmText: '知道了',
                                                    confirmColor: '#f36d00',
                                                    success: res => {
   
                                                        uni.navigateBack()
                                                    }
                                                })
                                            }
                                    })
                                },
                                fail: (error) => {
   
                                    console.error('转化图片失败：', error);
                                }
                            },this)
                         });
                    }
                })
            },
            
            async doposter() {
   
                uni.showLoading({
   
                    title: '正在生成海报'
                });
                await this.drawBackground();
            },