页面滚动导致html2canvas截图不全解决方案

页面滚动导致html2canvas截图不全，关于技术选型的思考

需求是将编辑后的表格制作成图片，首先想到的就是html2canvas，其中遇到了诸多问题，这些问题其实在官方文档内都提供了配置进行解决，但官方文档对字段的介绍看的云里雾里，理解不是很清楚，最后还是调试源码才理解清楚。
我遇到的情况如下：

1. 截图元素在页面的右下方
2. 截图元素所在的页面会出现滚动

通过getBoundingClientRect()可以获取被截图元素的width，height，top，left信息
下面介绍几个属性配置，：
x: 截图起始点X，等于页面scrollLeft+left
y: 截图起始点Y，等于页面scrollTop+top
width: 元素本身width
height: 元素本身height
scale: 截图若模糊可增大数值
backgroundColor: 截图背景颜色，透明图设置null

图片若跨域有两种解决方案：

1. useCORS: true 这种需要图片所在服务器配置了允许跨域
2. proxy：xxx 一般内部静态资源服务器无法单独配置跨域，可自行设置代理地址作为中介便于访问

此外，html2canvas支持两种模式去截图，foreignObjectRendering和默认的canvas绘制，因为内部逻辑复杂功能较多所以库的体积也较大；若不考虑浏览器兼容性，可使用dom-to-image，其仅使用foreignObject方式将DOM转化为SVG在canvas渲染截图，体积更小。

关于如何进行源码调试，vite开发模式下，打开开发者工具–源代码菜单–找到网页标签–展开域名–node_modules–.vite/deps，下面就是你的依赖文件了。

作为一个开发人员，之前只是接收领导任务去实现，从没考虑过选择这个库的原因是什么，有什么优缺点，之前还被面试问为什么不用Fabric.js作图，当时一脸懵，根本不知道这是什么。。后面了解了才恍然大悟，哦这个其实之前听说过，只不过没在意，Fabric.js是个操作canvas的库，提供了许多api便于进行canvas绘制，但它本身并不支持从DOM直接去截图，考虑到实现难度，具体需求以及性能要求不高，最终选择了html2canvas。

这件事也让我注意到开发不止要关注怎么做，更要关注为什么。希望对大家也有所帮助。

参考文章：
https://html2canvas.hertzen.com/configuration