ブラウザ用ドキュメント注釈スタジオの構築方法
契約書、請求書、または証拠書類を扱うチームには、単なるビューアー以上のものが必要です。機密ファイルをサーバーにアップロードすることなく、異なるソースからページを組み立てる方法が求められています。
TypeScript、Vite、および Dynamsoft のツールを使用して、クライアントサイドのドキュメント注釈スタジオを構築できます。
このアプリでは、以下のことが可能です：
- PDFや画像を開く。
- 既存のドキュメントを置き換えるのではなく、新しいファイルを追加（アペンド）する。
- スキャナーから直接ページをキャプチャする。
- 移動可能な墨消し（リダクション）マークや承認スタンプを追加する。
- 不要なページを削除する。
- 完成したドキュメントを PDF、PNG、JPEG、または TIFF としてエクスポートする。
技術スタック：
- Node.js 18+
- Dynamsoft Document Viewer (DDV) v4
- Dynamic Web TWAIN (DWT)
- Vite and TypeScript
主要なロジック：
現在のファイルを置き換える代わりに、doc.loadSource(source, index) を使用してページを追加します。これにより、複数の異なる画像や PDF から単一のドキュメントを作成できます。
スキャナーには Dynamic Web TWAIN ブリッジを使用します。ブラウザには標準的なスキャナー API がないため、DWT がハードウェアへの接続を提供します。スキャンした画像を PDF blob に変換し、即座にビューアーに追加できます。
セキュリティのために、墨消し（リダクション）注釈を使用します。機密テキストの上に黒い長方形を作成できます。ユーザーは、ドキュメントに永久に適用する前に、このマークを移動したりサイズを変更したりできます。
エクスポートは柔軟です。以下の異なる PDF モードを選択できます：
- Annotation mode（注釈モード）：マークを編集可能なまま保持します。
- Flatten mode（フラット化モード）：マークをページに焼き付けます。
- Image mode（画像モード）：ページを画像に変換します。
このアプローチにより、すべての処理をクライアントサイドに保持できます。データはプライベートかつ安全に保たれます。