PDFドキュメントのコンテンツに墨消しを追加する

PDFの墨消し機能とは？

PDFにおける墨消し機能とは、PDFドキュメントに含まれる特定の情報を完全に削除して第三者が復元できない状態にする機能です。単に黒い図形で情報を隠すのではなく、テキストや画像といったデータそのものをPDFドキュメントから完全に削除することができ、情報漏洩や誤開示を予防する対策として安全性が高い処理といえます。

例えば、PDFドキュメントに含まれる顧客や従業員の個人情報（氏名、住所、口座番号、電話番号など）、およびその他の機密情報を公開せずに社外に共有したい場合があります。このような場合に墨消し機能が役立ちます。墨消しを適用されたコンテンツは表示および復元したりコピー＆ペーストで抽出することができなくなります。

「DioDocs for PDF（ディオドック）」では、PDFドキュメントを読み込んで対象のコンテンツに墨消しを適用することが可能です。

特定の範囲にあるコンテンツに墨消しを適用する

DioDocs for PDFでは、RedactAnnotationクラスを使用して墨消し注釈をPDFドキュメントのページに追加し、墨消しを適用することができます。請求書などのPDFドキュメントにおいて以下のように特定の範囲に顧客情報が含まれている場合に、その情報に対して墨消し処理を実施することが可能です。

Loadメソッドで読み込んだPDFドキュメントに対して、RedactAnnotationクラスを使用して墨消し注釈を追加します。この際に墨消しを適用する範囲（Rect）と塗りつぶす色（OverlayFillColor）を設定することが可能です。その後Redactメソッドで墨消しを適用します。

using GrapeCity.Documents.Pdf;
using GrapeCity.Documents.Pdf.Annotations;
using System.Drawing;

Console.WriteLine("PDFドキュメントに墨消しを追加・適用する");

var fs = new FileStream("input.pdf", FileMode.Open, FileAccess.Read);

var doc = new GcPdfDocument();
doc.Load(fs);

var page = doc.Pages[0];

// 墨消し注釈を追加
var redaction = new RedactAnnotation()
{
    Rect = new RectangleF(50, 50, 250, 100),
    OverlayFillColor = Color.Gray,
    Page = page
};

// 墨消し注釈を適用
doc.Redact();

doc.Save("result.pdf");

実行すると以下のように墨消しが適用されたPDFファイルが出力されます。

請求書のレイアウトが同一であれば墨消しを適用する範囲は固定で設定できるので、DioDocs for PDFを使うことにより、逐次対象のPDFドキュメントを開いて墨消し注釈を追加し、墨消しを適用する、といった手間が省けます。ワークフローなどで墨消しを適用する処理を自動化したい、といったような要件に適している機能です。

上記で紹介した動作を確認できるサンプルはこちらです。

https://github.com/MESCIUSJP/DioDocsPdfDocumentRedaction

マウスで選択した範囲にあるコンテンツに墨消しを適用する

DioDocs for PDFではJavaScriptライブラリとしてPDFビューワを提供しています。こちらを利用して、表示したPDFドキュメント上でマウス操作により選択した範囲に対して墨消し注釈を追加し、墨消しを適用することができます。

事前準備（Webアプリケーションの作成）

まず、Visual Studio Codeを起動してターミナルでプロジェクトのフォルダquickstart-wasmを作成してquickstart-wasmフォルダに移動します。

mkdir pdfviewer-add-redaction
cd pdfviewer-add-redaction

npm installコマンドを使用してPDFビューワのパッケージをインストールします。

npm install @mescius/dspdfviewer@8.2.1

index.htmlを作成してbody要素にPDFビューワを表示するためのdiv要素を追加します。さらにscript要素を追加してPDFビューワを設定します。

<!DOCTYPE html>
<html lang="ja">

<head>
    <title>PDFビューワ（Wasm）</title>
    <link rel="stylesheet" href="./src/styles.css">
    <script src="/node_modules/@mescius/dspdfviewer/dspdfviewer.js"></script>
    <script src="/node_modules/@mescius/dspdfviewer/DsPdf.js"></script>
    <script src="/node_modules/@mescius/dspdfviewer/wasmSupportApiServer.js"></script>
    <script src="./src/app.js"></script>
</head>

<body>
    <div id="viewer"></div>
</body>

</html>

app.jsを作成してPDFビューワで表示するPDFファイルを設定します。

window.onload = function(){	
	const viewer = new DsPdfViewer("#viewer", { 
		workerSrc: "node_modules/@mescius/dspdfviewer/dspdfviewer.worker.js",		
		supportApi: { implementation: new WasmSupportApi()},
		restoreViewStateOnLoad: false
	});
    viewer.addDefaultPanels();
	viewer.addAnnotationEditorPanel();
	viewer.open("assets/pdf/input.pdf");
}

ローカルで動作確認するための開発用のサーバーとして、Visual Studio Codeの拡張機能「Live Server」をインストールします。その後、index.htmlを右クリックして、［Open with Live Server］を実行します。