微信小程序分享图片大小处理

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 = 0let canvasH = imgInfo.height// 把比例设置为 宽比高 5:4canvasW = (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,
}

之后在微信小程序分享时应该就能看到效果了

微信小程序分享图片大小处理相关推荐

微信小程序分享图片给微信好友（如二维码）
目录前言一.使用哪种api? 二.对图片的处理需要转化为临时路径三.Windows端兼容性问题前言最近在公司开发一个微信小程序项目,用到的uniapp技术,在分享图片时,查看了uniapp的 ...
微信小程序分享图片给微信好友
wx.showShareImageMenu(Object object) | 微信开放文档 <button class="share-item" bindtap=" ...
微信小程序裁剪图片大小（有效果图）
效果图 .wxml <button bindtap="uploadtap">上传图片</button> <image style="widt ...
微信小程序分享图片给朋友
//分享share() {returnuni.showLoading({title: '加载中'});wx.downloadFile({url: this.$http.getHost() + this ...
详解 - 解决微信小程序分享功能图片比例问题 - 全局分享
前言: 我在我的博客小程序使用微信小程序分享功能图片不符合5:4问题 ,对其原理扫描下面二维码,可以体验哦准备在需要自定义分享的页面设置canvas 组件目录准备详解思路定义总函数 ...
微信小程序分享功能imageUrl带随机分享图片
//此为微信小程序分享 onShareAppMessage: function(options) { //先写一个数组, var shareimg =[ "https://desk-fd.z ...
微信小程序分享接口卡片图片尺寸比例
调用微信小程序分享需要button标签 <button open-type="share">test</button> 然后在js的page里加一个函数 o ...
微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
微信小程序分享朋友圈功能
微信小程序分享到朋友圈的功能,终于实现了!但是只能是点击右上角菜单方式分享!话不多说直接上代码! js Page({onLoad: function (options) {if(options.in ...

微信小程序分享图片大小处理

微信小程序分享图片大小处理相关推荐

最新文章

热门文章

微信小程序 分享图片大小处理

微信小程序 分享图片大小处理相关推荐

最新文章

热门文章

微信小程序分享图片大小处理

微信小程序分享图片大小处理相关推荐