将某部分DOM导出为图片 html2canvas

利用html2canvas"捕捉"屏幕

并下载到本地

  
将该部分导出为图片

exportPictures(){
  let canvasBox = this.$refs.imagesSearchIndex
  let name = '图片名称'
  let height = 400
  html2canvas(canvasBox, {
    backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
    width: 1612,
    height: height,
    useCORS: true, //支持图片跨域
    proxy: 'http://xxxxxxxxxxxxx', //跨域的url
    scale: 1 //设置放大的倍数
  }).then(canvas => {
    let url = canvas.toDataURL("image/png") // toDataURL: 图片格式转成 base64
    downloadBaseImg(url, name)
  })
}

/**
 * 下载图片
 * @param baseUrl base64地址
 * @param name 图片名称
 */
export function downloadBaseImg (baseUrl, name) {
  //将base64转换为blob
  let arr = baseUrl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  let myBlob = new Blob([u8arr], { type: mime });

  let myUrl = URL.createObjectURL(myBlob);
  let a = document.createElement("a");
  a.setAttribute("href", myUrl);
  a.setAttribute("download", name);
  a.setAttribute("target", "_blank");
  let clickEvent = document.createEvent("MouseEvents");
  clickEvent.initEvent("click", true, true);
  a.dispatchEvent(clickEvent);
}