本项目仅供学习参考,勿做违法用途,后果自负
效果展示
以下是使用 DrawStampUtils.js 生成的电子印章示例:
简介
DrawStampUtils.js 是一个使用 JavaScript 制作电子印章的工具。该项目使用 Vue 3 和 TypeScript 构建,并通过 Vite 进行开发和构建。
预览地址
目录
- 安装
- 使用
- DrawStampUtils.ts 使用说明
- 贡献
- 许可证
安装
在已有项目使用drawstamputils
,使用如下命令安装:
npm install drawstamputils
如果要查看示例程序,可以如下方式:
git clone https://github.com/xxss0903/drawstamputils.git
cd drawstamputils
npm install
使用
开发
启动开发服务器:
npm run dev
构建
构建项目:
npm run build
预览
预览构建结果:
npm run preview
DrawStampUtils.ts 使用说明
DrawStampUtils.ts 是该项目的核心文件之一,用于生成电子印章。以下是如何使用 DrawStampUtils.ts 的示例:
导入 DrawStampUtils
首先,在你的 Vue 组件或其他 TypeScript 文件中导入 DrawStampUtils:
import { DrawStampUtils } from './DrawStampUtils';
创建印章
使用 DrawStampUtils 创建一个新的印章:
// 将canvasRef替换为你的canvas元素,MM_PER_PIXEL替换为你的毫米换算像素,根据需要修改
const drawStampUtils = new DrawStampUtils(canvasRef, MM_PER_PIXEL)
drawStampUtils.refreshStamp()
提取印章
使用 DrawStampUtils 提取印章:
将混杂在文字中的红色(或其他纯色)印章提取出来,然后设置成目标颜色
// 将imgFile替换为你的图片文件,#ff0000替换为你想要的目标颜色,#ff0000替换为你想要的目标颜色
drawStampUtils.extractStampWithFile(imgFile, '#ff0000', '#ff0000')
注意:
- 必须需要在index.html中引入opencv.js
<script src="https://docs.opencv.org/4.5.2/opencv.js"></script>
- 输入的颜色格式为16进制,例如红色为#ff0000
- 原图最好最好紧紧包裹印章,且印章的颜色为纯色效果更好
配置选项
详细的配置请参考Demo文件DrawStampUtilsDemo.vue
中的配置方法
DrawStampUtils 支持以下配置选项:
以下是 DrawStampUtils 支持的主要配置选项及其功能:
配置选项 | 功能描述 |
---|---|
ISecurityPattern | 控制防伪纹路的相关参数 |
- openSecurityPattern | 是否启用防伪纹路 |
- securityPatternWidth | 设置防伪纹路的宽度 |
- securityPatternLength | 设置防伪纹路的长度 |
- securityPatternCount | 设置防伪纹路的数量 |
- securityPatternAngleRange | 设置防伪纹路的角度范围 |
ICompany | 控制印章公司相关的参数 |
- companyName | 设置公司名称 |
- compression | 控制公司名称的压缩比例 |
- borderOffset | 设置边框偏移量 |
- textDistributionFactor | 控制文字分布因子 |
- fontFamily | 设置字体 |
- fontHeight | 设置字体高度 |
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 | 设置随机种子 |