uniapp 使用canvas 画海报，有手粘贴即可用
html部分
<view ="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();
},