文本美学: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.mzph.cn/bicheng/1200.shtml

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

相关文章

4.2冰达机器人:视觉实例-机器人视觉循线、视觉实例-调整循线颜色

4.2.10a视觉实例-机器人视觉循线 本节内容演示一个机器人视觉的视觉循线实例 准备工作&#xff1a;布置一块区域作为循线场所&#xff0c;如下图所示。用蓝色胶带在地面贴一条路线&#xff08;机器人极限转弯半径0.5m&#xff0c;不要贴得过于曲折&#xff09;&#xff0c;将…

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

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

c#多线程 使用lock锁

使用 lock 关键字可以确保在同一时刻只有一个线程可以访问被锁定的代码块&#xff0c;从而避免线程资源竞争。以下是修改后的示例代码&#xff1a; using System; using System.Threading;class Program {static int sharedNumber 0;static int iterations 1000000;static o…

从零开始学习写Shell脚本【第二期,语法说明-变量】

从零开始学习写Shell脚本【第一期&#xff0c;语法说明-变量】 Shell脚本的语法包括变量、控制结构、函数等&#xff1a; 变量的定义&#xff1a;使用符号进行赋值&#xff0c;不需要指定类型。变量的引用&#xff1a;使用$符号加上变量名。例子 # 变量定义 name"John&…

安卓手机APP开发__媒体开发部分__检索元数据

安卓手机APP开发__媒体开发部分__检索元数据 目录 在播放期间 没有播放时 动作照片 在播放期间 媒体的元数据在播放期间能以多种方式来检索。最正常不过的方法 是监听Player.Listener这个监听器的方法onMediaMetadataChanged的事件&#xff0c; 这将提供一个可以使用的Med…

苍穹外卖day1--开发环境搭建

整体结构 前端&#xff1a;管理端&#xff08;Web&#xff09; 用户端&#xff08;小程序&#xff09; 后端&#xff1a;后端服务&#xff08;Java&#xff09; 前端工程基于ngnix运行 启动nginx&#xff1a;双击nginx.exe即可启动nginx服务&#xff0c;访问端口号为80 后端…

Xinstall:实现注册后自动绑定,提升用户体验

在移动互联网时代&#xff0c;App的注册与绑定流程对于用户体验至关重要。繁琐的注册步骤和手动绑定操作往往会让用户望而却步&#xff0c;导致用户流失。为了解决这一问题&#xff0c;Xinstall品牌推出了注册后自动绑定功能&#xff0c;极大提升了用户体验。 Xinstall的自动…

C#语言进阶(一)—委托 第一篇

总目录 C# 语法总目录 系列链接 C#语言进阶(一) 委托 第一篇 C#语言进阶(一) 委托 第二篇 委托 第一篇 委托 第一篇1. 基本用法2.委托作为方法参数3.多播委托 委托 第一篇 委托类似于CPP中的函数指针。它定义了一个方法类型&#xff0c;这个方法类型有返回类型和形参&…

用户的流失预测分析

项目背景 随着电信行业的持续发展&#xff0c;运营商们开始更加关注如何扩大他们的客户群体。研究表明&#xff0c;获取新客户所需的成本要远高于保留现有客户的成本。因此&#xff0c;在激烈的竞争中&#xff0c;保留现有客户成为了一个巨大的挑战。在电信行业中&#xff0c;…

再拓信创版图-Smartbi 与东方国信数据库完成兼容适配认证

近日&#xff0c;思迈特商业智能与数据分析软件 [简称&#xff1a;Smartbi Insight] V11与北京东方国信科技股份有限公司 &#xff08;以下简称东方国信&#xff09;CirroData-OLAP分布式数据库V2.14.1完成兼容性测试。经双方严格测试&#xff0c;两款产品能够达到通用兼容性要…

TBWeb开发版V3.2.6免授权无后门Chatgpt系统源码下载及详细安装教程

TBWeb系统是基于 NineAI 二开的可商业化 TB Web 应用&#xff08;免授权&#xff0c;无后门&#xff0c;非盗版&#xff0c;已整合前后端&#xff0c;支持快速部署&#xff09;。相比稳定版&#xff0c;开发版进度更快一些。前端改进&#xff1a;对话页UI重构&#xff0c;参考C…

数据可视化(六):Pandas爬取NBA球队排名、爬取历年中国人口数据、爬取中国大学排名、爬取sina股票数据、绘制精美函数图像

Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢我的博客的话&#xff0c;记得…

面试(05)————Redis篇

目录 一、项目中哪些地方使用了redis 问题一&#xff1a;发生了缓存穿透该怎么解决&#xff1f; 方案一&#xff1a;缓存空数据 方案二&#xff1a;布隆过滤器 模拟面试 问题二&#xff1a; 发生了缓存击穿该怎么解决&#xff1f; 方案一&#xff1a;互斥锁 方案二&#xff…

Python数据可视化:频率统计条形图countplot()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 Python数据可视化&#xff1a; 频率统计条形图 countplot() [太阳]选择题 请问关于以下代码表述正确的选项是&#xff1f; import seaborn as sns import matplotlib.pyplot as plt data { …

断言(Assertion)在IT技术中的确切含义— 基于四类典型场景的分析

当“断言”&#xff08;Assertion&#xff09;一词成为IT术语时&#xff0c;语义的混沌性和二义性也随之而生。那么&#xff0c;何为断言&#xff1f;断言何为&#xff1f;实际上&#xff0c;只需分析四种典型场景&#xff0c;确切答案和准确描述就将自然显现。 在SAML&#xf…

上海计算机学会2020年7月月赛C++丙组T2感应门

题目描述 感应门会在有人经过的时候自动打开&#xff0c;冷却 d 秒后自动关闭。如果有人在感应门打开的状态下通过&#xff0c;那么冷却时间会重置&#xff0c;重新冷却 d 秒后再关闭。 在一段时间内&#xff0c;有 n 个人陆续通过了感应门&#xff0c;他们通过感应门的时间点…

Scikit-Learn

机器学习中的重要角色 Scikit-Leran&#xff08;官网&#xff1a;https://scikit-learn.org/stable/&#xff09;&#xff0c;它是一个基于 Python 语言的机器学习算法库。Scikit-Learn 主要用 Python 语言开发&#xff0c;建立在 NumPy、Scipy 与 Matplotlib 之上&#xff0c;…

【python】使用python和selenium实现某平台自动化上传作品的全步骤

第一&#xff0c;我们需要下载python并安装 下载地址&#xff1a;https://www.python.org/downloads/release/python-3123/ 3.x版本的python自带pip工具&#xff0c;因此不需要额外下载。 ModuleNotFoundError: No module named seleniumpip用于下载python适用的各类模块&…

Proxy 代理

意图 为其它对象提供一种代理以控制这个对象的访问。 结构 Proxy保存一个引用使得代理可以访问实体&#xff1b;提供一个与Subject的接口相同的接口&#xff0c;使代理可以用来替代实体&#xff1b;控制实体的存取&#xff0c;并可能负责创建和删除它&#xff1b;其他功能依赖…

关于游戏IP的小讨论

大家好&#xff0c;我是阿赵。   我们平常玩的游戏&#xff0c;很多都是有知识产权(Intellectual Property,简称IP)的。比如游戏内容是某著名动漫、电视剧或者小说之类。阿赵我最近一年多以来&#xff0c;正在做一个日本著名动画IP的游戏。   这个日本动漫&#xff0c;在我…