<div style="background-color: #fff1f0; padding: 15px; border-left: 4px solid #ff4d4f; margin-bottom: 20px;"> <h2 style="color: #ff4d4f; margin-top: 0;">⚠️ 安全警告</h2> <p style="color: #cf1322; font-weight: bold;"> 本项目仅供学习和参考！严禁用于任何非法用途！ </p> <p style="color: #cf1322;"> 1. 本项目开源代码仅用于技术学习和交流。<br> 2. 使用本项目生成的任何图片请勿用于任何非法用途。<br> 3. 因违法使用本项目造成的任何法律责任和损失，需自行承担，与本项目无关。<br> 4. 如果使用本项目请遵守相关法律法规。<br> </p> </div>

npm

简介

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

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

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

安装

在已有项目使用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 生成的电子印章示例：

Stamp Example Stamp Designer DrawStampUtils.ts 使用说明

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

提取印章

提取印章放到了新的库:extractstamp <br> 效果更好，颜色提取更好<br> Stamp Designer

// 将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 支持将当前印章的所有配置保存为模板文件，以及从模板文件中加载配置。 Stamp Template

保存模板

可以通过以下方式将当前印章的所有配置保存为 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)

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

模板用途

模板功能可用于：

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

配置选项<br>

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

DrawStampUtils 支持以下配置选项：

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

| 配置选项 | 功能描述 | |---------|----------------| | ISecurityPattern | 控制防伪纹路的相关参数 | | - openSecurityPattern | 是否启用防伪纹路 | | - securityPatternWidth | 设置防伪纹路的宽度 | | - securityPatternLength | 设置防伪纹路的长度 | | - securityPatternCount | 设置防伪纹路的数量 | | - securityPatternAngleRange | 设置防伪纹路的角度范围 | | ICompany | 控制印章公司相关的参数 | | - companyName | 设置公司名称 | | - compression | 控制公司名称的压缩比例 | | - borderOffset | 设置边框偏移量 | | - textDistributionFactor | 控制文字分布因子 | | - fontFamily | 设置字体 | | - fontHeight | 设置字体高度 | | - adjustEllipseText | 是否调整椭圆文字间距 | | - adjustEllipseTextFactor | 椭圆文字间距调整因子 | | ICode | 控制印章编码相关的参数 | | - code | 设置编码内容 | | - compression | 控制编码的压缩比例 | | - fontHeight | 设置编码字体大小 | | - fontFamily | 设置编码字体 | | - borderOffset | 设置编码边框偏移量 | | - fontWidth | 设置编码字体宽度 | | - textDistributionFactor | 控制编码文字分布因子 | | ITaxNumber | 控制税号相关的参数 | | - code | 设置税号内容 | | - compression | 控制税号的压缩比例 | | - fontHeight | 设置税号字体大小 | | - fontFamily | 设置税号字体 | | - fontWidth | 设置税号字体宽度 | | - letterSpacing | 控制税号字符间距 | | - positionY | 设置税号文字垂直位置 | | - totalWidth | 设置税号文字总宽度 | | IAgingEffectParams | 控制做旧效果的相关参数 | | - x | 设置做旧效果的 x 轴位置 | | - y | 设置做旧效果的 y 轴位置 | | - noiseSize | 控制噪声大小 | | - noise | 控制噪声强度 | | - strongNoiseSize | 控制强噪声大小 | | - strongNoise | 控制强噪声强度 | | - fade | 控制淡化强度 | | - seed | 设置随机种子 | | IRoughEdge | 控制印章边缘毛边效果的相关参数 | | - shouldDrawRoughEdge | 是否绘制毛边效果 | | - roughEdgeWidth | 设置毛边宽度 | | - roughEdgeHeight | 设置毛边高度 | | - roughEdgeProbability | 控制毛边出现的概率 | | - roughEdgeShift | 设置毛边偏移量 | | - roughEdgePoints | 设置毛边点的数量 | | IStampType | 控制印章类型文字的相关参数 | | - stampType | 设置印章类型文字 | | - fontHeight | 设置印章类型文字高度 | | - compression | 设置印章类型文字压缩比例 | | - letterSpacing | 设置印章类型文字字符间距 | | - positionY | 设置印章类型文字位置 | | - fontWidth | 设置印章类型文字宽度 | | - lineSpacing | 设置印章类型文字行间距 | | IDrawStar | 控制五角星/图片相关的参数 | | - drawStar | 是否绘制五角星/图片 | | - useImage | 是否使用图片代替五角星 | | - imageUrl | 图片的URL | | - imageWidth | 图片宽度(mm) | | - imageHeight | 图片高度(mm) | | - keepAspectRatio | 是否保持图片原始宽高比 | | - starDiameter | 五角星直径（使用五角星时有效） | | - starPositionY | 五角星/图片的垂直位置 | | companyList | 公司名称列表，支持多行公司名称 | | - companyName | 设置公司名称 | | - compression | 控制公司名称的压缩比例 | | - borderOffset | 设置边框偏移量 | | - textDistributionFactor | 控制文字分布因子 | | - fontFamily | 设置字体 | | - fontHeight | 设置字体高度 | | - fontWeight | 设置字体粗细 | | - adjustEllipseText | 是否调整椭圆文字间距 | | - adjustEllipseTextFactor | 椭圆文字间距调整因子 | | stampTypeList | 印章类型列表，支持多行印章类型 | | - stampType | 设置印章类型文字 | | - fontHeight | 设置字体高度 | | - fontFamily | 设置字体 | | - compression | 设置压缩比例 | | - letterSpacing | 设置字符间距 | | - positionY | 设置垂直位置 | | - fontWidth | 设置字体宽度 | | - fontWeight | 设置字体粗细 | | - lineSpacing | 设置行间距 | | innerCircleList | 内圈圆形列表，支持多个内圈圆形 | | - drawInnerCircle | 是否绘制该内圈圆形 | | - innerCircleLineWidth | 设置内圈圆形的线宽 | | - innerCircleLineRadiusX | 设置内圈圆形的水平半径 | | - innerCircleLineRadiusY | 设置内圈圆形的垂直半径 |

完整示例 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 安装包安装运行

Drawstamputils

Install / Use

README

简介

目录

安装

使用

开发

构建

预览