uni-app微信小程序分享图片比例调整

在微信小程序分享商品图片的时候，遇到图片比例不能适应分享画面的宽高的问题，那将图片绘制到canvas，再用canvas设置图片比例，再导出图片就可以完成该功能了。

1、新增canvas的时候记得给canvas元素设置宽高不然会报宽度高度为0的错误，且不能通过display none来隐藏元素，不然也不能捕获到canvas的宽高，所以这边题主使用定位来解决

<canvas class="prodCanvas" id="prodCanvas" canvas-id="prodCanvas"></canvas>

2、样式

.prodCanvas {
  width: 100%;
  height: 400px;
  position: absolute;
  right: 9999px;
}

3、将图片绘制到canvas

getShareImg(pic) {
	return new Promise((resolve, reject) => {
            uni.getImageInfo({
            src: pic,
            success: async res => {
                try {
                    const width = 400; //可依据需求自行设置
                    const height = 340;
                    const ctx = uni.createCanvasContext('prodCanvas', this);ctx.fillRect(0, 0, width, height);
                    ctx.fill();
                    ctx.drawImage(res.path, 0, 0, width, height);
                    ctx.draw();					
                    const query = uni.createSelectorQuery();    
                    query.select('#prodCanvas').node().exec((res) => {
                        const canvasNode = res[0].node;
                         wx.canvasToTempFilePath({
                            canvasId: 'prodCanvas',
			          success(r) { resolve(r.tempFilePath) },
				  fail(err) { reject(err); },
			       }, canvasNode)
		           });
			} catch(err) {
			   reject(err);
			}
		},
		fail: function(err) { reject(err); }
            });
        });
},

4、在分享的事件中替换原有的图片

onShareAppMessage: async function(res) {
    let pic = '';
    try {
        pic = await this.getShareImg(this.pic);
    } catch(err) {
        pic = this.pic;
        console.log('-------------getShareImg err-------------');
        console.log(err);
    }
    return {
        title: '七月',
        path: '/',
        imageUrl: pic
    }
}