详解 - 解决微信小程序分享功能图片比例问题 - 全局分享

前言： 我在我的博客小程序使用微信小程序分享功能 图片不符合5:4问题 ，对其原理
扫描下面二维码，可以体验哦

准备

在需要自定义分享的页面 设置canvas 组件

<canvas 
  style="position: absolute; top: -1000px; left: -1000px; width: 875px; height: 700px;background: #fff;"
	canvas-id="canvas"></canvas>

详解思路

uni.getImageInfo // 获取图片信息
获取网络图片信息需先配置download域名白名单才能生效。
https://mp.weixin.qq.com/ 登录小程序 开发管理 - 开发设置 - 服务器域名 配置download域名白名单

uni.getImageInfo({
	src: '图片',
	success: (image)=> {
			//返回图片信息 宽高
			console.log(image.width); 
			console.log(image.height);
	}
});

获取到图片信息后

uni.createCanvasContext("canvas") //创建 canvas 绘图上下文
定义canvas 信息

  let ctx = uni.createCanvasContext("canvas")
  let canvasW = 0
  let canvasH = res.height
  // 把比例设置为 宽比高 5:4
  canvasW = (res.height * 5) / 4
  // 为画框设置背景色，注意要放在画图前，图会覆盖在背景色上
  ctx.fillStyle = "#fff"
  //填充矩形 设置矩形的宽高
  ctx.fillRect(0, 0, canvasW, canvasH) //左上角的x坐标,左上角的y坐标,宽度,高度
  //绘制图像到画布上
  ctx.drawImage(
    res.path, 
    (res.width - canvasW) / 2, 0, canvasW, canvasH,0, 0, canvasW, canvasH
  ) 
  // 图片资源，图像左上角在canvas画布上X轴的位置，Y轴的位置，绘制图像的宽度，高度，源图像的矩形选择框的左上角 X 坐标， Y 坐标，源图像的矩形选择框的宽度，高度
  

ctx.draw(false, () => {
	//canvas在绘图上下文中的描述（路径、变形、样式）实例 画到 canvas 中。
	
})

uni.canvasToTempFilePath
把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。
数据传参详解

定义总函数

getShareImg: (imgUrl) => {
				return new Promise((resolve) => {
					uni.getImageInfo({
						src: imgUrl, // 原图路径
						success: (res) => {
							let ctx = uni.createCanvasContext("canvas")
							let canvasW = 0
							let canvasH = res.height
							// 把比例设置为 宽比高 5:4
							canvasW = (res.height * 5) / 4
							// 为画框设置背景色，注意要放在画图前，图会覆盖在背景色上
			 			ctx.fillStyle = "#fff"
							ctx.fillRect(0, 0, canvasW, canvasH)
							ctx.drawImage(res.path, (res.width - canvasW) / 2, 0, canvasW, canvasH,
								0, 0, canvasW, canvasH)
							// ctx.drawImage(
							//   res.path,
							//   0,
							//   0,
							//   canvasW,
							//   canvasH,
							//   (canvasW - res.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)
									},
								})
							})
			  	}
					})
				})
			}

全局通用分享

新建一个share.js

export default {
	name: "share",
	onLoad: function() {
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})
	},
	//发送给朋友
	onShareAppMessage(res) {
		let path = `/` + this.$scope.route;
		return {
			title: '极客博文 | dlyjc',
			path,
			imageUrl: 'https://www.dlyjc.link/uploads/20230324/1679624199235.jpeg '
		};


	},
	// 分享到朋友圈
	onShareTimeline() {
		return {};
	},
}

在main.js 引入

import share from '@/utils/share.js'
Vue.mixin(share)

详解 - 解决微信小程序分享功能图片 5:4 问题 详解 - 解决微信小程序分享功能图片 5:4 问题 详解 - 解决微信小程序分享功能图片 5:4 问题 详解 - 解决微信小程序分享功能图片 5:4 问题 详解 - 解决微信小程序分享功能图片 5:4 问题 详解 - 解决微信小程序分享功能图片 5:4 问题 详解 - 解决微信小程序分享功能图片 5:4 问题 详解 - 解决微信小程序分享功能图片 5:4 问题 详解 - 解决微信小程序分享功能图片 5:4 问题 详解 - 解决微信小程序分享功能图片 5:4 问题 详解 - 解决微信小程序分享功能图片 5:4 问题