微信小程序分享图片大小处理-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序分享图片大小处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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,
}