使用html2canvas.js
阅读数:201 评论数:0
跳转到新版页面分类
html/css/js
正文
一、简介
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的单击事件