如何将DOM转换为图片，这个问题可能有点大，一时想不到答案，但我们把问题缩小一下，转换为SVG你可能就想起来了。
SVG能直接嵌入到HTML中，那反过来应该也行。回忆一下，SVG和DOM是不是长得很像？因为他们都是XML的一种方言，所以我们把DOM塞到SVG里面就行了。但是，问题来了，XHTML和SVG都有一个
标签，SVG怎么区分他们？其实这就好比变量之于命名空间，XML有各种方言，所以也有命名空间开区分它们。</p>
<p><code><svg xmlns="http://www.w3.org/2000/svg"></code></p>
<p>SVG的开头一般长这个样子，这个<code>xmlns</code>就是xml name space的缩写。<code>http://www.w3.org/2000/svg</code>就是SVG的命名空间。
HTML的命名空间是<code><html xmlns="http://www.w3.org/1999/xhtml"></code></p>
<p>在SVG中引入其他命名空间要放在<code>foreignObject</code>标签内。</p>
<p>最后我们可以先将SVG转换为canvas，再通过<code>canvas</code>的<code>toDataURL</code>方法来将其转换为对应格式的bash64编码。</p>
<p>如果你要转换DOM节点的比较复杂，推荐使用<code>dom-to-image</code>库来实现。</p>
</section>
<footer class="article-footer">
<section class="article-copyright">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copyright" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="12" cy="12" r="9" />
<path d="M14.5 9a3.5 4 0 1 0 0 6" />
</svg>
<span>Licensed under CC BY-NC-SA 4.0</span>
</section>
</footer>
</article>
<aside class="related-content--wrapper">
<h2 class="section-title">相关文章</h2>
<div class="related-content">
<div class="flex article-list--tile">
<article class="">
<a href="/p/canvas-conic-gradient/">
<div class="article-details">
<h2 class="article-title">Canvas + TS 实现锥形渐变效果</h2>
</div>
</a>
</article>
<article class="">
<a href="/p/three.js-svg-extrude/">
<div class="article-details">
<h2 class="article-title">Three.js 挤出 SVG 路径</h2>
</div>
</a>
</article>
<article class="">
<a href="/p/vite-glb/">
<div class="article-details">
<h2 class="article-title">Vite 导入 glb 文件</h2>
</div>
</a>
</article>
<article class="">
<a href="/p/%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96/">
<div class="article-details">
<h2 class="article-title">在不规则区域内随机布点</h2>
</div>
</a>
</article>
<article class="">
<a href="/p/css-oval-animation/">
<div class="article-details">
<h2 class="article-title">纯 CSS 实现椭圆轨迹运动</h2>
</div>
</a>
</article>
</div>
</div>
</aside>
<footer class="site-footer">
<section class="copyright">
©
2015 -
2025 海屿
</section>
<section class="powerby">
❤️ <a href="https://beian.miit.gov.cn">津ICP备2024020274号-2</a> <br/>
使用 <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> 构建 <br />
主题 <b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener" data-version="3.29.0">Stack</a></b> 由 <a href="https://jimmycai.com" target="_blank" rel="noopener">Jimmy</a> 设计
</section>
</footer>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div><script
src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"integrity="sha256-ePwmChbbvXbsO02lbM3HoHbSHTHFAeChekF1xKJdleo="crossorigin="anonymous"
defer
>
</script><script
src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"integrity="sha256-UKkzOn/w1mBxRmLLGrSeyB4e1xbrp4xylgAWb3M42pU="crossorigin="anonymous"
defer
>
</script><link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css"crossorigin="anonymous"
><link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css"crossorigin="anonymous"
>
</main>
</div>
<script
src="https://cdn.jsdelivr.net/npm/node-vibrant@3.1.6/dist/vibrant.min.js"integrity="sha256-awcR2jno4kI5X0zL8ex0vi2z+KMkF24hUW8WePSA9HM="crossorigin="anonymous"
>
</script><script type="text/javascript" src="/ts/main.1e9a3bafd846ced4c345d084b355fb8c7bae75701c338f8a1f8a82c780137826.js" defer></script>
<script>
(function () {
const customFont = document.createElement('link');
customFont.href = "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap";
customFont.type = "text/css";
customFont.rel = "stylesheet";
document.head.appendChild(customFont);
}());
</script>
</body>
</html>