微信小程序分享时,封面图片裁剪为5:4

微信小程序分享时,封面图片裁剪为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 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合法域名,及图片路径的域名

你可能感兴趣的:(小程序)