喜欢土味视频，但是不好意思看，于是我专门做了个网站

2024-12-09

2 分钟

AI产品

网站地址：https://ascii.luckysnail.cn/

最近刷抖音，发现了一个叫“青海摇”的舞蹈视频，看第一遍的时候觉得好土，感紧划走，但是这个舞蹈视频深深的留在了我的脑海里，于是我偷偷又看了一遍，结果发现人家靠这个舞蹈赚麻了，想起了评论区的一句话：“一开始以为人家是一个笑话，最后发现我才是那个笑话”，最搞笑的是人家现在已经在解决就业问题了，但是要求是：学历最高不得超过大专（dog），哈哈哈哈，本科成案底啦！看了一会后，我想能不能做一个字符版的，刚好最近 Cursor 写代码嘎嘎快，说干就干

对了，你如果还不知道 cursor，先看这两个文章了解 cursor，它已经改变了编程游戏规则，拥抱它吧！

cursor 使用经验：https://www.luckysnail.cn/posts/post-27
corsor 带来全新的编程体验：https://github.com/coderPerseus/blog/issues/31

需求分析

随便找一个我之前写的项目模板：https://github.com/axin-s-Template/Nextjs-Boilerplate，先不急写代码，先分析一下需求：

一个上传按钮，支持上传图片、视频
把图片转为 ASCII 码

完了，就这么简单

开发

我们按照开发顺序来进行开发

1）上传按钮组件开发

这里就使用 cursor 的 cpmposer 能力，让他帮我们开发，我们只需要告诉清楚我们的需求，我的提示词

开发上传组件，上传组件支持接受上传本地的图片和视频，不支持 gif，上传成功，返回上传成功内容，给父组件转为 ASCII，尽可能使用 shadui/cn 组件，页面简单美观

开发完成，我们去验证，可能需要微调一下

2）开发文件转 ASCII 的功能

现在开发 ASCII 预览功能，要求：
1. 减少 css 书写，简单美观，尽可能使用 shadui/cn 组件
2. 播放，暂停，重新播放，调整ASCII 的密度（如果不能实现就不做），展示原素材
3. 页面上下结构，上面的操作按钮，下面是内容预览，左边是原内容，右边是ASCII，
4. 下面是一个中间可以调整宽度的盒子，也就是可以通过中间的调整条来调整原内容和 ASCII 内容占据的位置，
5. 要限制内容展示的宽高，让展示的宽高合适

它会给我们一个初版，我们进行微调

文件转为 ASCII 的核心逻辑也很简单：

通过 canvas 获取视频每一帧的图片，通过 drawImage 绘制到 canvas 上
通过 canvas 的 getImageData 获取图片的像素点数据
通过像素点数据，得到图像宽度，高度，根据宽度，高度计算图片的灰度值，
根据灰度值计算函数，得到对应的 ascii 字符
将获取到的 ascii 字符添加到 div 中显示

图片和视频的逻辑有一点点区别，具体看参考中的源码

3）开发全局的 header 和 footer ，关于页面

网站到这里还是很简陋的，我们可以让网站看起来像个样子，继续向 AI 提问：

参考优秀的网站做一个全局 header 组件，
左边是 logo ，右边是关于按钮，关于里面也就是一个内容展示，介绍这个项目，说明图片和视频是如何转为 ASCII 的原理，页面简单美观
然后再开发一个 全局 footer 组件，用来放备案号和友链

然后，我们会得到对应的页面，我们进行微调

4）作品集

感觉网站到这里还是缺点什么，我想是不是可以搞一个作品集，让用户进来就可以直接在这里查看一些视频和图片的效果

于是我继续提问题：

根据这个数据结构开发 作品集合列表页面，作品项展示视频封面，标题描述
1. 简单美观
2. 尽可能使用 shadui/cn 组件，完成页面
3. 点击视频封面进入，详情页面（新开发），使用 @Preview.tsx  来展示，详情页面上面是 标题描述，下面展示预览组件，注意这个页面标题和描述需要修改
4. 代码符合组件化，模块化开发规范

这里的数据结构是这样的：

import { ShowItem } from '@/types/show';
const baseUrl = 'https://xxx.com/';
export const showList: ShowItem[] = [
	{
		id: 1,
		title: '小黑子',
		description: '来源于网络的蔡徐坤舞蹈视频',
		path: baseUrl + 'xiaoheizi.mp4',
		type: 'video'
	},
	{
		id: 3,
		title: '海绵宝宝',
		description: '动漫海绵宝宝中的主角',
		path: baseUrl + 'haimianbaobao.webp',
		type: 'image'
	},
];

然后我们微调一下页面就好了，最后我们看一下效果：

一个简单的图片，视频转 ASCII 就实现了

AI 真的大大缩短了想法变成现实的时间，只要肯动手，会越来越快

参考

源码：https://github.com/chaseFunny/imageAndVideo2Ascii

此文自动发布于：github issues