canvas截图

//需要安装cropperjs
//this.data.src  图片地址
//上传图片

//隐藏input框去掉用实现自己的file框的样式
platFromdupLoding(){
     this.$refs.filElem.dispatchEvent(new MouseEvent('click')) 
   }
//getFile($event)//上传图片
{
    var inputfile=e.target.files[0];
     this.filetoCanvas(inputfile);////选择是图片上传还是canvas绘制
}
//调用函数
  filetoCanvas(file){
        var reader=new FileReader();
        reader.readAsDataURL(file);
       //读取图像文件 result 为DataUrl,DataUrl 可直接复制给 img.src
       
        //直接上传图片
         reader.onload=(e)=>{
           var img=document.getElementById("img");
           this.$refs.img.src=e.target.result;//可以获取到用户的第一张图片
           this.data.src=e.target.result;
         }
    //       reader.onload=function(e){ //图片上传之后使用canvas绘制
    //         var image=new Image();
    //         image.src=e.target.result;
    //         image.onload=()=>{
    //           var canvas=document.getElementById("canvas");
    //           var imageCanvas=canvas.getContext("2d");
    //           imageCanvas.drawImage(image,0,0,canvas.width,canvas.height);
    //         }
    //       }
  }
  //以上图片上传
  
  //在图标上进行标记
  initCropper () {
     let canvas = document.getElementById(this.data.src);
  let ctx = canvas.getContext('2d');
  let img = new Image();
  img.onload=function(){
    ctx.drawImage(img,0,0,canvas.width,canvas.height)
  }

      img.src = this.data.src
      let drag = false // 是否拖动矩形
      let flag = false // 是否绘制矩形
      let rectWidth = 0 // 绘制矩形的宽
      let rectHeight = 0 // 绘制矩形的高
      let clickX = 0 // 矩形开始绘制X坐标
      let clickY = 0 // 矩形开始绘制Y坐标
      let dragX = 0 // 当要拖动矩形点击时X坐标
      let dragY = 0 // 当要拖动矩形点击时Y坐标
      let newRectX = 0 // 拖动变化后矩形开始绘制的X坐标
      let newRectY = 0 // 拖动变化后矩形开始绘制的Y坐标
            // 鼠标按下
      canvas.onmousedown = e => {
        ctx.beginPath()
        ctx.setLineDash([6, 6])
        ctx.moveTo(newRectX, newRectY)
        ctx.lineTo(newRectX + rectWidth, newRectY)
        ctx.lineTo(newRectX + rectWidth, newRectY + rectHeight)
        ctx.lineTo(newRectX, newRectY + rectHeight)
        ctx.lineTo(newRectX, newRectY)
        ctx.strokeStyle = 'green'
        ctx.stroke()
        if (ctx.isPointInPath(e.offsetX, e.offsetY)) {
          drag = true
          dragX = e.offsetX
          dragY = e.offsetY
          clickX = newRectX
          clickY = newRectY
        } else {
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
          flag = true
          clickX = e.offsetX
          clickY = e.offsetY
          newRectX = e.offsetX
          newRectY = e.offsetY
        }
      }
      // 鼠标抬起
      canvas.onmouseup = () => {
        if (flag) {
          flag = false
          //抬起之后要传入刚刚画框的位置
          this.superList.clickX=clickX
          this.superList.clickY=clickY
          this.superList.rectWidth=rectWidth
          this.superList.rectHeight=rectHeight
          //this.sureCrop(clickX, clickY, rectWidth, rectHeight)
        }
        if (drag) {
          drag = false
          this.superList.clickX=clickX
          this.superList.clickY=clickY
          this.superList.rectWidth=rectWidth
          this.superList.rectHeight=rectHeight
         // this.sureCrop(newRectX, newRectY, rectWidth, rectHeight)
        }
      }
      // 鼠标移动
      canvas.onmousemove = (e) => {
        if (flag) {
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
          rectWidth = e.offsetX - clickX
          rectHeight = e.offsetY - clickY

          ctx.beginPath()
          ctx.strokeStyle = '#FF0000'
          ctx.strokeRect(clickX, clickY, rectWidth, rectHeight)
          ctx.closePath()
        }
        if (drag) {
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
          ctx.beginPath()
          newRectX = clickX + e.offsetX - dragX
          newRectY = clickY + e.offsetY - dragY
          ctx.strokeStyle = 'yellow'
          ctx.strokeRect(newRectX, newRectY, rectWidth, rectHeight)
          ctx.closePath()
        }
      }
  }
  //接收刚刚绘制的内容
   platfromSure(){
 let x=this.superList.clickX;//用户绘制的矩形的位置
 let y=this.superList.clickY;
 let width=this.superList.rectWidth;
 let height=this.superList.rectHeight;
 let canvas = document.getElementById(this.data.src);
 let ctx=canvas.getContext('2d');
 let img=document.getElementById("img");

 img.src=canvas.toDataURL("image/png");
 let data1=canvas.toDataURL("image/png");

      this.$nextTick(()=>{

  let imgData = this.$refs.canvas.getContext('2d').getImageData(x,y, width,height);
      canvas.width = width;
      canvas.height = height;
      //将裁剪的区域给新创建的canvas
      ctx.putImageData(imgData,0,0,0,0,width,height);
      //输出base64
      let data2=canvas.toDataURL("image/jpeg");
      console.log(canvas.toDataURL("image/jpeg"));
      this.$store.state.detailShade=false;
       const config={
        headers:{
        'Content-type':'application/x-www-form-urlencoded'
        }
       }
      let data={}
      data.target=data1;
      data.template=data2;
      data.is_support_multi=0;
      data.confidence=0.6;
      data.threshold=0.2;
    //  +''+data1+"&template="+data2+"&is_support_multi=0&confidence=0.6&threshold=0.2"
      axios.post(this.platFromUrl,qs.stringify(data), config).then((res)=>{
        console.log(res.data.data)
        this.imgdata=res.data.data;//获取后台返回的坐标
      })
   
  })
 
}
//生成刚刚用户选择的位置
ImgStartrecognition(){
   // console.log(this.imgdata[0][0],this.imgdata[0][1],this.imgdata[1],this.imgdata[2])
      var canvas = document.getElementById("canvas1");  

      var context = canvas.getContext('2d');  //getContext() 方法可返回一个对象  
       
        context.strokeStyle = "blue";
       
       context.lineWidth = 3;      
       //context.strokeRect(50,50,180,12);
      context.strokeRect(this.imgdata[0][0],this.imgdata[0][1],this.imgdata[1],this.imgdata[2]);  // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形 
  
}