https://dituon.github.io/petpet-js/
对我另一个 Java后端项目 的前端实现, 模板引用自 Petpet
项目结构
.
├── src
│ ├── core
│ ├── app
│ └── test
├── editor
├── data
├── index.json
├── config.js
├── vite.config.js
└── package.json
src
core
: 程序核心app
: 前端页面test
: 核心测试
editor
: 模板编辑器data
: 模板数据index.json
: 模板数据索引config.js
: 网站默认配置
可修改 /config.js
或直接在 URL
中携带 GET
参数
key | type | description |
---|---|---|
server |
string[] URL[] |
URL中 使用 , 分割多个参数 |
lang |
"en-US" navigator.language |
支持语言参见 /src/app/lang |
template |
string |
默认模板 |
https://d2n.moe/petpet-js?server=https%3A%2F%2Fexample.com%2petpet
从
https://example.com/petpet
导入模板 (encodeURIComponent
)
https://d2n.moe/petpet-js?lang=zh-CN&template=osu
程序语言为
zh-CN
(简体中文), 默认模板为osu
git clone
npm i
npm run build
传入模板与背景构造
import {PetpetModel} from '/src/core'
const backgroundUrl = '/background.png' // 背景路径
const avatarUrl = '/avatar.png' // 头像路径, 支持GIF
const template = {
type: 'IMG',
avatar: [{
type: 'TO',
pos: [0, 0, 100, 100] //XYWH
}]
}
const backgroundImg = new Image() // 创建背景元素
backgroundImg.src = backgroundUrl
// 实例化模板对象, 传入背景列表
const petpetModel = new PetpetModel(template, [backgroundImg])
// 获取预览对象 (异步方法)
const viewer = await petpet.generate({
to: await fetch(avatarUrl).then(p => p.blob()) // 传入头像Blob, type与模板中对应
})
document.body.appendChild(viewer.canvas) // 添加预览画布
viewer.play() // 开始播放预览
读取现有模板
import {PetpetModel} from '/core'
const baseUrl = '/data/moe.d2n.petpet-js/tightly' // 模板目录
const templateUrl = baseUrl + '/data.json' // 模板JSON文件路径
const template = await fetch(templateUrl).then(p => p.json()) // 读取模板
// 实例化模板对象, 传入背景路径
// 程序会自动读取此路径下的 0.png, 1.png, 2.png...
const petpetModel = new PetpetModel(template, baseUrl)
// 获取头像Blob, 同上
const avatarBlob = await fetch('/avatar.gif').then(p => p.blob())
// 获取预览对象
const viewer = await petpet.generate({
to: avatarBlob
})
document.body.appendChild(viewer.canvas) // 添加预览画布
viewer.play() // 开始播放预览
保存图片
import {encodeGif} from '/src/core'
viewer.play() // 播放预览以缓存动画帧
// 获取渲染缓存后的所有动画帧
const frames = await viewer.getTextedFrames()
const blob = await encodeGif(frames, viewer.delay) // 合成GIF, 获取Blob
// 将GIF添加到网页
const img = new Image()
img.src = URL.createObjectURL(blob)
document.body.appendChild(img)
-
在网页目录部署Petpet生产环境
git clone -b gh-pages https://github.com/Dituon/petpet-js.git
-
在网页上集成Petpet仅需将一行代码插入到
HTML
中<script async type="text/javascript" src="/petpet/inject.js"></script>
-
可设置悬浮窗样式
:root { --petpet-icon-size: 4em; /*悬浮窗图标尺寸*/ --petpet-body-width: 30em; /*弹窗宽度*/ /* --petpet-icon-right: 8px; --petpet-icon-top: 8px; */ }
- 补充
README
-
Avatar.fit
-
Text.*
- 优化前端页面
- Typescript
- WebGL
- WebCodecs