小程序这个裁剪需求应该怎么做

移动四个点，裁剪图片，找了好多找不到小程序适用的组件，这个应该用哪个组件可以实现

可以使用canvas的clip方法。
例:

Page({
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)
        // https://picsum.photos/300/300
        let img = canvas.createImage();
        img.src = "https://picsum.photos/300/300"
        img.onload = () => {
          ctx.beginPath();
          ctx.strokeStyle = "green";
          ctx.lineWidth = 1;
          // 放置四个点的位置
          ctx.moveTo(100, 100)
          ctx.lineTo(300, 0);
          ctx.lineTo(300, 300);
          ctx.lineTo(0, 300);
          ctx.closePath();
          ctx.clip();
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          // ctx.clearRect(0, 0, canvas.width, canvas.height)
          ctx.restore();
          let base64 = canvas.toDataURL();
          this.setData({ base64 })
        }
      })
  }
})

https://developers.weixin.qq.com/s/XOQmDUmF7SyQ