【缺陷】modern-screenshot 无法截图 AntD Icon 组件

[linhuiw]

问题描述

modern-screenshot 无法截图 AntD Icon 组件引入 iconfont.cn 文件 生成的 Icon，直接截图空白。

Steps To Reproduce

Playground for https://codesandbox.io

Your Environment

• modern-screenshot: [e.g. 4.4.9]
• Browser: [e.g. chrome 111.0.5563.64]

修复方案

看起来跟 html-to-image 这个方案有关？ https://github.com/bubkoo/html-to-image/pull/393

看起来代码 读了 href 属性的值，没有读 xlink:href 属性的值

[qq15725]

移除 XML 异常属性名的时候把属性名含 : 的也去掉了，现在应该正常了

https://codesandbox.io/s/modern-screenshot-wu-fa-jie-tu-shi-yong-iconfont-cn-de-tu-biao-forked-sdqc5y?file=/demo.tsx

[linhuiw]

看起来问题并没有修复 🤨

[qq15725]

需要等待 symbol 在 DOM 树中才能截图

setTimeout(() => {
  domToPng(document.querySelector("#icons")).then((dataUrl) => {
    setImg(dataUrl);
  });
}, 2000);

https://codesandbox.io/s/modern-screenshot-wu-fa-jie-tu-shi-yong-iconfont-cn-de-tu-biao-forked-sdqc5y?file=/demo.tsx

可以自己适配下时机

[linhuiw]

明白了，👍