背景介绍
随着信息化和无纸化办公的普及，电子签名和电子印章成为现代企业日常办公中不可或缺的一部分。通过电子印章，企业能够在不借助物理印章的情况下，快速、高效地完成合同、文档等重要文件的签署流程。在移动设备上实现电子印章的绘制与使用，不仅可以方便地生成和盖章，还能够确保签署过程的合法性和安全性。
在本项目中，我们使用了 UniApp 平台，通过内置的 Canvas 绘图功能，结合 jsPDF 库，开发了一套能够生成、展示并将印章盖在图片或 PDF 文件上的系统。接下来，我们将详细讨论整个开发过程，涵盖从需求分析到技术实现的各个细节。
项目需求
- 用户自定义印章内容：用户可以输入公司名称和底部文字，印章的文字部分需要动态生成。
- 生成印章图像：通过 Canvas 绘制圆形的红色边框和中心的五角星，文字需要沿圆弧排列。
- 将印章图像合成到图片或 PDF：生成的电子印章需要能够盖在背景图片上，并支持将图片导出为 PDF 格式。
- 输出和下载：生成的印章或带有印章的文件能够保存到本地，并提供下载功能。
技术选型
在实现过程中，选用了以下技术工具：
- UniApp：跨平台的移动应用开发框架，支持在多端运行（如微信小程序、H5、安卓、iOS等）。
- Canvas API：用于绘制印章，包括绘制圆形、五角星和弧形文字。
- jsPDF：前端生成 PDF 的工具，支持插入图片、文本等内容。
- uni.canvasToTempFilePath：用于将 Canvas 内容生成图片并保存。
开发步骤
1. 创建项目并搭建基础结构
首先，我们需要在 UniApp 中创建项目，并搭建用户输入界面与 Canvas 渲染区域。使用 <input> 标签提供用户输入框，用于输入公司名称和底部文字，<canvas> 标签用于展示生成的印章。
vue
复制代码
<template>
<view class="container">
<!-- Canvas 用于绘制电子印章 -->
<canvas class="stamp-canvas" canvas-id="stampCanvas" id="stampCanvas"></canvas>
<!-- 用户输入公司名称 -->
<input v-model="companyName" placeholder="输入公司名称" class="input-box" />
<!-- 用户输入底部文字 -->
<input v-model="bottomText" placeholder="输入底部文字" class="input-box" />
<!-- 按钮：生成印章 -->
<button type="primary" @click="generateStamp">生成印章</button>
<!-- 生成后的印章图像 -->
<image class="result-image" v-if="resultImagePath" :src="resultImagePath" mode="widthFix" />
</view>
</template>
2. 绘制电子印章
在用户输入公司名称和底部文字后，我们需要根据这些输入生成电子印章。印章的核心部分包括：
- 外圈：一个圆形的红色边框。
- 公司名称：沿外圈弧形排列的公司名称。
- 五角星：印章中心的五角星。
- 底部文字：五角星下方的底部说明。
通过 Canvas API，我们可以依次绘制这些内容。
javascript
复制代码
generateStamp() {
const context = uni.createCanvasContext('stampCanvas');
const canvasSize = 300; // Canvas 尺寸
const centerX = canvasSize / 2; // 中心点 X 坐标
const centerY = canvasSize / 2; // 中心点 Y 坐标
const radius = 120; // 圆的半径
// 绘制印章外圆
context.setStrokeStyle('#ff0000'); // 设置红色边框
context.setLineWidth(5); // 边框宽度
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI); // 绘制圆
context.stroke();
// 绘制五角星
this.drawStar(context, centerX, centerY - 20, 5, 30, '#ff0000'); // 五角星在中心稍偏上位置
// 绘制公司名称（弧形文字）
context.setFontSize(14); // 调整字体大小
context.setFillStyle('#ff0000'); // 字体颜色
this.drawArcText(context, this.companyName, centerX, centerY, radius - 20, Math.PI / 2); // 半圆形文字
// 绘制底部文字
context.setFontSize(20);
context.setTextAlign('center');
context.setTextBaseline('middle');
context.fillText(this.bottomText, centerX, centerY + radius / 2); // 底部文字
// 绘制完成后生成图片
context.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: 'stampCanvas',
success: (res) => {
this.resultImagePath = res.tempFilePath; // 保存生成的图片路径
uni.showToast({
title: '印章生成成功',
icon: 'success'
});
},
fail: (err) => {
console.error('生成印章失败:', err);
}
});
});
}
3. 将电子印章印到图片或 PDF 文件中
3.1 合成印章和背景图片
要将生成的印章叠加在背景图片上，首先需要加载背景图片，然后使用 canvas 合成图片。合成后的图片可以通过 uni.canvasToTempFilePath() 方法保存。
javascript
复制代码
addStampToImage() {
const context = uni.createCanvasContext('stampCanvas');
const canvasWidth = 300; // 画布宽度
const canvasHeight = 300; // 画布高度
const stampSize = 100; // 印章尺寸
// 绘制背景图片
context.drawImage(this.backgroundImage, 0, 0, canvasWidth, canvasHeight);
// 绘制电子印章
context.drawImage(this.resultImagePath, canvasWidth - stampSize - 20, canvasHeight - stampSize - 20, stampSize, stampSize);
// 生成合成后的图片
context.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: 'stampCanvas',
success: (res) => {
this.combinedImagePath = res.tempFilePath; // 保存合成后的图片路径
},
fail: (err) => {
console.error('图片合成失败:', err);
}
});
});
}
3.2 生成包含印章的 PDF 文件
通过 jsPDF 库，我们可以将印章和背景图片添加到 PDF 文件中，最终导出 PDF。
javascript
复制代码
import { jsPDF } from 'jspdf';
generatePDFWithStamp() {
const pdf = new jsPDF();
uni.getFileSystemManager().readFile({
filePath: this.backgroundImage, // 背景图片路径
encoding: 'base64',
success: (bgRes) => {
const backgroundImage = 'data:image/png;base64,' + bgRes.data;
uni.getFileSystemManager().readFile({
filePath: this.resultImagePath, // 印章图片路径
encoding: 'base64',
success: (stampRes) => {
const stampImage = 'data:image/png;base64,' + stampRes.data;
pdf.addImage(backgroundImage, 'PNG', 0, 0, 210, 297);
pdf.addImage(stampImage, 'PNG', 150, 220, 40, 40);
pdf.save('document_with_stamp.pdf');
},
fail: (err) => {
console.error('读取印章图片失败:', err);
}
});
},
fail: (err) => {
console.error('读取背景图片失败:', err);
}
});
}
4. 结束语
通过 UniApp 和 jsPDF 库的结合，我们成功实现了电子印章的生成、展示和合成到图片及 PDF 的功能。这个项目展示了如何在多平台上生成动态内容并将其保存或导出为文件，解决了传统物理印章的局限性，为无纸化办公提供了便捷的解决方案。
