Algorithm & Canvas Composition
QRコードの誤り訂正と中央アイコンを合成する仕組み
「QRコードの中央に猫を置きたい」という直感的なニーズを支えるのは、Canvas APIによる多層描画と、QRコードの数学的な復元能力の最大活用です。
このツールの入力から出力まで
現行コードの確認日：
- 入力
- URLまたは文字列を入力し、中央へ重ねる絵文字を選びます。
- 処理
- QR生成ライブラリでCanvasを作り、その上に白い円と絵文字を描いてPNGへ保存します。
- 出力
- 生成したQRに、直径が画像幅の22%の白い円と絵文字を重ね、800×800pxのPNGとして保存します。
まず確認する点：中央の上書きは誤り訂正に依存します。生成されたコードを実際の配布サイズで読み、入力文字列が反映されたことを確認します。
実装の確認箇所：src/pages/tool/qr-maker/index.astro。以下のコード抜粋と出力条件は、この本番実装に基づいて説明します。
仕組みを読み進めるときは、Canvas APIと画像処理（画像寸法、drawImage、画素と透明度の扱い）、File APIとObject URL（選んだ画像の読み込みとBlob URLの解放）が参考になります。
1. 誤り訂正レベル「H」による情報の欠損補完
QRコードには一部が汚れたり隠れたりしてもデータを復元できる「誤り訂正機能」が備わっています。本ツールでは、中央にアイコンを合成することを前提としているため、このレベルを最高設定の Level H に固定しています。
Hは高い誤り訂正能力を持つ設定ですが、「面積の30%をどこでも隠せる」という意味ではありません。アイコンの位置、データ量、印刷寸法やコントラストによって読み取り結果は変わるため、完成画像の確認が必要です。
node-qrcodeを導入し、QRCodeとしてimport済みの環境を前提にした生成例です。800px、余白2モジュール、誤り訂正Hという実装の設定を示しています。
async function makeBaseQR(QRCode, canvas, text, color) {
await QRCode.toCanvas(canvas, text, {
width: 800,
margin: 2,
color: {dark: color, light: '#ffffff'},
errorCorrectionLevel: 'H'
});
}2. Canvasを用いた「背景マスク付き」重層描画
単純にQRコードの上に絵文字を重ねるだけでは、QRのドットパターンと絵文字が干渉し、視認性が著しく低下します。本ツールでは、アイコンの下に「白い円形の背景」を一段挟むことで、アイコンの輪郭を明確にし、その範囲のQR情報は上書きされます。白い背景が読取機器へ特別な指示を送るわけではなく、失われた情報の復元は誤り訂正に依存します。
また、Canvasの ctx.save() と ctx.restore() を活用し、アイコン描画時のみ影（shadow）を適用することで、フラットなQRコードの中でアイコンだけが浮き上がるようなUXを実現しています。
出力の仕様と確認する点
生成したQRに、直径が画像幅の22%の白い円と絵文字を重ね、800×800pxのPNGとして保存します。絵文字の見た目は端末のフォントに依存します。「アイコンなし」を選ぶとこの合成を省きます。
入力が空欄の場合はサイトURLが代わりに使われます。保存前に入力した文字列とリンク先を確認してください。入力の変更と生成開始時には前のプレビューと保存リンクを無効にし、長すぎるデータなどで生成に失敗した場合は文字数を減らす案内を表示します。新しいQRが生成されるまで保存できません。
完成PNGを実際の配布サイズで読み取り、意図したURLや文章になっているか確認します。URLを画像に埋め込むツールであり、アクセス先の安全性や将来の有効性を検査するものではありません。