微信小程序开发之使用Canas制作圆角图片

最新推荐文章于 2024-01-02 17:13:44 发布

virusfan

最新推荐文章于 2024-01-02 17:13:44 发布

阅读量1.3k

点赞数

文章标签：微信小程序 javascript 小程序

本文链接：https://blog.csdn.net/virusfan/article/details/126039649

版权

 drawImageToCanvas() {
    const query = wx.createSelectorQuery();
    query.select("#canvas").fields({
      node: true,
      size: true
    }).exec(e1 => {
      console.log('图像处理', "#canvas", 'wx.createSelectorQuery', e1);
      const canvas = e1[0].node;
      this.setData({
        canvas: canvas
      })
      const ctx = canvas.getContext('2d');

      // ctx.clearRect(0, 0, e1[0].width, e1[0].height);
      ctx.mozImageSmoothingEnabled = false;
      ctx.webkitImageSmoothingEnabled = false;
      ctx.msImageSmoothingEnabled = false;
      ctx.imageSmoothingEnabled = false;

      canvas.width = this.data.imgWidth;
      canvas.height = this.data.imgHeight;

      if (this.data.path) {
        const img = canvas.createImage();
        img.onload = (e2) => {
          console.log("图像处理", "#canvas", 'img.onload', e2);
          ctx.beginPath()
          const round = (this.data.imgWidth > this.data.imgHeight ? this.data.imgHeight : this.data.imgWidth) / 2 * (this.data.round / 100.0)
          console.log(round)
          ctx.arc(round, round, round, Math.PI, Math.PI * 1.5)
          ctx.arc(this.data.imgWidth - round, round, round, Math.PI * 1.5, Math.PI * 2)
          ctx.arc(this.data.imgWidth - round, this.data.imgHeight - round, round, 0, Math.PI * 0.5)
          ctx.arc(round, this.data.imgHeight - round, round, Math.PI * 0.5, Math.PI)
          ctx.clip()
          ctx.drawImage(img, 0, 0, this.data.imgWidth, this.data.imgHeight);
        };
        img.src = this.data.path;
      } else {}
    });
  }