文本美学:text-image打造视觉吸引力

当我最近浏览 GitHub 时,偶然发现了一个项目,它能够将文字、图片和视频转化为文本,我觉得非常有趣。于是我就花了一些时间了解了一下,发现它的使用也非常简单方便。今天我打算和家人们分享这个发现。

项目介绍

话不多说,我们先看下作者的demo效果:

_20240420194201.jpg

text-image可以将文字、图片、视频进行「文本化」

只需要通过简单的配置即可使用。

虽然这个项目star数很少,但确实是一个很有意思的项目,使用起来很简单的项目。

_20240420194537.jpg

github地址:https://github.com/Sunny-117/text-image

我也是使用这个项目做了一个简单的web页面,感兴趣的家人可以使用看下效果:

web地址:http://h5.xiuji.mynatapp.cc/text-image/

_20240420211509.jpg

项目使用

这个项目使用起来相对简单,只需按作者的文档使用即可,虽然我前端属于小白的水平,但还是在ai的帮助下做了一个简单的html页面,如果有家人需要的话可以私信我,我发下文件。下边我们就介绍下:

  • 文字「文本化」

先看效果:

_20240420195701.jpg

我们在这儿是将配置的一些参数在页面上做了一个可配置的表单,方便我们配置。

家人们想自己尝试的话可以试下以下这个demo。

demo.html

xml 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>
  <canvas id="demo"></canvas>
  <script src="http://h5.xiuji.mynatapp.cc/text-image/text-image.iife.js"></script>
  <script>
    textImage.createTextImage({
      canvas: document.getElementById('demo'),
      replaceText: '123',
      source: {
        text: '修己xj',
      },
    });
  </script>
</body>
</html>
  • 图片「文本化」

_20240420200651.jpg

demo.html

xml 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>
  <canvas id="demo"></canvas>
  <script src="http://h5.xiuji.mynatapp.cc/text-image/text-image.iife.js"></script>
  <script>
    textImage.createTextImage({
      canvas: document.getElementById('demo'),
      raduis: 7,
      isGray: true,
      source: {
        img: './assets/1.png',
      },
    });
  </script>
</body>

</html>
  • 视频「文本化」

1.gif

demo.html

xml 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>
  <canvas id="demo"></canvas>
  <script src="http://h5.xiuji.mynatapp.cc/text-image/text-image.iife.js"></script>

  <script>
    textImage.createTextImage({
      canvas: document.getElementById('demo'),
      raduis: 8,
      isGray: true,
      source: {
        video: './assets/1.mp4',
        height: 700,
      },
    });
  </script>
</body>

</html>

需要注意的是:作者在项目中提供的视频的demo这个属性值有错误,我们需要改正后方可正常显示:

_20240420211124.jpg

总结

text-image 是一个强大的前端工具,可以帮助用户快速、轻松地将文本、图片、视频转换成文本化的图片,增强文本内容的表现力和吸引力。

相关推荐
Devil枫8 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦42 分钟前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子1 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享2 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL4 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1115 小时前
css实现div被图片撑开
前端·css
薛一半5 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js