ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Sekai Stickers 一键复制/下载贴纸 PNG:st.ayaka.one 贴纸导出功能详解(附尺寸与命名规范)

Sekai Stickers 一键复制/下载贴纸 PNG:st.ayaka.one 贴纸导出功能详解(附尺寸与命名规范) Sekai Stickers 一键复制/下载贴纸 PNGst.ayaka.one 贴纸导出功能详解附尺寸与命名规范【免费下载链接】sekai-stickersProject Sekai sticker maker项目地址: https://gitcode.com/gh_mirrors/se/sekai-stickersSekai Stickersst.ayaka.one是一款免费在线的《世界计划 彩色舞台 feat. 初音未来》(Project Sekai) 贴纸制作工具。选好角色后它会自动套上角色主题色描边文字你只需点一下copy就能把贴纸 PNG 复制进剪贴板或点download一键下载——内置359 张官方角色贴纸随你挑选。本文将详解它的贴纸导出流程、296×256 尺寸规范以及自动生成的文件命名规则。Sekai Stickers 是什么功能一览 打开 st.ayaka.one界面左侧是296×256 的画布右侧是一排滑块和两个核心按钮控件作用横/竖滑块拖动文字在贴纸中的水平、垂直位置Rotate 滑块文字旋转角度-10° ~ 10°Font size 滑块字号大小10 ~ 100pxSpacing 滑块多行文字的行间距Curve 开关弧形文字Beta 实验功能Pick character打开角色选择器搜索并切换贴纸copy / download把成品贴纸复制到剪贴板 / 下载为 PNG顶部还会显示一个全局计数器Total Stickers you made统计全站累计制作的贴纸数量。 除了网页版Sekai Stickers 同时提供同名 Discord Bot可以在群里直接生成贴纸。贴纸尺寸规范296×256 画布详解 所有贴纸都在一个固定尺寸的画布上绘制。在 src/App.jsx 中绘制函数会先把画布锁定为ctx.canvas.width 296 ctx.canvas.height 256之后角色立绘会等比缩放并居中放进画布取横向/纵向缩放比中较小的那个避免变形最后叠加文字。因此导出尺寸固定为 296×256 像素横版偏方接近 16:9 的常规比例你调整滑块只改变文字位置不会改变画布总尺寸角色立绘来自 public/img/ 目录按角色名/角色名_编号.png组织例如 public/img/Miku/。想把贴纸发进聊天软件头像、表情包或论坛贴图这个尺寸都足够清晰。贴纸 PNG 命名规范自动生成的文件名 ️点download后文件名不是随意的而是按统一规则自动生成。核心逻辑在 src/App.jsxlink.download ${角色名}_st.ayaka.one.png也就是{角色名}_st.ayaka.one.png。以角色 Airi 01 为例导出的文件名为角色配置名下载文件名Airi 01Airi 01_st.ayaka.one.pngMiku 04Miku 04_st.ayaka.one.pngKAITO 07KAITO 07_st.ayaka.one.png规则拆解前缀是characters.json里的name字段角色名 编号中缀固定为站点标识st.ayaka.one方便一眼认出来源后缀固定为.png。角色名、编号、主题色等元数据全部记录在 src/characters.json 中共 359 条配置。一键复制贴纸到剪贴板 这是本项目最顺手的功能。点击copy按钮后会调用浏览器的剪贴板 API把画布直接转成image/png写入剪贴板。实现位于 src/App.jsxawait navigator.clipboard.write([ new ClipboardItem({ image/png: b64toBlob(...) }) ])配套的小函数b64toBlob负责把 Base64 转回二进制BlobMIME 类型image/png。使用小贴士复制成功后直接去聊天窗口Ctrl VMac 为⌘ V即可粘贴贴纸需要页面处于聚焦/活动状态否则部分浏览器会拦截剪贴板写入现代浏览器Chrome / Edge / Safari均可正常使用。一键下载贴纸 PNG 文件 ⬇️如果你想要一个本地文件而不是粘贴到聊天里点download即可。流程在 src/App.jsx取出页面里的canvas元素用canvas.toDataURL()把画布导出为 PNG 数据 URL创建一个临时a设置download为规范文件名后触发点击浏览器即开始下载。每次复制或下载都会调用 src/utils/log.js 上报一条download/copy记录用于驱动顶部那个全站已制作贴纸数计数器。359 张角色贴纸库按名字快速搜索 角色选择器 src/components/Picker.jsx 内置了一个可搜索的网格覆盖20 多位《世界计划》角色如 Miku、Rin、Len、KAITO、Kanade、Airi、An、Ena、Emu 等每位角色含多张不同编号的立绘合计359 张贴纸素材顶部搜索框支持角色名、编号模糊匹配输入 Miku 即可快速定位。画布由 src/components/Canvas.jsx 负责渲染绘制回调每次状态变化时重新执行所见即所得。贴纸风格角色主题色描边文字 ✒️Sekai Stickers 的灵魂是自动加上的文字效果规则同样在 src/App.jsx填充色跟随角色主题色characters[character].color如 Airi 为#FB8AAC粉色白色描边strokeStyle white、线宽 9保证文字在任何背景上都清晰字体优先使用 YurukaStd回退到尚手方糖体源文件见 src/fonts/YurukaStd.woff2 与 src/fonts/ShangShouFangTangTi.woff2每位角色在characters.json里都预置了一段默认文案如 keep up、nice to meet ya换角色时自动带入也可自由改成自己的文字。本地部署克隆仓库并运行 如果你想二次开发或跑一份自己的实例可以克隆仓库后本地运行git clone https://gitcode.com/gh_mirrors/se/sekai-stickers cd sekai-stickers npm install npm start技术栈为 React Material UI Canvas构建产物输出到 public/。项目基于 MIT 协议见 LICENCE。常见问题FAQ问复制后没反应答请确保页面是活动状态并用支持 Clipboard API 的现代浏览器部分浏览器需要在 HTTPS 或 localhost 下才允许写剪贴板。问能自定义贴纸尺寸吗答画布尺寸在代码中固定为 296×256如需其他尺寸可修改 src/App.jsx 中的canvas.width/height。问文字颜色能改吗答文字颜色自动跟随角色主题色并带白色描边属于内置风格想改全局外观可调整上述绘制回调中的strokeStyle与fillStyle。Sekai Stickers 把选角色 → 调文字 → 导出三步压缩成了两次点击copy直接进剪贴板、download直接存文件配合 296×256 的规范尺寸与{角色名}_st.ayaka.one.png的统一命名非常适合快速产出高质量的角色贴纸。快去 st.ayaka.one 做一张属于自己的 Sekai 贴纸吧【免费下载链接】sekai-stickersProject Sekai sticker maker项目地址: https://gitcode.com/gh_mirrors/se/sekai-stickers创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表