a1stok/img2svg-animation

# image → svg 动画 投入一张图片。获得会自动绘制的线条艺术。 [试用 → img2svg-animation.vercel.app](https://img2svg-animation.vercel.app/) ## 功能介绍 * 将任意图像转换为由你指定单色、并带有你指定背景色的 svg 线条艺术 * 为线条添加动画效果，使其在屏幕上依次自动绘制 * 包含描边控制（阈值、反转、曲线平滑度）和动画控制（持续时间、交错延迟、缓动、方向、循环、淡入填充） * 导出：复制 svg、下载 svg，或者下载一个将 svg、css 和动画代码打包在一起的 html 文件 ## 使用说明 * 在浏览器中打开应用 * 上传图像文件 * 根据需要调整描边设置 * 调整动画设置 * 观看动画预览，然后以你需要的格式导出 ## 研发初衷 大多数将图像转换为 svg 的工具只能提供静态图像。本项目将该图像作为动画的起点——这可能最适合那些希望为平淡的主视觉图增加动效的创意网站：作品集、案例研究、产品页面等类似场景。 ## 本地运行 ``` git clone https://github.com/a1stok/img2svg-animation cd img2svg-animation npm install npm run dev ``` ## 技术栈 * react router v7 — 图像转换在服务器端运行，因此 `potrace` 和 `sharp` 不会被发送到浏览器 * 代码按功能划分到不同文件夹（`uploader`、`potrace`、`animator`），每个文件夹都有各自的测试 * 在 `potrace` 将图像描边为 svg 线条之前，由 `sharp` 进行图像预处理（灰度化、对比度调整） * 使用 anime.js v4 在屏幕上绘制线条 * 使用 radix ui + tailwind v4 构建界面 * 使用 vitest 进行测试，husky + lint-staged 在每次提交前执行检查 欢迎提交 issue 和 pr。 ## 许可证 MIT

标签：Potrace, React, Sharp, SVG动画, Syscalls, 创意设计, 图像处理, 自动化攻击