当前位置：首页 > news >正文

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

news 2025/8/2 16:02:18

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