微信小程序canvas 截图

 

 

实现的效果

 

 

 

 

 

 

代码

 

 <canvas  bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove" class="cv-ct-canvas" id="cv-pic" canvas-id="cv-pic"></canvas> 

 

 

 

  onLoad: function (options) {  //    加载canvas

    const query = wx.createSelectorQuery()

    query.select('#cv-pic')

      .fields({

        node: true,

        size: true

      })

      .exec((res) => {

        const canvas = res[0].node

        this.setData({

          canvasWidth: res[0].width,

          canvasHeight: res[0].height,

          // canvasShow: false

        })

        

        // 右上角

        this.data.AllPoint[1].x =  res[0].width - this.data.AllPoint[0].x

        this.data.AllPoint[1].y=   this.data.AllPoint[0].y

        // 右下角

        this.data.AllPoint[2].x = res[0].width - this.data.AllPoint[0].x

        this.data.AllPoint[2].y =  res[0].height - this.data.AllPoint[0].y

        

        // 左下角

        this.data.AllPoint[3].x = this.data.AllPoint[0].x

        this.data.AllPoint[3].y =  res[0].height - this.data.AllPoint[0].y

      })

  },

 

 

  bindtouchstart: function(e) { // 点击事件

    let max = 10

    if(this.data.status) {

      this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)

    }

    if(this.data.editImgStatus) {

        let status = false

        this.data.AllPoint.forEach((item,index) => {

          

          if(item.x+max > e.changedTouches[0].x && item.x-max < e.changedTouches[0].x && item.y+max > e.changedTouches[0].y && item.y-max < e.changedTouches[0].y) {

            status = true

            this.setData({

              PointIndex: index

            })

          

          }

        })

        // 判断是否有选中一个

        if(!status) {  // wx小程序break;不可用 

          this.setData({

            PointIndex: null

          })

        }

    }

    

  },

 

 

 bindtouchmove: function(e) { // 移动事件

    if(this.data.status) {

      // this.data.context.setFillStyle("#ff0000");

      this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);

      this.data.context.lineWidth =3;

      this.data.context.strokeStyle  = "#ff0000";

      this.data.context.stroke();

      this.data.context.draw(true);

      this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);

    }

    if(this.data.editImgStatus && this.data.PointIndex != null) {

      this.data.AllPoint[this.data.PointIndex].x = e.changedTouches[0].x

      this.data.AllPoint[this.data.PointIndex].y = e.changedTouches[0].y

      if(this.data.PointIndex == 1) {

        this.data.AllPoint[0].y = e.changedTouches[0].y

        this.data.AllPoint[2].x = e.changedTouches[0].x

      }

      if(this.data.PointIndex == 0) {

        this.data.AllPoint[1].y = e.changedTouches[0].y

        this.data.AllPoint[3].x = e.changedTouches[0].x

      }

      if(this.data.PointIndex == 2) {

        this.data.AllPoint[1].x = e.changedTouches[0].x

        this.data.AllPoint[3].y = e.changedTouches[0].y

      }

      if(this.data.PointIndex == 3) {

        this.data.AllPoint[0].x =  e.changedTouches[0].x

        this.data.AllPoint[2].y = e.changedTouches[0].y

      }

      this.editCanvas()

    }

  },

 

 

 

  editCanvas(params) { // 画图

      //  this.data.context.draw()

      if(this.data.editImgStatus) {

      } else {

        this.data.context.drawImage(this.data.image, 0, 0, this.data.canvasWidth, this.data.canvasHeight);

        this.data.context.draw()

        return

      }

    this.data.context.drawImage(this.data.image, 0, 0, this.data.canvasWidth, this.data.canvasHeight);

     

    this.data.context.fillStyle = "rgba(0,0,0,0.5)"; 

    this.data.context.fillRect(0, 0, this.data.AllPoint[0].x, this.data.canvasHeight);

      

    this.data.context.fillStyle = "rgba(0,0,0,0.5)";

    let canW = this.data.canvasWidth -  this.data.AllPoint[1].x

    let topWidth = this.data.canvasWidth -  this.data.AllPoint[0].x - canW

    

    

    this.data.context.fillRect(this.data.AllPoint[0].x, 0, topWidth, this.data.AllPoint[0].y);

  

  this.data.context.fillStyle = "rgba(0,0,0,0.5)";

 

  this.data.context.fillRect(this.data.AllPoint[1].x, 0, this.data.canvasWidth - this.data.AllPoint[1].x, this.data.canvasHeight);

   let context = this.data.context

 

  this.data.context.fillStyle = "rgba(0,0,0,0.5)";

  let canW2 = this.data.canvasWidth -  this.data.AllPoint[2].x

  let topWidt2h = this.data.canvasWidth -  this.data.AllPoint[0].x - canW2  

  let canH = this.data.canvasWidth - this.data.AllPoint[2].y

  this.data.context.fillRect(this.data.AllPoint[0].x, this.data.AllPoint[2].y, topWidt2h, canH)

  

  context.beginPath();

  context.arc(this.data.AllPoint[0].x-3.2, this.data.AllPoint[0].y-3.2, 5, 0, Math.PI*2, false);

  context.closePath()

  context.fillStyle = 'red';

  context.fill();

  context.beginPath();

  context.arc(this.data.AllPoint[0].x-3.2, this.data.AllPoint[3].y+3.2, 5, 0, Math.PI*2, false);

  context.fillStyle = 'red';

  context.fillStyle = 'red';

  context.fill();

  context.beginPath();

  context.arc(this.data.AllPoint[2].x+3.2, this.data.AllPoint[2].y+3.2, 5, 0, Math.PI*2, false);

  context.fillStyle = 'red';

  context.fill();

  context.beginPath();

  context.arc(this.data.AllPoint[2].x+3.2, this.data.AllPoint[0].y-3.2, 5, 0, Math.PI*2, false);

  context.fillStyle = 'red';

  context.fill();    

    this.data.context.draw()

  },

 

 

 

ok全部实现