html2canvas中CSS box-shadow渲染问题求助：新版无支持旧版仅渲染水平方向

我之前也关注过html2canvas的样式渲染兼容问题，不少用户都遇到过你描述的情况，下面给你梳理一下相关信息和可行的解决思路：

新版本移除box-shadow模块的原因 #

html2canvas在1.0.0 alpha系列版本中进行了大规模的架构重构，早期版本（比如0.5.x）中的box-shadow独立渲染模块因为整体渲染逻辑的调整被移除了，而且官方文档的更新往往滞后于代码迭代，所以你在alpha12的说明里找不到相关内容是很常见的情况。

旧版0.5.6仅x轴阴影生效的问题 #

这个是该版本的已知bug，很多用户都反馈过。当时的阴影渲染逻辑只正确处理了水平（x轴）偏移的计算，垂直偏移、模糊半径、扩散半径这些参数的处理存在缺陷，导致只有x轴方向的阴影能被渲染出来。

可行的解决思路 #

• 使用社区修复的fork版本：有些开发者针对0.5.6版本的box-shadow bug做了修复，或者在1.0 alpha版本的基础上补全了阴影渲染功能，你可以去GitHub上搜索相关的fork仓库，选择维护活跃的版本使用。
• 手动修改源码修复：如果你有前端开发能力，可以基于0.5.6的源码调整阴影计算逻辑，补全垂直方向和其他参数的处理；或者在1.0 alpha版本中通过自定义插件/钩子的方式，添加box-shadow的渲染逻辑。
• 更换截图库替代：如果项目对box-shadow的渲染要求较高，可以考虑使用dom-to-image这类对CSS样式支持更完善的截图库，它对box-shadow的各种参数都能正确渲染，不过需要评估它的其他功能是否符合你的项目需求。

另外，你可以去html2canvas的GitHub Issues页面搜索关键词box-shadow，能找到大量相关的讨论，里面有很多用户分享的临时修复方案和遇到的类似问题，说不定能找到适合你的解决办法。

内容的提问来源于stack exchange，提问作者MROVIC