使用html-to-image时组件部分样式丢失、变形失真是什么原因？

共性问题原因 #

两类库的实现逻辑都是遍历目标DOM节点、读取计算样式后绘制到canvas，不执行页面JavaScript，也无法100%对齐浏览器原生渲染规则，样式异常基本出自以下场景：

• 动态计算样式未适配：transform运行时值、CSS变量、媒体查询适配样式、::before/::after等伪元素样式，若未开启对应配置项，库无法主动读取这类样式，会直接丢失。
• 跨域资源限制：canvas受同源策略约束，跨域的图片、字体资源无法加载，会出现文字用系统默认字体渲染、图片位错位，连带整体布局变形。
• CSS作用域匹配失败：CSS Modules、CSS-in-JS（如你用到的MUI）运行时生成的类名样式，若未注入到库创建的独立沙盒DOM中，转换时无法匹配到对应样式，导致大面积样式丢失。
• 像素比不匹配：默认画布像素比和页面devicePixelRatio不一致，会出现渲染模糊、元素比例变形的问题。

针对性修复方案 #

html2canvas适配方案 #

• 基础配置调整：添加useCORS: true处理跨域资源，设置scale: window.devicePixelRatio适配设备像素比解决模糊问题，需要兼容污染画布的场景可添加allowTaint: true（注意评估安全风险）。
• MUI专属适配：转换前遍历目标节点的所有计算样式，手动写入到节点的style属性中，或提前把MUI运行时生成的所有样式表注入到html2canvas的临时DOM容器内。

html-to-image适配方案 #

• 资源加载配置：设置pixelRatio: window.devicePixelRatio解决变形模糊，添加fontEmbedCSS参数传入页面所有自定义字体的样式规则，避免字体加载失败导致的文字样式异常。
• CSS兼容调整：升级到最新版本的html-to-image优化CSS变量兼容性，老版本可在转换前手动把CSS变量替换为实际计算值。
• 开启includeQueryParams: true兼容带查询参数的资源链接，避免资源加载失败。

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