デザイナーから納品されたデザイン画像をもとに、PDFkitでPDFを生成する仕事があった。
ピクセルパーフェクトを求められたものの、元画像と生成したPDFを目視で見比べるのは限界がある。
ブラウザ上でピクセル単位の比較ができるツールがほしかったので作った。
何ができるか
PDFと画像（PNG/JPEG/WebP）をアップロードすると、キャンバス上で重ねて表示できる。
比較モードは3つある。
オーバーレイモードでは画像の透明度を変えながらPDFに重ねて確認できる。
差分モードではピクセルの違いを赤でハイライト表示してくれる。
スライドモードでは左右にスワイプしてPDFと画像を切り替えられる。
透明度・位置・スケール・ズームもスライダーやマウス操作で調整できるので、細かいズレも見つけやすい。
使い方
- PDFと画像をドラッグ&ドロップでアップロード
- 表示モードを選んで透明度や位置を調整
- ズームしてピクセル差分を確認
操作はキーボードショートカットにも対応していて、ホイールでズーム、ドラッグで画像移動やキャンバスのパンができる。
技術的な話
- PDF描画は pdf.js を使用
- Canvas APIで2つのレイヤーを重ね合わせて描画
- 差分モードはピクセルごとにRGB値を比較して差分を赤チャンネルに出力
- ファイルはサーバーに送信せず、すべてブラウザ内で処理される
データがサーバーに送られないので、社外秘のデザインデータでも安心して使える。
まとめ
欲しい機能のサービスが見当たらないとき、作りたいものの仕様をしっかり固めてあげればAIがさくっと作ってくれる。
こういったシンプルなツールなら本当にあっという間にできてしまう。
その分本業に集中できるし、開発のスピードも上がる。
すごい時代になったなと思う。
