网页html生成图片的经常使用方案

若是您有一个需求是将网页生成一个快照的图片，而后须要用到该图片上传或者发送给他人的这样的需求，那么你会怎么作呢？聪明的你可能会想到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

• 若是有相关问题，还可参考另外一篇文章点此查看

---

Diboot - 简单高效的轻代码开发框架