用JavaScript将DOM绘制成图片

之前看到了一个动画，https://jdc.jd.com/lab/2018-ae2css/washer/，就琢磨着怎么简单实现一下。要做的，就是将DOM的内容原原本本复制，并绘制成图片。

实现原理

SVG的foreignObject标签，可以包含html片段，这样就可以将整个DOM片段转换成SVG。

不过要注意的是，如果样式在样式表内，则svg里面对应的class是无效的，Chrome下可以把包含样式的style标签内容一并加进去，然后就可以通过类名来设置样式了，也可以通过遍历样式并添加style="key: value;"使样式生效。可以使用window.getComputedStyle来获取DOM的样式。如果嫌麻烦，还可以使用html2canvas库。

SVG内DOM节点的xmlns属性不能省略。

/* 如何转换成图片 */
const html = `
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
      <div xmlns="http://www.w3.org/1999/xhtml">Hello, world!</div>
    </foreignObject>
  </svg>`;

const svg = new Blob(html.split(''), {
  type: 'image/svg+xml;charset=utf-8'
});

const url = window.URL.createObjectURL(svg); // 生成的图片地址

代码演示

这是一段古诗，准备转换成图片。

八阵图

[唐] 杜甫

功盖三分国，名成八阵图。

江流石不转，遗恨失吞吴。

图片预览