制作电子印章工具DrawStampUtils.js

项目简介

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

DrawStampUtils.js 是一个使用 JavaScript 制作电子印章的工具。该项目使用 Vue 3 和 TypeScript 构建，并通过 Vite 进行开发和构建。

安装

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

npm install drawstamputils在index.html中引入opencv.js `<script src="https://docs.opencv.org/4.5.2/opencv.js">script>`

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

git clone https://github.com/xxss0903/drawstamputils.gitcd drawstamputilsnpm install

使用

开发

启动开发服务器：

npm run dev

构建

构建项目：

npm run build

效果展示

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

DrawStampUtils.ts 使用说明

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

提取印章

使用 DrawStampUtils 提取印章：
将混杂在文字中的红色（或其他纯色）印章提取出来，然后设置成目标颜色

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

注意：

1. 必须需要在index.html中引入opencv.js

2. 输入的颜色格式为16进制，例如红色为#ff0000

3. 原图最好最好紧紧包裹印章，且印章的颜色为纯色效果更好

导入 DrawStampUtils

首先，在你的 Vue 组件或其他 TypeScript 文件中导入 DrawStampUtils：

import { DrawStampUtils } from './DrawStampUtils';

创建印章

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

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