简介

DrawStampUtils.js 是一个使用 TypeScript 制作电子印章的工具。本仓库同时包含一个基于 Vue 3 + Vite 的本地示例界面，当前界面只保留一个基于 StampWorkspace.vue 的编辑器 Demo，用于在浏览器中交互式调整印章配置并导出图片，不再依赖任何后端接口或 Cloudflare Workers。

🔍 在线预览（完整站点版本，仅供参考）：点击这里体验在线印章制作工具

📦 提取印章工具：为了减少大小，提取印章功能已移至独立项目 extractstamp

---

目录

• 安装
• 使用
• DrawStampUtils.ts 使用说明
• 贡献
• 许可证

安装

在已有项目使用drawstamputils，使用如下命令安装：

npm install drawstamputils

如果要查看示例程序，可以如下方式：

git clone https://github.com/xxss0903/drawstamputils.git
cd drawstamputils
npm install

使用

开发

启动开发服务器（本地 Demo）：

npm run dev

构建

构建项目：

npm run build

预览

预览构建结果：

npm run preview

当前 Demo 界面说明（StampWorkspace.vue）

当前示例入口为 src/App.vue，内部直接渲染 src/components/editor/StampWorkspace.vue，整体为一个三栏编辑器布局：

• 左侧「元素列表」：列出公司名称、印章类型、内圈、图片、SVG、线条等可编辑元素，支持添加 / 选择 / 删除。
• 中间「画布区域」：基于 DrawStampUtils 在 <canvas> 上实时渲染印章，支持缩放和拖动查看。
• 右侧「属性面板」：针对当前选中元素，调整字体、大小、位置、颜色、毛边、防伪纹路、做旧等详细参数。
• 底部工具按钮：
  • 导入模板：从本地选择 .json 模板文件并加载到编辑器；
  • 导出模板：将当前配置导出为紧凑的 JSON 模板文件；
  • 重置印章：清空文字、图片等内容，恢复到一个基础空白印章；
  • 下载图片：弹出导出设置（格式 / 分辨率），随后将当前印章以 PNG/JPEG/SVG（嵌 PNG）保存到本地。

所有交互都通过前端在浏览器中完成，不会向任何服务器发送请求。 效果展示

以下是使用 DrawStampUtils.js 生成的电子印章示例：

DrawStampUtils.ts 使用说明

DrawStampUtils.ts 是该项目的核心文件之一，用于生成电子印章。以下是如何使用 DrawStampUtils.ts 的示例：

提取印章

提取印章放到了新的库:extractstamp
效果更好，颜色提取更好

// 将imgFile替换为你的图片文件，#ff0000替换为你想要的目标颜色，#ff0000替换为你想要的目标颜色
drawStampUtils.extractStampWithFile(imgFile, '#ff0000', '#ff0000')

创建印章

使用 DrawStampUtils 创建一个新的印章：

// 将canvasRef替换为你的canvas元素，MM_PER_PIXEL替换为你的毫米换算像素，根据需要修改
const drawStampUtils = new DrawStampUtils(canvasRef, MM_PER_PIXEL)
drawStampUtils.refreshStamp()

模板功能

DrawStampUtils 支持将当前印章的所有配置保存为模板文件，以及从模板文件中加载配置。

保存模板

可以通过以下方式将当前印章的所有配置保存为 JSON 格式的模板文件：

// 获取当前配置
const drawConfigs = drawStampUtils.getDrawConfigs()
// 将配置转换为 JSON 字符串
const jsonStr = JSON.stringify(drawConfigs, null, 2)

模板文件包含了印章的所有配置信息，包括：

• 印章基本设置（尺寸、颜色等）
• 公司名称列表
• 印章类型列表
• 内圈圆形列表
• 五角星/图片设置
• 防伪纹路设置
• 毛边效果设置
• 做旧效果设置 等所有可配置项。

加载模板

可以通过以下方式从模板文件中加载配置：

// 读取模板文件内容，自定义一个readTemplateFile方法读取json数据
const jsonStr = await readTemplateFile() // 从文件中读取 JSON 字符串
const configs = JSON.parse(jsonStr)

// 设置新的配置
drawStampUtils.setDrawConfigs(configs)

加载模板后，所有配置项会立即更新，印章会根据新的配置重新绘制。

模板用途

模板功能可用于：

1. 保存常用的印章样式，方便重复使用
2. 在不同项目间共享印章配置
3. 备份当前的印章设置
4. 快速切换不同的印章样式

配置选项

详细的配置可以参考编辑器 Demo 中的实现逻辑（src/components/editor/StampWorkspace.vue），或在代码里直接操作 DrawStampUtils 暴露的配置对象。

DrawStampUtils 支持以下配置选项：

以下是 DrawStampUtils 支持的主要配置选项及其功能：

完整示例 DrawStampUtilsDemo.vue中的方法作为参考

贡献

欢迎贡献代码！请先 fork 本仓库，然后提交 pull request。

许可证

本项目使用 Apache 许可证。

星

更新日志

v1.0.0 (2025-12-16)

• 首个正式版发布
• 优化：印章编辑器 UI 和交互体验
• 优化：内圈圆形、公司名称、印章类型等可多行、多配置编辑支持
• 新增：支持导入/导出模板、重置、图片导出多格式（PNG/JPEG/SVG）
• 新增：支持更多字体、边框、阴影、毛边和仿伪纹理等效果
• 修复：部分浏览器兼容性问题和字体渲染问题

v0.2.2 (2024-11-20)

• 优化: 主题颜色，可以单独设置印章的主色

v0.2.1 (2024-11-16)

• 新增: 内圈圆形的列表，可以动态添加和删除内圈圆形
• 新增：印章模板的保存和加载功能
• 优化：毛边效果，使其能够在印章边缘外部显示
• 优化：界面布局，使用 tab 样式组织功能模块

v0.2.0 (2024-11-15)

• 新增: 公司名称的数组，可单独控制每行公司名称的样式
• 新增：印章类型的数组，可单独控制每行印章类型的样式
• 新增：图片绘制功能，可以选择图片替代五角星，支持设置宽高和保持宽高比

v0.1.0 (2024-09-27)

• 新增: 公司名称字体修改
• 移除：提取印章移到新的库 extractstamp

v0.0.9 (2024-09-27)

• 新增: 印章类型文字行间距功能
• 新增: 公司名称椭圆时候的间距调整
• 新增: 印章类型文字行间距功能
• 新增: 提取印章，区分椭圆印章和圆形印章，并裁剪印章

v0.0.8 (2024-09-27)

• 新增: 字体粗细功能
• 新增：印章边缘的毛边效果

v0.0.6 (2024-09-27)

• 新增: 提取印章功能，将文字和印章混合的提取印章出来

v0.0.5 (2024-09-26)

• 新增: 手动老化效果功能，印章老化透明效果
• 新增: 防伪纹路功能
• 优化: 印章渲染性能
• 修复: 某些字体渲染不正确的问题

v0.0.6 (2025-05-06)

• 新增:mac dmg 安装包 安装运行