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