Add client-side signature overlay system documentation
Documented the new client-side signature overlay system for EnvelopeViewer, replacing iText7 due to GPL license issues. Outlined the signature data structure in C# and JavaScript, and described the workflow steps for creating, applying, and displaying signatures as visual overlays. Added a "Future Enhancement Required" section suggesting commercial PDF libraries or server-side stamping for future improvements.
This commit is contained in:
@@ -657,6 +657,73 @@ button.style.left/top
|
||||
|
||||
---
|
||||
|
||||
## Signature Workflow in EnvelopeViewer — NEW Implementation (Session 13+)
|
||||
|
||||
**IMPORTANT: iText7 NOT USED in EnvelopeViewer**
|
||||
- **Reason:** GPL license incompatibility (requires source code sharing)
|
||||
- **Alternative:** Client-side signature overlay system (HTML + Canvas API)
|
||||
- **Export:** Signatures are visual overlays only, NOT stamped on PDF bytes
|
||||
- **Future:** Consider PSPDFKit or commercial PDF library for actual PDF stamping
|
||||
|
||||
### Signature Data Structure
|
||||
|
||||
**Captured Signature (`_capturedSignature`):**
|
||||
```csharp
|
||||
record SignatureCapture(
|
||||
string DataUrl, // base64 PNG: "data:image/png;base64,iVBORw0KG..."
|
||||
string FullName, // Required: "Max Mustermann"
|
||||
string Position, // Optional: "Geschäftsführer"
|
||||
string Place // Required: "Berlin"
|
||||
);
|
||||
```
|
||||
|
||||
**Applied Signature (per SignatureDto):**
|
||||
```javascript
|
||||
{
|
||||
signatureId: 42,
|
||||
dataUrl: "data:image/png;base64,iVBORw0KG...",
|
||||
fullName: "Max Mustermann",
|
||||
position: "Geschäftsführer",
|
||||
place: "Berlin",
|
||||
date: "15.01.2025",
|
||||
x: 108, // PDF POINTS (already converted from INCHES)
|
||||
y: 144, // PDF POINTS
|
||||
width: 150, // pixels
|
||||
height: 60 // pixels
|
||||
}
|
||||
```
|
||||
|
||||
### Workflow Steps
|
||||
|
||||
**Step 1: Signature Creation Popup**
|
||||
- Reuse `DxPopup` from ReportViewer.razor
|
||||
- 3 tabs: Draw / Text / Image (using `receiver-signature.js`)
|
||||
- Fields: Full name, Position (optional), Place
|
||||
- Click "Speichern" ? `_capturedSignature` saved to state
|
||||
|
||||
**Step 2: Apply Signature to Canvas**
|
||||
- User clicks "Unterschreiben" button on PDF
|
||||
- JavaScript creates HTML overlay (NOT Canvas drawing)
|
||||
- Overlay repositions on zoom/page change
|
||||
- **NO PDF byte modification** (GPL license issue)
|
||||
|
||||
**Step 3: Visual Display Only**
|
||||
- Signatures shown as HTML `<div>` overlays
|
||||
- Positioned using absolute positioning
|
||||
- Persist in Blazor component state
|
||||
- Lost on page refresh (no server-side save)
|
||||
|
||||
**Future Enhancement Required:**
|
||||
- Replace iText7 with commercial PDF library (e.g., PSPDFKit, Syncfusion)
|
||||
- Or use server-side stamping with Azure PDF Services
|
||||
- Or accept GPL license and open-source the stamping code
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user