1回答

0收藏

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

前端 前端 32043 人阅读 | 1 人回复 | 2022-07-15

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

下载.png


探索玩法
通过标题我们大致知道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. onMounted(async () => {
  4.     domtoimage = await import('dom-to-image')
  5. })
  6. </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编码了。真的是简单好用。

分享到:
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则