文本美学: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

<!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

<!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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/636282.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用或非门构成的基本触发器

用或非门构成的基本触发器 电路组成 & 逻辑符号 注意&#xff1a;与用与非门构成的基本触发器相比&#xff0c;不仅 R 、 S R、S R、S 的几何位置不同&#xff0c;而且其上无反号&#xff0c;即高电平有效&#xff0c; Q Q Q 和 Q ‾ \overline{Q} Q​ 仍表示触发器的状…

最短路问题之Bellman-Ford,SPFA算法,例题 负环

Bellman-Ford算法&#xff1a; Bellman-Ford算法用于解决带有负权边的单源最短路径问题。其基本思想是通过不断地松弛边来逐步求解最短路径。算法的主要步骤如下&#xff1a; 初始化&#xff1a;将源点到各个顶点的距离初始化为无穷大&#xff0c;源点的距离初始化为0。重复更…

Linux使用Libevent库实现一个网页服务器---C语言程序

Web服务器 这一个库的实现 其他的知识都是这一个专栏里面的文章 实际使用 编译的时候需要有一个libevent库 gcc httpserv.c -o httpserv -levent实际使用的时候需要指定端口以及共享的目录 ./httpserv 80 .这一个函数会吧这一个文件夹下面的所有文件共享出去 实际的效果, 这…

关于电商独立站搭建中电商API数据采集接口的应用

搭建供应链系统时&#xff0c;您可能需要与电商平台进行集成&#xff0c;以实现订单管理、库存同步、物流跟踪等功能。以下是一些常见的电商接口&#xff0c;可以帮助您构建供应链系统&#xff1a; 1. **淘宝开放平台接口**&#xff1a;淘宝开放平台提供了丰富的接口&#xff…

【VSLAM】VINO-Mono安装部署与运行

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍VINO-Mono安装部署与运行。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更新不迷…

【超级简单】vscode进入服务器的docker容器

前提 1、已经运行docker容器 2、已经用vscode链接服务器 在vscode中安装的插件 Dev Containers docker 在容器中安装的依赖 yum install openssh-server yum install openssh-clientsvscode进入服务器的docker容器 找到自己的容器&#xff0c;右键点击&#xff0c;找到…

【状态压缩 并集查找 图论】2157. 字符串分组

本文涉及知识点 状态压缩 并集查找 图论 LeetCode2157. 字符串分组 给你一个下标从 0 开始的字符串数组 words 。每个字符串都只包含 小写英文字母 。words 中任意一个子串中&#xff0c;每个字母都至多只出现一次。 如果通过以下操作之一&#xff0c;我们可以从 s1 的字母集…

强固型工业电脑在称重系统+叉车电脑,称重量体扫码一体机,物流分拣线工作站行业应用

称重系统叉车电脑行业应用 背景介绍 在叉车上安装称重传感器&#xff0c;通过对举升压力的自动检测&#xff0c;将压力信号转换为电流或电压信号&#xff0c;经过A/D转换&#xff0c;使模拟信号变为数字信号&#xff0c;经微处理器进行数据处理后通过蓝牙、串口或者USB接口将称…

【AI自媒体制作】【AI工具】Midjourney中文站

Midjourney Midjourney中文站, MJ中文站 - 专业AI绘图网站 广场 绘画广场&#xff1a; 包含大量其他用户生成好的图片&#xff0c;可以自由保存。 视频广场&#xff1a; 普通用户目前只支持查看&#xff0c;无法下载 画夹广场&#xff1a; 有很多免费的画夹&#xff0c;比…

(1)认识人工智能

第一章 认识人工智能 引言 本人目前大三&#xff0c;双非一本的人工智能专业&#xff0c;代码能力不算太差&#xff0c;做过项目&#xff0c;也打了比赛&#xff0c;获了奖&#xff0c;但是走技术路线总会有否定自己的感觉&#xff0c;可能是感觉自己的才能没有在搞技术方面实…

Nacos注册中心实战

注册中心实战 1.快速使用1.1 版本选择1.2 父pom1.3 nacos-client pom1.4 nacos-client bootstrap.yaml配置 2.常用配置3.Nacos Server环境搭建3.1 单机模式启动3.1.1 解压&#xff0c;进入nacos目录 进入bin目录下&#xff0c;编辑startup.cmd脚本&#xff0c; 设置启动模式为单…

数据仓库作业五:第8章 关联规则挖掘

目录 第8章 关联规则挖掘作业题 第8章 关联规则挖掘 作业题 1、设4-项集 X { a , b , c , d } X\{a,b,c,d\} X{a,b,c,d}&#xff0c;试求出由 X X X 导出的所有关联规则。 解&#xff1a; 首先生成项集的所有非空真子集。这包括&#xff1a; { a } , { b } , { c } , {…