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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

面试(05)————Redis篇

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

【GPTs分享】GPTs分享之Image Recreate | img2img​

简介 该GPT是一个专门用于图像编辑、重建和合并的工具。它通过详细的自动图像描述和生成&#xff0c;帮助用户从源图像中重现或修改图像。此工具设计用于为视障用户提供图像内容的详细描述&#xff0c;并生成全新的图像&#xff0c;以满足特定的视觉需求。 主要功能 \1. 图像…

Clion 2023.1.5 最新详细破解安装教程

CLion 最大的优点是跨平台&#xff0c;在Linux、Mac、Windows 上都可以运行。CLion 还同时支持 GCC、Clang、MSVC 这 3 种编译器&#xff0c;使用 CLion 编写程序&#xff0c;程序员可以根据需要随意切换使用的编译器。 第一步: 下载最新的 Clion 2023.1.5 版本安装包 我们先…

掌握字幕艺术:pysrt 库指南

文章目录 掌握字幕艺术&#xff1a;pysrt 库指南第一部分&#xff1a;背景介绍第二部分&#xff1a;库是什么&#xff1f;第三部分&#xff1a;如何安装这个库&#xff1f;第四部分&#xff1a;库函数使用方法第五部分&#xff1a;场景应用第六部分&#xff1a;常见Bug及解决方…

Hive基础3

一、表的分区 大数据开发数据量较大&#xff0c;在进行数据查询计算时&#xff0c;需要对数据进行拆分&#xff0c;提升的查询速度 1-1 单个分区 单个分区是创建单个目录 -- 创建表指定分区&#xff0c;对原始数据进行分区保存 create table new_tb_user(id int,name string,ag…

Linux嵌入式驱动开发-linux中断

文章目录 linux中断原理中断控制器GIC中断源分类 中断ID、中断线(中断号/中断源)中断ID中断线(中断号/中断源)MX6U中断源 上半部与下半部&#xff08;顶半部和底半部&#xff09;下半部实现机制linux软中断注册软中断触发软中断初始化软中断 taskletasklet_init&#xff1a;初始…

【AIGC】文本与音频生成引领行业革新

AIGC技术崛起 一、AIGC技术概述二、文本生成&#xff1a;结构化与创作型并进三、实例与代码解析四、音频生成&#xff1a;语音合成技术大放异彩五、结语 在科技的浪潮中&#xff0c;人工智能与大数据的结合不断推动着时代的进步。其中&#xff0c;AIGC&#xff08;Artificial I…

安居水站:水站经营秘籍:年入30万不是梦。水站创业指南。

在这个快节奏的社会里&#xff0c;初创企业家们总是在寻找一条明路&#xff0c;以在竞争激烈的市场中立足。为了帮助他们更好地实现这一目标&#xff0c;我根据经验决定制定一份水站经营指导手册。这份手册将详细阐述如何从零起步&#xff0c;如何运营&#xff0c;如何进行市场…

智慧浪潮下的产业园区:解读智慧化转型如何打造高效、绿色、安全的新产业高地

随着信息技术的飞速发展&#xff0c;智慧化转型已经成为产业园区发展的重要趋势。在智慧浪潮的推动下&#xff0c;产业园区通过集成应用物联网、大数据、云计算、人工智能等先进技术手段&#xff0c;实现园区的智慧化、高效化、绿色化和安全化&#xff0c;从而打造成为新产业高…

x-cmd ai | x openai - 用于发送 openai API 请求,以及与 ChatGPT 对话

介绍 Openai 模块是 Openai 大模型 Chatgpt 3 和 ChatGPT 4 命令行实现。x-cmd 提供了多个不同平台间多种 AI 大模型的调用能力。无论是本地模型还是 Web 服务上的模型&#xff0c;用户都可以在不同的 AI 大模型间直接无缝切换&#xff0c;并能把之前的聊天记录发送给新的大模…

【PCL】教程conditional_euclidean_clustering 对输入的点云数据进行条件欧式聚类分析...

[done, 3349.09 ms : 19553780 points] Available dimensions: x y z intensity 源点云 Statues_4.pcd 不同条件函数output.pcd 【按5切换到强度通道可视化】 终端输出&#xff1a; Loading... >> Done: 1200.46 ms, 19553780 points Downsampling... >> Done: 411…

【JavaWeb】Day50.Mybatis的XML配置文件

XML配置文件规范 使用Mybatis的注解方式&#xff0c;主要是来完成一些简单的增删改查功能。如果需要实现复杂的SQL功能&#xff0c;建议使用XML来配置映射语句&#xff0c;也就是将SQL语句写在XML配置文件中。 在Mybatis中使用XML映射文件方式开发&#xff0c;需要符合一定的规…

Nginx解决跨域访问难题:轻松实现跨域资源共享!

点击下方关注我&#xff0c;然后右上角点击...“设为星标”&#xff0c;就能第一时间收到更新推送啦~~~ 跨域资源共享&#xff08;CORS&#xff0c;Cross-Origin Resource Sharing&#xff09;是一种网络浏览器的安全功能&#xff0c;它限制了一个源&#xff08;域、协议和端口…

学习空间转换-3D转换

1.什么是空间转换&#xff1f; 使用的是transform属性实现元素在空间内的位移&#xff0c;旋转&#xff0c;缩放等效果。 空间&#xff1a;是从坐标轴角度定义的。x,y,z三条坐标轴构成的一个立体空间&#xff0c;Z轴位置与视线方向相同。 所以空间转换也被叫做3D转换 语法&a…

docker+awk=无敌?!

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 dockerawk无敌&#xff1f;&#xff01; 前言需求分析容器间通过容器名称访问脚本实现一键部署命令解释 前言 当今软件开发的世界充满了数据&#xff0c;而 Docker 则是许多开发者首选的容器化解决方…

嵌入式学习55-ARM4(ADC和I²C)

1、什么是ADC,模拟量和数字量有什么特点&#xff1f; ADC&#xff1a; …

GhostNetV3:探索紧凑型模型的训练策略学习笔记

代码地址&#xff08;coming soon&#xff09;&#xff1a;Efficient-AI-Backbones/ghostnetv3_pytorch at master huawei-noah/Efficient-AI-Backbones GitHub 论文地址&#xff1a;2404.11202v1.pdf (arxiv.org) 紧凑型神经网络是专门为边缘设备上的应用而设计的&#xff0…

linux离线安装mysql

一、下载mysql 地址&#xff1a;MySQL 这里选择64为还是32为要根据操作系统来 uname -m 二、上传解压配置mysql 使用root账户登录linux服务器&#xff0c;在opt文件下创建mysql文件夹 cd /opt sudo mkdir mysql 使用Xftp上传mysql压缩包到此文件夹下(自行决定路径) cd mysql/…

Unity Editor编辑器扩展之创建脚本

前言 既然你看到这篇文章了&#xff0c;你是否也有需要使用代码创建脚本的需求&#xff1f;使用编辑器扩展工具根据不同的表格或者新增的内容去创建你想要的脚本。如果不使用工具&#xff0c;那么你只能不断去修改某个脚本&#xff0c;这项工作既繁琐也浪费时间。这个时候作为程…

蓝桥杯第十五界软件测试线下省赛题目分析及解决

PS 需要第十五界蓝桥杯被测系统或者功能测试模板、单元测试被测代码、自动化测试被测代码请加&#x1f427;:1940787338 备注&#xff1a;15界蓝桥杯省赛软件测试 题目1&#xff1a;功能测试 题目描述 ​ 某物流公司的货运收费标准根据重量、距离和节假日三个因素来确定。如…