请教前端实现获取dom元素快照的方法

Question

我在做自定义大屏, 一个大屏是有若干个iframe构成, 大屏列表展示的时候想显示下每一个大屏的缩略图, 所以我就想在大屏编辑预览时获取大屏dom元素的快照, 作为这条数据的缩略图显示.

试过了html2canvas和domtoimage, 对于有iframe的都处理不好.

又网上找到了这个rasterizeHTML.js, 据说可以解决iframe的问题, 但是用的时候老是提示我
Blocked script execution in 'about:srcdoc' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.. 我每个iframe都配置的有allow-scripts的:

  <iframe
    id={iframe_${payload.name}}
    title={iframe_${payload.name}}
    height="100%"
    width="100%"
    sandbox="allow-scripts allow-same-origin allow-popups"
    frameBorder="0"
    srcDoc={html}
  />
  
  

有没有大佬做过类似的功能, 请给我点思路或者建议.

Answer 1

我确实做过，不过一言难尽。

方法是：每个DOM转存为JSON，iframe中的DOM也转为JSON，通过postMessage发送到外层页面，外层页面进行数据收集。
得到JSON列表再在一个新的iframe中渲染出来

---

DOM转JSON可以参考：https://www.npmjs.com/package...