一.应用场景

最近的一个需求 在页面里提供意见截图 然后跳转到反馈页面

二.工作原理

html2canvas是通过获取到DOM  然后通过canvas将这个DOM下的东西画出来  转化成base64的方式来实现的   只要你div下的东西  都可以将其转化出来   如果只想要视口里的东西  则可以画body下的

三.应用过程

1.首先当然是安装依赖呀

npm i html2canvas -S

2.其次就是应用了

因为需要截屏视口跳转 

上代码：首先引入

import html2canvas from 'html2canvas';

然后写一个事件

<div class="samediv">
  <el-tooltip
    class="box-item"
    effect="dark"
    content="一键拍照"
    placement="left-start"
  >
    <el-button plain @click="takephotos"
      ><el-icon><Camera /></el-icon
    ></el-button>
  </el-tooltip>
</div>

其次   在事件里写上html2canvas

takephotos() {
// 获取你想截屏的大盒子  获取那个盒子的DOM  就截取那个盒子  我这里截取的是body  当前视口
  let save2 = document.body;
  html2canvas(save2).then((canvas) => {
    let url = canvas.toDataURL("image/png");
    let aLink = document.createElement("a");
    aLink.style.display = "none";
    aLink.href = url;
    // console.log(aLink.href);
    // 下载图片
    // router.push({name: 'menu', query: {'src': aLink.href}})
    // aLink.download = "截图.png";
    // document.body.appendChild(aLink);
    // aLink.click();
    // document.body.removeChild(aLink);
    window.localStorage.setItem("src", aLink.href);
    router.push({ name: "menu" });
  });
},

这里的url就是通过 canvas.toDataURL 这个方法去转码出来的 base64 内容 打印一下就是这样的

canvas.toDataURL 这个方法在实际项目里用的还是比较多的  比如在 canvas 里渲染图片 想要截图 就得通过这个方式去转码  可能会从出现跨域问题（本地图片不会，请求来的会）

注：获取当前视口可以取body 也可以去vue里id为app的那个盒子  但是取这个盒子就截屏不到element的消息提示框  或者是dialog框