功能需求：點擊一個按鈕，截取對應(yīng)區(qū)域的界面，才對截取的界面進行裁切并下載

• 下載html2canvas：在控制臺輸入 npm install html2canvas --save

• 在項目中引用 ：

  import html2canvas from 'html2canvas'
  components: {
    html2canvas
  }

• 將你需要截取的部分用 id 包裹起來

  <div id="capture" ref="imageTofile">......</div>

• 獲取該區(qū)域(這部分寫在你的點擊下載按鈕的方法中)

  html2canvas(document.querySelector("#capture")).then(canvas => {
    const imgUrl = canvas.toDataURL("png"); // 獲取生成的圖片的url
    console.log(imgUrl)
  }）

這樣就可以得到你需要需要截取的屏幕區(qū)域了

• 如果你需要再次對這樣圖片進行裁切

const img = new Image();
img.src = canvas.toDataURL("png");
img.setAttribute('crossOrigin', 'anonymous');
var canvas = document.createElement("canvas");//1. 獲取畫布

const num = this.dataLength * 48 + 148;
console.log(canvas)
canvas.width = 530;//這個設(shè)置不能丟，否者會成為canvas默認的300*150的大小
canvas.height = 500;//這個設(shè)置不能丟，否者會成為canvas默認的300*150的大小
var ctx = canvas.getContext("2d");//2. 獲取畫布上下文
img.onload=function() {
  var w = img.width
  var h = img.height
  ctx.drawImage(img, 0, 0, w, h, 0, 0, w, h)
  var dataURL = canvas.toDataURL("image/png");
  console.log('裁切后',dataURL)
  saveFile(dataURL,'images.jpg');// 下載圖片
}

• 下載圖片

var saveFile = function(data, filename){
  var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
  save_link.href = data;
  save_link.download = filename;

  var event = document.createEvent('MouseEvents');
  event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  save_link.dispatchEvent(event);
}