前言： 我在我的博客小程序使用微信小程序分享功能 图片不符合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./ 登录小程序
开发管理 - 开发设置 - 服务器域名配置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 = 0let canvasH = res.height// 把比例设置为 宽比高 5:4canvasW = (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 = 0let canvasH = res.height// 把比例设置为 宽比高 5:4canvasW = (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/0324/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 问题
