AI透かしの仕組み — Canvas APIによるレンダリング

Canvas APIによる透かしレンダリング

ブラウザベースのAI透かしツールは、HTML5のCanvas APIを活用して画像上に透かしを描画します。サーバーにデータを送信することなく、すべての処理がクライアントサイドで完結します。

Canvas 2Dコンテキストの基本

Canvas 2Dコンテキストは、画像操作に必要な主要メソッドを提供します：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 画像をキャンバスに描画
ctx.drawImage(image, 0, 0);

// 透かしの不透明度を設定
ctx.globalAlpha = 0.3;

// テキストを描画
ctx.font = '24px sans-serif';
ctx.fillStyle = '#ffffff';
ctx.fillText('NOT FOR AI TRAINING', x, y);

不透明度の制御

globalAlphaプロパティは0.0（完全透明）から1.0（完全不透明）の範囲で透かしの透明度を制御します。透かしテキストがglobalAlpha = 0.3で描画されると、各ピクセルは以下のように合成されます：

結果ピクセル = テキスト色 × alpha + 画像ピクセル × (1 - alpha)

30%の不透明度では、透かしが最終的な色値の30%のみを寄与し、画像コンテンツが支配的なまま残ります。

回転と変換

対角配置を実現するために、translate()とrotate()を組み合わせます：

ctx.save();
ctx.translate(x, y);
ctx.rotate((-30 * Math.PI) / 180); // -30度回転
ctx.fillText(text, 0, 0);
ctx.restore();

save()とrestore()で変換状態を保存・復元することで、各タイルが独立して正しい位置に描画されます。

タイリングアルゴリズム

画像全体をカバーするために、2Dグリッド上でテキストを繰り返し配置します：

const overflow = Math.max(width, height);
for (let y = -overflow; y < height + overflow; y += spacingY) {
  for (let x = -overflow; x < width + overflow; x += spacingX) {
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(angleInRadians);
    ctx.globalAlpha = opacity;
    ctx.fillText(watermarkText, 0, 0);
    ctx.restore();
  }
}

overflowを設定することで、回転されたテキストが画像の端や角まで確実にカバーされます。

エクスポート処理

透かし適用後、canvas.toBlob()またはcanvas.toDataURL()でPNGまたはJPEG形式にエクスポートします。元の画像ファイルはメモリ内で変更されず、エクスポートされたファイルのみに透かしが含まれます。