分享一个超好用的前端依赖库：dom-to-image

admin

看到标题中的依赖库名称，应该就明白是什么意思了。“dom-to-image”，将文档（将html生成为图片）转换成图片，那么这个东西有什么用呢？

探索玩法
通过标题我们大致知道dom-to-image的功能以后，接下来就是看怎么玩了，我感觉这个可玩性还是很高的，例如：

• 生成Logo图
• 生成百科图
• 生成微博图
• 等等太多了...
  

我们以生成Logo图来说，目前我所知道的有两个网站的Logo都是比较简单的：某Tube，某Hub，分别是红白配色和黄白配色，以Hub为例，在文本的基础上加一个黄色的圆角矩形背景就可以使用html做出这个效果，之后使用dom-to-image就可以直接生成png透明图片，感觉还是很好玩的。


使用方式
这里我以Nuxt3为例，在Nuxt3中使用dom-to-image这个插件。
当然不管用什么框架（这里稍微跟进一下前端，不用传统的html + jQuery这种写法了），肯定要使用npm或者yarn进行安装依赖：

1. // 安装dom-to-image

复制代码

安装完之后，来看一下Nuxt3的小技巧，在nuxt3中，为了不将这个插件打包进entry-xxx.mjs里面（这个是公共的，每个页面都会加载），我们就需要进行动态加载了：

1. <script setup lang="ts">
   
2. let domtoimage;
   
3. 
   
4. onMounted(async () => {
   
5.     domtoimage = await import('dom-to-image')
   
6. })
   
7. </script>

复制代码

这样我们就动态的将dom-to-image引入进来了，接下来看下使用方法：

1. domtoimage
   
2.         .toPng(nodeCore.value)
   
3.         .then(e => {
   
4.             //e就是图片的base64编码
   
5.             e;
   
6.         })
   
7.         .catch(err => {
   
8.             
   
9.         });

复制代码

注意看这里的nodeCore.value，其实就是节点，相当于传统的document.getElementById('xxx')，可以看到我们直接传入节点后就可以得到图片的base64编码了。真的是简单好用。