【uniapp-小程序-分享图5/4】

utils.js

//裁剪分享的图片为5:4
const makeCanvas = (imgUrl) => {
	console.log("imgUrl",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 > 400 || imgInfo.height > 320) {
					canvasW = 400;
					canvasH = 320;
					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) {
						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) => {
							console.log("res.tempFilePath",res.tempFilePath);
							resolve(res.tempFilePath)
						},
						fail: (err) => {
							console.log("err",err);
							reject(err)
						}
					},this)
				})
			},
			fail: (err) => {
				reject(err)
			}
		})
	})
}
module.exports = {
	makeCanvas
}

用的页面

import util from '@/common/js/util.js';
//分享到聊天
		onShareAppMessage() {
			return new Promise((resolve, reject) => {
				let shareMessage = {
					title: this.liveInfo.wx_title,
					path: '/subPages/livePages/liveCourse/live_course_info?courseid=' +
						this.courseid,
					imageUrl: this.liveInfo.wx_thumb || this.liveInfo.thumb
				};
				util.makeCanvas(shareMessage.imageUrl)
				.then(imgPath => {
					console.log(imgPathm,'imgPath')
						// uni.hideLoading();
						resolve({
								title: shareMessage.title,
								path: shareMessage.path,
								imageUrl: imgPath
						});
				})
				.catch(err => {
						// uni.hideLoading();
						resolve(shareMessage);
				});
			})
		},