chore(ci): blog sync

Author: coderPerseus

data/blog/post-32.mdx

@@ -0,0 +1,130 @@
+---
+title: 喜欢土味视频，但是不好意思看，于是我专门做了个网站
+date: 2024-12-08T17:27:33Z
+slug: post-32
+author: chaseFunny：https://github.com/chaseFunny
+tags: ["AI","产品"]
+---
+
+网站地址：https://ascii.luckysnail.cn/
+
+最近刷抖音，发现了一个叫“青海摇”的舞蹈视频，看第一遍的时候觉得好土，感紧划走，但是这个舞蹈视频深深的留在了我的脑海里，于是我偷偷又看了一遍，结果发现人家靠这个舞蹈赚麻了，想起了评论区的一句话：“一开始以为人家是一个笑话，最后发现我才是那个笑话”，最搞笑的是人家现在已经在解决就业问题了，但是要求是：学历最高不得超过大专（dog），哈哈哈哈，本科成案底啦！看了一会后，我想能不能做一个字符版的，刚好最近 Cursor 写代码嘎嘎快，说干就干
+
+对了，你如果还不知道 cursor，先看这两个文章了解 cursor，它已经改变了编程游戏规则，拥抱它吧！
+
+1. cursor 使用经验：https://www.luckysnail.cn/posts/post-27
+2. corsor 带来全新的编程体验：https://github.com/coderPerseus/blog/issues/31 
+
+## 需求分析
+
+随便找一个我之前写的项目模板：https://github.com/axin-s-Template/Nextjs-Boilerplate，先不急写代码，先分析一下需求 ：
+
+1. 一个上传按钮，支持上传图片、视频
+2. 把图片转为 ASCII 码
+
+完了，就这么简单
+
+## 开发
+
+我们按照开发顺序来进行开发
+
+1）上传按钮组件开发
+
+这里就使用 cursor 的 cpmposer 能力，让他帮我们开发，我们只需要告诉清楚我们的需求，我的提示词
+
+```bash
+开发上传组件，上传组件支持接受上传本地的图片和视频，不支持 gif，上传成功，返回上传成功内容，给父组件转为 ASCII，尽可能使用 shadui/cn 组件，页面简单美观
+```
+
+开发完成，我们去验证，可能需要微调一下
+
+2）开发文件转  ASCII 的功能
+
+```bash
+现在开发 ASCII 预览功能，要求：
+1. 减少 css 书写，简单美观，尽可能使用 shadui/cn 组件
+2. 播放，暂停，重新播放，调整ASCII 的密度（如果不能实现就不做），展示原素材
+3. 页面上下结构，上面的操作按钮，下面是内容预览，左边是原内容，右边是ASCII，
+4. 下面是一个中间可以调整宽度的盒子，也就是可以通过中间的调整条来调整原内容和 ASCII 内容占据的位置，
+5. 要限制内容展示的宽高，让展示的宽高合适
+```
+
+它会给我们一个初版，我们进行微调
+
+文件转为 ASCII 的核心逻辑也很简单：
+
+1. 通过 canvas 获取视频每一帧的图片，通过 drawImage 绘制到 canvas 上
+2. 通过 canvas 的 getImageData 获取图片的像素点数据
+3. 通过像素点数据，得到图像宽度，高度，根据宽度，高度计算图片的灰度值，
+4. 根据灰度值计算函数，得到对应的 ascii 字符
+5. 将获取到的 ascii 字符添加到 div 中显示
+
+图片和视频的逻辑有一点点区别，具体看参考中的源码
+
+3）开发全局的 header 和 footer ，关于页面
+
+网站到这里还是很简陋的，我们可以让网站看起来像个样子，继续向 AI 提问：
+
+```bash
+参考优秀的网站做一个全局 header 组件，
+左边是 logo ，右边是关于按钮，关于里面也就是一个内容展示，介绍这个项目，说明图片和视频是如何转为 ASCII 的原理，页面简单美观
+然后再开发一个 全局 footer 组件，用来放备案号和友链
+```
+
+然后，我们会得到对应的页面，我们进行微调
+
+4）作品集
+
+感觉网站到这里还是缺点什么，我想是不是可以搞一个作品集，让用户进来就可以直接在这里查看一些视频和图片的效果
+
+于是我继续提问题：
+
+```bash
+根据这个数据结构开发 作品集合列表页面，作品项展示视频封面，标题描述
+1. 简单美观
+2. 尽可能使用 shadui/cn 组件，完成页面
+3. 点击视频封面进入，详情页面（新开发），使用 @Preview.tsx  来展示，详情页面上面是 标题描述，下面展示预览组件，注意这个页面标题和描述需要修改
+4. 代码符合组件化，模块化开发规范
+```
+
+这里的数据结构是这样的：
+
+```ts
+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'
+	},
+];
+```
+
+然后我们微调一下页面就好了，最后我们看一下效果：
+
+![image-20241209010652871](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20241209010652871.png)
+
+![image-20241209011619952](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20241209011619952.png)
+
+![image-20241209010621319](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20241209010621319.png)
+
+一个简单的图片，视频转 ASCII 就实现了
+
+AI 真的大大缩短了想法变成现实的时间，只要肯动手，会越来越快
+
+## 参考
+
+1. 源码：https://github.com/chaseFunny/imageAndVideo2Ascii
+
+---
+此文自动发布于：<a href="https://github.com/coderPerseus/blog/issues/32" target="_blank">github issues</a>