Canvasでのタイポグラフィ制御と
座標変換の裏側

このツールの入力から出力まで

現行コードの確認日：2026-10-12

入力

写真と見出し・雑誌名などの文字を入力します。

処理

Canvasで写真、見出し、飾りの文字を配置し、表紙のレイアウトへ合成します。

出力

出力は写真の縦横比を保った長辺最大 1500px の JPEG（品質指定 0.95）です。

まず確認する点：文字の自動組版で被写体を避ける機能ではありません。見出しの長さと写真内の余白を合わせて配置します。

仕上がりの例

写真に大きな見出しを重ね、雑誌の表紙風にした例です。

画像を拡大

加工前・加工後

閉じる

掲載画像はサイトにある既存の公開作例です。保存済みの資料では運営者の愛猫の写真を使用しています。今回の確認日が、この作例を実行した日を表すわけではありません。

保存済み検証記録の条件を見る

資料の種類は「ツールの出力画像を保存した記録」です。公開作例と保存済み記録で素材や色などが異なる場合があるため、下の数値は保存済み検証記録の条件として読んでください。

記録の入力画像

800×751px (JPEG)

記録の出力画像

800×751px (JPEG)

保存済み記録の主な操作・出力条件

画面の項目	記録の値	現行コードの初期値・範囲
記録で選択されていた項目	Elegant、	—
雑誌名 (メインタイトル)	NEKO LIFE	初期値 JOURNAL
見出し文 (改行できます)	特集・日なたの見つけ方 今日もここが特等席	初期値 Spring Collection How to be stylish.

記録では「この画像で完成！」から完成表示へ進んでいます。初期値と記録値を比べてから、効果を1項目ずつ変えると作用を確認しやすくなります。

資料ファイルの作成日は実行日として扱っていません。個別端末の処理速度や、ほかの写真に対する検出・加工の精度を測定した資料でもありません。

実装の確認箇所：src/pages/image/magazine-layout/index.astro。以下のコード抜粋と出力条件は、この本番実装に基づいて説明します。

仕組みを読み進めるときは、Canvas APIと画像処理（画像寸法、drawImage、画素と透明度の扱い）、File APIとObject URL（選んだ画像の読み込みとBlob URLの解放）が参考になります。

1. Canvas上の要素を「掴む」ための座標変換アルゴリズム

ユーザーがタイトルや見出しをドラッグして移動させる際、最も大きな課題となるのが「画面上のクリック座標」と「Canvas内の描画座標」のズレです。特にレスポンシブデザインでは Canvas が CSS で伸縮されるため、単純な event.offsetX では正確な位置が取得できません。

そこで、Canvas の実サイズ（width）とブラウザ上の表示サイズ（getBoundingClientRect）の比率を算出し、補正をかけることで、高解像度なキャンバス内でも表示上の移動量を画像上の移動量へ換算しています。印刷時のミリ単位を扱うものではありません。

見出しの複数行を、文字サイズの 1.3 倍の間隔で描く例です。ctx のフォントと色を先に指定します。

function headline(ctx, text, x, y, fontSize) {
  text.split('\n').forEach((line, index) => {
    ctx.fillText(line, x, y + index * fontSize * 1.3);
  });
}

2. オフスクリーン処理による高解像度画像の前処理

ユーザーがアップロードする画像は数メガバイトに及ぶ高解像度なものも少なくありません。これを直接メインの Canvas に描画して加工を行うと、メモリ消費量が増大し、特にモバイル端末で動作が不安定になる原因となります。

本ツールでは、一度「オフスクリーン Canvas（メモリ上の見えないキャンバス）」で縦横比を維持したリサイズを行い、最適化された画像データのみをメイン Canvas のレイヤーとして利用することで、長辺 1500px 以下の画像をプレビューと保存に使用します。元解像度で別に書き出す経路ではありません。

3. HEIC対応とダイナミックインポートによる最適化

このツールでは、HEICを選んだ場合はブラウザ内で別の画像形式に変換してから編集します。

そこで、変換ライブラリを「HEICファイルが選択された時だけ」動的に読み込む（Dynamic Import）手法を採用しました。これにより、初期ロード時の通信量を抑えつつ、iPhoneユーザーが変換の手間なく直接写真をアップロードできる高い利便性を提供しています。

出力の仕様と確認する点

タイトルと見出しを別々にドラッグできます。見出しは手動改行に対応しますが、自動折り返しや枠から出ない位置制限はありません。長い文字は改行と配置で調整します。

右上の VOL. 01 と年月は端末の現在日時から描かれる装飾です。縦線の並びは実用のバーコードを生成するものではありません。

出力は写真の縦横比を保った長辺最大 1500px の JPEG（品質指定 0.95）です。文字と写真は1枚に統合され、後から文字だけを変更できる編集データは保存しません。