TypeScript工具站

stream deck gif splitter — TypeScript 工具站模板

作者 SaschaWebDev

浏览器端将GIF或图片切分为Stream Deck按键贴图的实用工具站，支持多设备预设与一键导出。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。本截图因高度限制未包含整页。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

支持 6 种 Stream Deck 设备预设，自动匹配按键尺寸与间距

提供裁剪位置、循环时长、自定义网格等精细控制选项

可导出 ZIP 贴图包、.streamDeckProfile 配置文件及屏保壁纸

集成 GIPHY 搜索，无需离开页面即可获取素材

纯浏览器端处理，文件不上传，支持离线重复使用

模板详细介绍

Stream Deck GIF Splitter 是一个面向 Elgato Stream Deck 用户的在线工具站，核心功能是把任意 GIF 或静态图片切割成适配不同型号设备按键的贴图，并生成无缝动画背景或图片壁纸。项目采用 React 19、TypeScript 5.9 和 Vite 7 构建，视频处理依赖 FFmpeg.wasm，全部在浏览器本地完成，无需上传文件或注册账号。界面围绕文件上传、设备选择、裁剪预览和结果导出展开，交互流程清晰，适合作为文件处理类工具站的界面与交互参考。

功能上，它内置了 Stream Deck MK.2、XL、Mini、+、Neo 和 + XL 六种设备预设，能自动计算按键尺寸与间距。除了基础切割，还提供自定义裁剪位置、循环裁剪、自定义网格布局等选项，并支持从 GIPHY 直接搜索素材。导出方式包括 ZIP 打包的编号贴图、可直接安装的 .streamDeckProfile 文件，以及用于屏保的图片壁纸。FFmpeg 在首次加载后缓存，后续访问可离线使用，隐私保护是它的一个明确卖点。

需要留意的是，项目当前仅有 TypeScript 技术栈记录，README 未说明是否已接入真实后端，所有处理均依赖浏览器端 FFmpeg，因此对设备性能有一定要求。在线演示地址为 streamdeckgif.com，但生产环境的稳定性与维护状态需自行验证。如果你需要的是一个纯前端、注重隐私的图片处理工具模板，这个项目值得研究；若要直接部署到生产，建议先检查依赖的 GIPHY API 密钥配置及 FFmpeg 加载策略。

有在线演示在线工具文件处理

适合你的项目吗？

适用场景

为 Stream Deck 制作个性化动画按键背景或壁纸
作为文件处理工具站的界面与交互参考模板
学习 React 19 与 FFmpeg.wasm 在浏览器端处理 GIF 的实现

适合人群

Stream Deck 用户
前端开发者
工具站开发者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
克隆仓库后运行 npm install 安装依赖，使用 npm run dev 启动开发服务器。
2
需准备 GIPHY API 密钥以启用搜索功能，并确认 Node.js 版本满足要求。

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

MIT许可证允许免费使用、复制、修改、合并、发布、分发、再许可和销售软件，仅需保留版权与许可声明。

使用时需要遵守

保留原作者版权声明和 MIT 许可证声明。
在软件的所有副本或实质性部分中包含上述版权声明和本许可声明

额外费用与待核对事项

README未明确说明演示素材（如GIPHY内容）的授权范围

查看原文依据

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software
许可证原文