分享一个超好用的前端依赖库:dom-to-image
前端
46588 人阅读
|
1 人回复
|
2022-07-15
|
看到标题中的依赖库名称,应该就明白是什么意思了。“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进行安装依赖:
安装完之后,来看一下Nuxt3的小技巧,在nuxt3中,为了不将这个插件打包进entry-xxx.mjs里面(这个是公共的,每个页面都会加载),我们就需要进行动态加载了:
- <script setup lang="ts">
- let domtoimage;
- onMounted(async () => {
- domtoimage = await import('dom-to-image')
- })
- </script>
复制代码 这样我们就动态的将dom-to-image引入进来了,接下来看下使用方法:
- domtoimage
- .toPng(nodeCore.value)
- .then(e => {
- //e就是图片的base64编码
- e;
- })
- .catch(err => {
-
- });
复制代码 注意看这里的nodeCore.value,其实就是节点,相当于传统的document.getElementById('xxx'),可以看到我们直接传入节点后就可以得到图片的base64编码了。真的是简单好用。
|
|
|
|
|
|