uniapp微信小程序分享的图片做响应式处理

相信很多人遇到微信小程序分享出去的图片，图片显示不全的问题，比如说像下面这样的。如果遇到这样的问题看这里就好啦

响应式处理后

直接上代码啦

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

.shareIcon {
  width: 100%;
  height: 400px;
  position: fixed;
  right: 999px;
}

//调用处直接使用这个方法
let finalShareImg = '';
try {
     finalShareImg = await getCroppingImg(img, canvasId, that);
} catch(err) {
     finalShareImg = img;
}

function getSw(num, screenWidth) {
	const rate = (num * 100) / 390;
	return parseInt((rate * screenWidth) / 100);
}

//分享图片做响应式处理
const getCroppingImg = (img, canvasId, that) => {
	return new Promise((resolve, reject) => {
		uni.getImageInfo({
			src: img,
			success: async res => {
				try {
					const systemInfo = uni.getSystemInfoSync();
					const screenWidth = systemInfo.screenWidth; 
					const basicNum = screenWidth * 0.8;
					const rate = (basicNum / res.width).toFixed(2);
					const width = res.width * rate + getSw(72, screenWidth);
					const height = res.height * rate;
					const ctx = uni.createCanvasContext(canvasId, that);
					ctx.fillRect(0, 0, width, height);
					ctx.fill();
					ctx.drawImage(res.path, 0, 0, width, height);
					ctx.draw();
					
					const query = uni.createSelectorQuery();
					query.select('#' + canvasId).node().exec((res) => {
						const canvasNode = res[0].node;
						wx.canvasToTempFilePath({
							canvasId: canvasId,
							success(r) {
								resolve(r.tempFilePath)
							},
							fail(err) {
								reject(err);
							},
						}, canvasNode)
					});
				} catch(err) {
					reject(err);
				}
			},
			fail: function(err) {
				reject(err);
			}
		});
	});
}