浏览器自定义印章,DrawStampUtils.js的使用

115 阅读3分钟

本项目仅供学习参考,勿做违法用途,后果自负

效果展示

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

seal.png

简介

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 提取印章:
将混杂在文字中的红色(或其他纯色)印章提取出来,然后设置成目标颜色

stamp_extract.png

stamp_origin.png

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

注意:

  1. 必须需要在index.html中引入opencv.js <script src="https://docs.opencv.org/4.5.2/opencv.js"></script>
  2. 输入的颜色格式为16进制,例如红色为#ff0000
  3. 原图最好最好紧紧包裹印章,且印章的颜色为纯色效果更好

配置选项

详细的配置请参考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设置随机种子