uni用canvas绘制H5端的分享海报

由于微信的直接分享限制较多，改为利用canvas来做分享

花了一天多完成，几个知识点（坑）的记录

1，绘制二维码本来采用功能更丰富的weappQRcode.js，但h5端难以调通，

所以用的是wxqrcode.js，返回的是一个base64，8是url的规范等级，否则长度超出后会报错

this.qr = wxqrcode.createQrCodeImg(window.location.href, {  typeNumber: 8 })

直接用绘图方法就能根据base64画出来

ctx.drawImage(this.qr, x,y,widt, height)

画出来后的分享功能，若是其他平台可以用uni.saveImageToPhotosAlbum直接转为图片

但H5端不可以，所以用uni.canvasToTempFilePath转为base64后，再写入img的src

finalHeight的高度是所有高度（例如头部，活动高度，底部）相加乘以2

destWidth是输出宽度，一般情况默认就可以

 

                        uni.canvasToTempFilePath({
                            x: 0,
                            y: 0,
                            width: canvasInfo.width,
                            height: finalHeight,
                            //destWidth: canvasInfo.width,
                            //destHeight: finalHeight,
                            canvasId: 'shareCanvas',
                            success: function(res) {
                                that.canvasImg = res.tempFilePath
                            },

                        })

文字换行，采用的是ctx.measureText拿到一个字的宽度，然后不断遍历计算，有点麻烦但基本解决需求

const oneTextWidth = ctx.measureText(‘一段文字’).width 

因为高度是变化的，所以每次高度增加都要重新绘制一次底色，很蠢的办法，但也没找到其他方法，待解决。

                            ctx.fillStyle = '#fff'
                            ctx.fillRect(0, increasingHeight, canvasInfo.width,  oneTextHeight)