html2canvas截图的使用

html2canvas截图的使用

前几天一个月薪35k的兄弟，给我推了一个人工智能学习网站，看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有，很详细，分享给大家。大家及时保存，说不定啥时候就没了。

简述

html2canvas是一个脚本 这个脚本可以允许用户直接在浏览器上拍摄网页或其中一部分的"屏幕截图".屏幕截图是基于DOM,因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上的可用信息构建屏幕截图。

解析：就是把dom结构传入html2canvas中，html2canvas会根据传入的dom结构生成对应的截图。例如你使用echarts画了一个图，你给这个dom一个ref拿到结构然后传入html2canvas就会生成对应的图表截图。

运行过程

脚本遍历加载页面的DOM。它收集那里所有元素的信息，然后将其用于构建页面的表示形式。换句话说，它实际上并不截取页面的屏幕快照，而是根据它从DOM读取的属性来构建页面的表示形式。所以可能有些这个脚本识别不了的css或者html将会在编译过程中失效!

局限性

脚本使用的所有图像都必须位于相同的来源， 以便它无需代理即可读取它们。同样，如果canvas 页面上还有其他元素被跨域内容污染，它们将变脏并且无法被html2canvas读取。
该脚本不会呈现Flash或Java applet之类的插件内容。

安装

npm i html2canvas

导入

import html2canvas from 'html2canvas'

用法

<div ref="container">
    <span data-html2canvas-ignore>我是span，我不显示在截图中</span>
    // 标签设置data-html2canvas-ignore，就不会显示在截图中
    // 内容
</div>
<script>
import html2canvas from html2canvas
export default {
    methods: {
	   async getImgBase64(){
	       let ele = this.$refs['container']
	       const width = ele.offsetWidth
	       const height = ele.offsetHeight
	       let canvas = await html2canvas(ele,{
	          scale: 2,
	          width,
	          height,
	          backgroundColor: "#FFF"
	       })
	       return canvas.toDadaURL()
	   }
	}
}
</script>

参考

组件githab地址
Vue中Html2canvas的使用
html2canvas将HTML内容写入Canvas生成图片
html2canvas 使用总结