微信小程序分享图片使用canvas裁剪按比例生成

马农码字

已于 2023-06-20 14:36:37 修改

阅读量1.2k

点赞数

文章标签：微信小程序

于 2022-01-15 13:09:39 首次发布

本文链接：https://blog.csdn.net/qq_43384836/article/details/122508853

版权

wxml：

<canvas type="2d" id="canvas"></canvas>

js：

wx.getImageInfo({
 src:“”, // 这里填写网络图片路径 
  success: (res) => {
    this.clipImage(res.width, res.height)
  }
})
// 裁剪图片
clipImage(imgW, imgH) {
  new Promise((resolve, reject) => {
    let canvasH = imgH;    // 获取图片高度
    let canvasW = imgH * 4 / 5;  // 根据图片高度 获取对应的高度
    const query = wx.createSelectorQuery().in(this);
    query.select('#canvas')
      .fields({
        id: true,
        node: true,
        size: true
      })
      .exec(async (res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        canvas.width = canvasW
        canvas.height = canvasH
        let seal = canvas.createImage();
        seal.src = this.data.activityDetail.pic_url;
        seal.onload = () => {
          ctx.drawImage(seal, (imgW - canvasW) / 3, 0, canvas.width * 1.55, canvas.height * 1.55, 0, 0, canvas.width, canvas.height);
          wx.canvasToTempFilePath({
            canvas: canvas,
            success: (res) => {
              this.path = res.tempFilePath  // 转发的图片
              resolve()
            },
            fail(res) {
              console.log(res);
            }
          }, this)
        }
      })
  })
}

微信文档好乱！！