微信小程序分享时,封面图片裁剪为5:4
直接贴代码:
//裁剪分享的图片为5:4
//传入图片地址
cutShareImg:function(imgurl){
let that=this;
wx.getImageInfo({
src: imgurl, // 这里填写网络图片路径
success: (res) => {
let ctx = wx.createCanvasContext('canvas');
let canvasW = 640, canvasH = res.height;
if (res.width / res.height > 5 / 4) { // 长宽比大于5:4
canvasW = res.height * 5 / 4;
}
ctx.drawImage(res.path, (res.width - canvasW) / 2, 0, canvasW, canvasH, 0, 0, canvasW, canvasH)
ctx.draw(false, () => {
wx.canvasToTempFilePath({
width: canvasW,
height: canvasH,
destWidth: canvasW,
destHeight: canvasH,
canvasId: 'canvas',
fileType: 'jpg',
success: (res) => {
//设置分享图片路径
that.setData({
shareimg:res.tempFilePath
});
}
})
})
}
});
},
html代码
<!-- 裁剪分享时图片的canvas -->
<canvas style="position: absolute; top: -1000px; left: -1000px; width: 640px; height: 640px; background: #000;" canvas-id="canvas"></canvas>
分享的时候
onShareAppMessage: function () {
return {
title: title,
desc: '',
path: '',
imageUrl: this.data.shareimg,
}
}
当然还需要配置小程序downloadFile合法域名,及图片路径的域名