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

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

准备

在需要自定义分享的页面设置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 = 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/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 问题

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

微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
微信小程序详解 php,微信小程序列表开发详解
本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家. 一.知识点 (一).列表渲染 wx:for tip:wx:for="array"可以等于参 ...
详解制作微信小程序流程，微信小程序好开发吗？
一.从注册开始要开发小程序自然要申请注册一个小程序,我们先进入微信公众平台注册账号(若有账号则直接登录). 因为微信公众号同时管理着订阅号,公众号以及小程序等多种账号,所以这里要选择小程序账号类型: ...
java小程序详解_微信小程序登录Java后台接口(详解,附示例代码)
首先看一下官方文档地址:微信小程序官方文档API登录接口我们先对官方给的时序图进行简单的分析 1.当小程序调用wx.login()时,会获得一个code(临时登录凭证),然后我们需要用wx.req ...
android可拖拽九宫格,微信小程序实现九宫格图片拖拽
(在真机上的效果就不演示了,是差不多的) 实现思路布局在这里运用到了微信小程序的moveable-area和moveable-view两个标签. moveable-area是可拖拽的区域,需要设置 ...
微信小程序php后台支付,微信小程序支付功能实现PHP实例详解
微信小程序支付功能实现PHP实例详解前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...
《微信小程序开发》页面导航最强详解 | 如何对小程序页面进行跳转？
<微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 文章目录 <微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 一.微信小程序导航二.命 ...
微信 php收藏功能实现,关于微信小程序收藏功能的实现
这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目.需要的朋友可以参考下需求点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目 ...
微信小程序支付功能用服务器吗,微信小程序支付功能服务器端（TP5.1）实现...
首先下载微信支付SDK ,将整个目录的文件放在 /application/extend/WxPay 目录下在使用SDK之前我们需要对 WxPay.Config.php 进行配置 namespace ...

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

准备

目录

详解思路

定义总函数

全局通用分享

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

最新文章

热门文章