开发过程中需要根据商品信息生成海报，供用户下载海报 、分享海报等

效果：

1.首先搭建页面结构：

  <!-- 按钮结构 --><view class="share flex"><u-icon name="scan" size="20" @click="drawPic"></u-icon><u-icon name="share" size="20" @click="shareWeixin"></u-icon>分享</view><!-- 海报画布 --><view class="canvasBox" v-if="showPoster"><text class="close" @click="showPoster = false">x</text><canvas style="width: 220px;height: 340px;" class="canvas" canvas-id="mycanvas"></canvas><view class="btmBox"><view class="item"><u-icon name="weixin-fill"></u-icon><view style="font-size:12px" @click="shareImg">分享好友</view></view><view class="item"><u-icon name="coupon"></u-icon><view style="font-size:12px" @click="saveImage">保存海报</view></view></view></view>

2.js控制用户点击二维码按钮后，弹出dialog展示海报内容：

  methods: {//绘制海报drawPic() {this.showPoster = trueuni.showLoading({title: '正在生成海报'})let myCanvas = uni.createCanvasContext('mycanvas', this)// 封面标题myCanvas.font = '12px Arial'myCanvas.fillText('鹏程监测 APT', 110, 30)// 封面图myCanvas.drawImage(this.imgList[1], 30, 40, 170, 170)// 价格myCanvas.font = ` 14px Arial`myCanvas.fillStyle = 'blue'myCanvas.fillText('￥ 150', 30, 220)myCanvas.font = `10px Arial`myCanvas.fillStyle = '#9C9C9C'myCanvas.fillText('原价:￥0.00', 80, 220)myCanvas.font = `14px Arial`myCanvas.fillStyle = '#000'myCanvas.fillText('外观监测', 30, 240)// 分享码myCanvas.drawImage(this.imgList[1], 150, 280, 50, 50)//长按识别购买myCanvas.font = '10px Arial'myCanvas.fillStyle = '#9C9C9C'myCanvas.fillText('长按识别或保存图片', 30, 310)//开始绘画，必须调用这一步，才会把之前的一些操作实施myCanvas.draw(false, res => {uni.canvasToTempFilePath({canvasId: 'mycanvas',success: res => {console.log(res, 'draw')uni.hideLoading()this.poster = res.tempFilePaththis.showPoster = true},fail: err => {console.log(err, 'fail')uni.hideLoading()uni.showToast({title: '名片加载失败',duration: 2000})}})})},//点击保存saveImage() {var _this = thisuni.showLoading({title: '正在生成图片...'})uni.saveImageToPhotosAlbum({filePath: _this.poster,success(res) {console.log(res, 'downlaod')uni.hideLoading()uni.showModal({title: '保存成功',content: '图片已成功保存到相册，快去分享到您的圈子吧',showCancel: false})}})},// 分享--展示大图shareImg() {uni.previewImage({current: 0,urls: [this.poster]})},// 分享到微信好友shareWeixin() {const _that = thisuni.showLoading({title: '努力加载中...'})uni.share({provider: 'weixin',scene: 'WXSceneSession', //分享到聊天界面type: 5, //分享为小程序imageUrl: _that.poster, //png地址title: '',miniProgram: {//type为5必选id: '', //微信小程序原始idpath: '', //点击链接进入的页面type: 0, //微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。webUrl: '' //兼容低版本的网页链接},success: res => {console.log(res, 'share')uni.hideLoading()showToast({title: '分享成功',icon: 'none'})}})}}