一个小时，我用Windsurf开发了一个视频转GIF工具 发表于: 2024.12.18 | 分类于: 前端 | 阅读次数: 179 ## 背景 前段时间，看别人文章底部有个长按加公众号的动效，动效左边是一个二维码，右边是一个指纹，有一个光波一直循环扫描指纹。 ### 实现思路： - 方案一、**用代码来实现**。估摸着公众号文章编辑器里面可能不能插入代码。(没试过，靠自己猜测pass掉) - 方案二、**用SVG格式的动效**。我其实不会做SVG，原因是想测试一下Cursor能不能生成SVG格式的动效，所以才有这个方案。使用了一下，发现真的可以，生成的还不错。【文章结尾会给出SVG源码下载地址，改一下里面二维码的url地址，就能换成自己的】（最后搞完了，微信不支持SVG插入文章。。。） - 方案三、**用GIF格式的动图**。（虽然方案二失败了，但是动效有了，直接录屏，然后视频转GIF） 接着开始找录屏工具和视频转GIF工具，录屏发现QQ有录屏（暴露年龄了），视频转GIF工具找了一下，要不是收费，要不就是需要把视频数据上传到别人那去，作为一个不喜欢暴露隐私，以及数据的程序员，比较排斥这种，最后下了个剪映（转换的时候发现分辨率高的要会员。。。不过低分辨率的也能凑合用） `那么我的需求就有了，能不能做一个视频转GIF的工具？` ## 演示效果 > 该视频转换GIF工具已上传Github上开源，源码地址详见文章底部 (`注：超过1分钟的视频，建议帧/秒选1，画质1，不要问我怎么知道的！后面可能需要添加压缩功能。。。`)  ## VIDEO TO GIF 简介 > 一键转换视频至GIF，所有视频转换核心功能全部由`Windsurf，Claude3.5Sonnet`模型生成，功能总耗时大概一个小时，页面样式后续由我本人调整（不会UI,参考了Adobe设计风格），找素材以及UI样式调整大概耗时一天左右。（logo，图标都是网上找来的，如有侵权，请及时告知） ### 优势： **1、免费使用** <br/> **2、支持所有视频格式** <br/> **3、数据安全，视频不会离开你的浏览器** <br/> **4、不限视频大小，时长** <br/> **5、指定视频中某个转换区域** <br/> **6、视频自定义裁剪** <br/> ### 不足： **1、视频越大转换越时间越久** <br/> **2、目前移动端操作有问题** （Windsurf，Claude3.5Sonnet免费额度已用完，后续有时间再做适配） <br/> **3、格式可能不兼容导致的问题** <br/> **4、可能有BUG** <br/> ## 操作步骤 1、点击或拖动视频至选择框  2、点击左上角的剪刀，选择指定视频转换区域  3、拖动左右裁剪，剪切掉不需要的开头和结尾  4、设置帧/秒，画质 （注：帧/秒，每秒钟帧数越多，所显示的动作就会越流畅！）  5、点击 -> 开始转换 GIF (注：1、等待进度条完成后即可下载，视频越长，帧数越多，画质越高，转换越慢。 2、转换中不要刷新或者关闭浏览器，该工具是基于浏览器操作，刷新或者关闭会导致失败） 6、下载，点击 -> 【下载 GIF】 按钮  ## 地址 使用地址：https://video.luckday.cn <br /> 源码地址：https://github.com/luckday-cn/VideoToGif <br /> 长按关注SVG动效地址：https://github.com/luckday-cn/VideoToGif/mian/img/qw.svg <br /> ## END 开发这个转换工具，以及使用Cursor，Windsurf，都是在摸索学习，提升自己，接受并使用AI给自己带来的便利，争取让自己这个88年的老家伙，不被后来者干掉。哈哈，加油！！！ 关于使用上的任何问题，都可以关注我的公众号，私信我，或者添加我的微信，随时咨询我。 最后说一句，我们技术团队已经全员使用Cursor了，国产的编码工具需要加油了！