微信小程序 分享图片大小处理

1、在分享的page 添加 canvas 标签

<canvas canvas-id="canvas"
			style="position: absolute; top: -1000px; left: -1000px;width: 225px; height: 180px;">canvas>

2、在分享的page 引入makeCanvas(之后下边会定义)，并在onShareAppMessage里使用

onShareAppMessage(res) {			
			let shareMessage = {
				title: '标题',
				path: `要分享的page 路径`,
				imageUrl: '图片url'
			}
			return new Promise((resolve, reject) => {
				uni.showLoading({
					title: '请求分享数据',
					icon: 'none'
				})
makeCanvas(shareMessage.imageUrl).then(imgPath => {
					uni.hideLoading()
					resolve({
						title: shareMessage.title,
						path: shareMessage.path,
						imageUrl: imgPath
					})
				}).catch(err => {
					uni.hideLoading()
					resolve({
						title: shareMessage.title,
						path: shareMessage.path,
						imageUrl:'处理失败后展示的图片，可以用原图shareMessage.imageUrl'
					})
				})
			})
		}

3、图片处理的主要文件（导出makeCanvas），一般作为工具包，需要的时候引入
这里将图片处理为5：4的大小，默认生成的图片为jpg格式

/**
 * 生成分享5：4的图片
 */
const makeCanvas = (imgUrl) => {
	return new Promise((resolve, reject) => {
		// 获取图片信息,小程序下获取网络图片信息需先配置download域名白名单才能生效
		uni.getImageInfo({
			src: imgUrl,
			success: (imgInfo) => {
				let ctx = uni.createCanvasContext('canvas')
				let canvasW = 0
				let canvasH = imgInfo.height
				// 把比例设置为 宽比高 5:4
				canvasW = (imgInfo.height * 5) / 4
				// 为画框设置背景色，注意要放在画图前，图会覆盖在背景色上
				ctx.fillStyle = "#fff";
				if (imgInfo.width > 225 || imgInfo.height > 180) {
					canvasW = 225;
					canvasH = 180;
					ctx.fillRect(0, 0, canvasW, canvasH);
					let dWidth = canvasW / imgInfo.width; // canvas与图片的宽度比例
					let dHeight = canvasH / imgInfo.height; // canvas与图片的高度比例
					let dWH = imgInfo.width / imgInfo.height; //宽高比
					if (imgInfo.width > canvasW && imgInfo.height > canvasH) {
						// console.log(dWH);
						if (dWH > 1 && dWH < 1.5) {
							ctx.drawImage(imgInfo.path, (canvasW - imgInfo.width * dHeight) / 2,
								0, imgInfo.width * dHeight, imgInfo
								.height *
								dHeight)
						} else {
							if (imgInfo.width > imgInfo.height) {
								ctx.drawImage(imgInfo.path, 0, (canvasH - imgInfo.height *
										dWidth) / 2, imgInfo.width * dWidth,
									imgInfo.height *
									dWidth)
							}
							if (imgInfo.width == imgInfo.height) {
								ctx.drawImage(imgInfo.path, (canvasW - imgInfo.width *
										dHeight) / 2, 0, imgInfo.width * dHeight,
									imgInfo
									.height * dHeight)
							}
							if (imgInfo.width < imgInfo.height) {
								ctx.drawImage(imgInfo.path, (canvasW - imgInfo.width *
										dHeight) / 2, 0, imgInfo.width * dHeight,
									imgInfo
									.height * dHeight)
							}
						}
					} else {
						if (imgInfo.width > imgInfo.height) {
							ctx.drawImage(imgInfo.path, 0, (canvasH - imgInfo.height) / 2,
								imgInfo.width * dWidth, imgInfo.height)
						}
						if (imgInfo.width == imgInfo.height) {
							ctx.drawImage(imgInfo.path, (canvasW - imgInfo.width * dHeight) / 2,
								0, imgInfo.width * dHeight, imgInfo
								.height *
								dHeight)
						}
						if (imgInfo.width < imgInfo.height) {
							ctx.drawImage(imgInfo.path, (canvasW - imgInfo.width * dHeight) / 2,
								0, imgInfo.width * dHeight, imgInfo
								.height *
								dHeight)
						}
					}
				} else {
					ctx.fillRect(0, 0, canvasW, canvasH)
					ctx.drawImage(
						imgInfo.path,
						0,
						0,
						canvasW,
						canvasH,
						(canvasW - imgInfo.width) / 2, // 宽度从中间向两边填充
						0,
						canvasW,
						canvasH
					)
				}
				
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						width: canvasW,
						height: canvasH,
						destWidth: 750, // 标准的iphone6尺寸的两倍，生成高清图
						destHeight: 600,
						canvasId: "canvas",
						fileType: "jpg", // 注意jpg默认背景为透明
						success: (res) => {
							resolve(res.tempFilePath)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			fail: (err) => {
				reject(err)
			}
		})
	})
}
module.exports = {
	makeCanvas,
}

之后在微信小程序分享时应该就能看到效果了