ヘッダーカッターの実装：寸法プリセットと端末内の画像処理

1. モバイル・ファーストを実現するHEICの透明な変換処理

iPhoneで撮影された写真は標準でHEIC形式ですが、ブラウザの<img>タグやCanvas APIではそのまま扱えないケースが多々あります。本ツールでは、ユーザーが「形式」を意識することなく編集を開始できるよう、動的インポートを用いたクライアントサイド変換を実装しています。

メリット: サーバーに画像をアップロードすることなく変換を行うため、画像の変換を端末内で行い、iPhoneユーザーに「PC不要」の編集体験を提供できます。

自由比率で幅が 1200px を超えるときの出力寸法の計算例です。縦横比を保って縮小します。

function freeCropSize(width, height) {
  const scale = Math.min(1, 1200 / width);
  return { width: Math.round(width * scale), height: Math.round(height * scale) };
}

2. 超高解像度画像による「ブラウザ・クラッシュ」の防止策

近年のスマホカメラは1億画素を超えるものもあり、そのままcropperjs等のライブラリに渡すと、デバイスのメモリを食いつぶしてブラウザが強制終了する原因になります。本ツールでは、エディタを起動する前にCanvasを用いて「編集に最適な解像度」へダウンサンプリングする独自のプリ・プロセッシングを行っています。

メリット: 長辺 2000px 以下の画像を編集に使うことで、後続の処理に必要な画素数を減らします。読み込みや HEIC 変換時のメモリ不足まで防ぐものではありません。

3. SNSプリセットと「フリーサイズ」の動的最適化アルゴリズム

X(Twitter)やYouTubeなどの固定比率と、自由な比率（フリー）を瞬時に切り替えるロジックを搭載しています。特にフリーサイズ時は、出力画像が巨大になりすぎないよう最大幅を制限しつつ、現在の切り抜き範囲からリアルタイムに「出力後のピクセル数」を逆算して表示するUXを構築しました。

メリット: 「保存してみるまでサイズがわからない」という不安を解消。ツールに登録したプリセットのピクセル数で出力しつつ、ユーザーの自由度も確保しています。

出力の仕様と確認する点

プリセットは X 1500×500px、YouTube 2560×1440px、Facebook 820×312px です。これは現在の実装値で、各サービスの表示や要件が将来も同じことを保証する説明ではありません。公開前に実際の表示を確認します。

入力は長辺 2000px 以下に縮小するため、2560px 幅のプリセットなどは処理画像から拡大して出力します。小さい切り抜き範囲を大きく書き出しても細部の情報は増えません。

保存は JPEG（品質指定 0.95）。自由サイズの上限は幅 1200px で、高さを 1200px に固定する意味ではありません。プロフィールアイコンや端末による見切れを自動検知する機能はありません。