网页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 - 简单高效的轻代码开发框架