关于网页截屏的那些事儿～

为什么要写

最近在做公司的项目中，遇到了需要对网页上特定区域导出图片的需求。在实现的过程中，遇到了一些坑并在填坑的过程中学习到了一些经验，为了方便以后回顾，因此决定记录下来。

初识 html2canvas

首先我们知道，浏览器没有提供原生的截屏api供js使用，所以必须以“曲线救国”的方式进行实现。目前社区上关于截屏这块最成熟的轮子是html2canvas,目前已经有2.3w 的star,它提供了开箱即用的简洁api，能帮助我们很轻易地实现截屏功能，下面贴出官网给出的示例代码，从中可以看到上手十分简单

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

/*
 ....
*/

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
})
复制代码

这里还可以传递第二个参数，形如html2canvas(element, options),用于自定义控制渲染结果，其中可选属性列举如下

名称	默认值	描述
allowTaint	false	是否允许跨域图片被渲染到canvas上
backgroundColor	#ffffff	canvas的背景颜色，如果背景需要被设置为透明，请设为null
canvas	null	指定使用页面中已经存在的canvas实例
foreignObjectRendering	false	在浏览器支持foreignObject情况下，是否渲染foreignObject中的内容
ignoreElements	(element) => false	指定需要被忽略渲染的元素
onclone	null	当页面区域的dom被克隆完成时触发的钩子函数，在这个钩子里可以对克隆出的dom进行修改，从而改变渲染结果，同时不会影响原本的页面
proxy	null	用于代理跨域图片资源加载的地址
scale	window.devicePixelRatio	渲染的缩放比例
width	Element width	canvas 的宽度
height	Element height	canvas 的高度
x	Element x-offset	调整canvas画布原点的x坐标
y	Element y-offset	调整canvas画布原点的y坐标

可以通过给元素增加属性data-html2canvas-ignore从而让html2canvas在渲染时忽略该元素，它是ignoreElements选项的快捷使用方式，强烈推荐哦～

这里简要叙述下它的工作原理，html2canvas将页面区域的dom克隆出一个备份，