阅读数:166 评论数:0

一、简介

html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏，它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。

html2canvas脚本将页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上。

html2canvas不能识别svg，可以通过canvg插件或rasterizehtml插件将svg转化为canvas。

二、引入

方式一：引入js文件

<script src="../js/html2canvas.js"></script>

方式二：使用npm

npm install html2canvas
# 然后在使用的组件中引入
import html2canvas from 'html2canvas'

三、语法

html2canvas(element, options).then(function(canvas){
	...
});

第一个参数是所需要截图的元素的id，第二个参数是配置参数，then是截图后要执行的函数，canvas为截图后返回的最后一个canvas。

1、配置参数

（1）useCORS

boolean类型，使用CORS尝试加载图片。

（2）allowTaint

boolean类型，是否允许跨域图片污染canvas画布。

（3）proxy

使用代理去加载跨域图片。

（4）timeout

图片延迟加载，默认延迟为0，单位毫秒。

（5）taintTest

是否在渲染前测试图片

（6）logging

在console.log中输出信息。

（7）width、height

canvas宽度、高度

（8）backgroup

canvas的背景颜色，如果没有设置，默认透明。

（9）letterRendering

字间距

四、常见问题

1、生成图片有白边的问题

可以设置canvas的宽度、高度与所截图相同或者更小，从而解决白边问题。

2、如何把截图保存到本地

let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
let a = document.createElement("a"); // 生成一个a元素
let event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "海报"; // 设置图片名称没有设置则为默认
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件