推荐一个开源的H5海报编辑器

wsqy-poster-editor

一款面向移动端 H5 的海报编辑器 / 海报设计器,纯前端,操作简单,功能齐全。

🔗 Gitee :https://gitee.com/mosmos/wsqy-poster-editor/

🔗 Github :https://github.com/imooos/wsqy-poster-editor/

🔗 在线预览 :https://wsqy-poster-editor.pages.dev/

预览

软件架构

Vue 3 + TypeScript + <script setup>,组合式 API 风格
Vite 构建,vue-tsc 做类型检查
Pinia 作为文档状态单一真相源(单一 store poster,维护 elements、canvas、撤销/重做、选区)
Konva / vue-konva 负责画布渲染,直接消费 store 的 reactive 对象,自动响应式
idb-keyval 把整份文档写入 IndexedDB 实现草稿持久化
QRCode 生成二维码
@fontsource/* + 自研 utils/fontLoader 按需动态加载 Web 字体,首屏不打包字形
lucide-vue-next 提供图标

源码分层:

目录	职责
`src/views/`	顶层页面(单视图 `EditorView.vue`)
`src/components/`	UI 组件(`PosterCanvas`、`TopBar`/`BottomBar`、`PropertyPanel`/`LayerPanel`、各种 `Dialog`/`Sheet`)
`src/composables/`	可复用逻辑(`useDraft`、`useDialog`、`useAvailableFonts`)
`src/stores/`	全局状态(`poster.ts`,撤销栈容量 50)
`src/utils/`	纯函数工具(`qrcode`、`exportPng`、`image`、`crop`、`roundRect`、`snap`、`fontLoader`)
`src/types/`	类型定义(`PosterDocument`、`PosterElement` 联合类型)
`src/constants/`	常量(画布尺寸预设、字体库、颜色板)

功能特性

多种画布尺寸预设:1:1、3:4、4:3、5:4、9:16、16:9
元素增删:文字、图片、矩形、圆形、三角形、二维码
拖拽、缩放、旋转、锁定,支持多选与图层面板
撤销 / 重做(历史栈容量 50,键盘 ⌘/Ctrl+Z / ⌘/Ctrl+Shift+Z)
复制(⌘/Ctrl+D)、删除、上下左右微调(Shift = 10px)
文字属性:字号、字体、字重、字色、行高、字距、对齐、下划线
图片裁剪与替换、滤镜(原图/灰度/复古/黑白)、圆角
画布背景:透明 / 纯色 / 图片,支持自定义颜色与圆角
二维码:支持任意文本 / URL,实时预览
导出 PNG,支持右键保存
JSON 导入 / 导出(可作为本地存档与跨设备搬运)
草稿自动保存到 IndexedDB,刷新页面自动恢复
响应式布局,移动端优先

安装与运行

bash 复制代码

# 安装依赖
npm install

# 本地开发(默认 http://localhost:5173)
npm run dev

# 类型检查
npm run type-check

# 生产构建(产物在 dist/)
npm run build

# 预览构建产物
npm run preview

使用说明

点击底部工具栏 文字 / 图片 / 矩形 / 圆形 / 三角 / 二维码 添加元素
单击选中元素,拖动控制点调整位置 / 大小 / 旋转,八个手柄支持等比缩放
双击文字或点击右下角编辑按钮打开属性面板,编辑字号、颜色、对齐等
点击右上角导出生成 PNG,右键保存或点击保存链接下载
顶部 画布尺寸下拉 切换预设比例;吸管 / 橡皮 切换背景调整;导入按钮 从 JSON 恢复
所有变更自动进入撤销栈,可随时 ⌘/Ctrl+Z 回退

快捷键

快捷键	动作
⌘ / Ctrl + Z	撤销
⌘ / Ctrl + Shift + Z	重做
⌘ / Ctrl + D	复制选中
Delete / Backspace	删除选中
Esc	取消选择 / 关闭面板
← ↑ → ↓	选中元素移动 1px
Shift + ← ↑ → ↓	选中元素移动 10px

浏览器要求

支持现代浏览器(Chrome / Edge / Safari / Firefox 最新两个大版本),移动端 iOS Safari 14+、Android Chrome 90+。