如果您有一个需求是将网页生成一个快照的图片，然后需要用到该图片上传或者发送给他人的这样的需求，那么你会怎么做呢？聪明的你可能会想到 canvas 是否可以生成一个这样的图片呢？没错，今天就给大家推荐一个简单又好用的工具 html2canvas。
准备文件
进入该官方网站点击此处，在官网首页开始下载资源文件，html2canvas.js 或者 html2canvas.min.js 皆可。
将该资源文件引入您需要使用该功能的页面中。
开始使用
给您想转换成图片的盒子标签上添加一个唯一 id，这样便于找到该 DOM 节点。
按照官方文档相关参数设置并添加代码在合适的地方来进行图片转换。
html2canvas(document.querySelector(“#app”)).then(canvas => {
document.body.appendChild(canvas)
});
详细使用
相关参数设置可参考该官方文档，根据需要设置即可。
兼容性介绍
Firefox 3.5+
Google Chrome
Opera 12+
IE9+
Edge
Safari 6+
关于 vue-cli 中使用
最新版本应该可以直接通过 yarn 或者 npm 引入了，可参照官网首页介绍
npm install –save html2canvas
或者
yarn add html2canvas
如果有相关问题，还可参考另一篇文章点此查看