無料画像ローテーター

90/180/270度とそれ以外、ロスレスの境界線

画像の回転には2つのまったく異なる種類がある。ちょうど90°、180°または270°の回転はロスレスだ：すべてのソースピクセルがちょうど1つの整数の目的地ピクセルに対応し、ビットマップは再計算されるのではなく並べ替えられるため、補間もブレンドも品質の劣化もまったくない。W × Hの画像での90°時計回り回転は、ピクセル(x, y)を新しいH × W出力の位置(H − 1 − y, x)にマッピングする。180°の回転は(x, y)を(W − 1 − x, H − 1 − y)にマッピングする。これらは純粋なメモリシャッフル演算だ。

他のすべての角度にはリサンプリングが必要だ：各目的地ピクセルについて、アルゴリズムはそれがソース（逆回転によって）のどこから来たかを計算し、ソース位置が通常は小数点以下であることを見つけ、補間カーネルを使って周囲のソースピクセルを組み合わせる。よく使われるカーネル：

• 最近傍（Nearest neighbour）：単一の最も近いソースピクセルを選択する。高速で鋭いエッジを保持するが、回転した線に沿って「ジャギー」と呼ばれる段差が目立つ。
• バイリニア（Bilinear）：最近傍4つのソースピクセルの加重平均。滑らかで高速。ほとんどのブラウザキャンバス実装のデフォルト。
• バイキュービック（Bicubic）：滑らかな3次カーネルを使って最近傍16個のソースピクセルの加重平均。バイリニアより鮮明。Photoshopのバイキュービックオプションのデフォルト。
• Lanczos：6×6または8×8の近傍に対するウィンドウ付きsinc関数。現在広く使われている中で最も高品質なカーネル。大幅に遅く、鋭いエッジにリンギングアーティファクトが発生することがある。

各カーネルは詳細の保持とリンギングまたはぼかしのトレードオフがあり、すべてに共通する真実がある：90度以外の回転はソース情報の一部を失う。細かい高周波の詳細（1ピクセルの線、サブピクセルで位置付けられたテキストのエッジ、クリーンにエイリアシングされたピクセルアート）は、どのカーネルを使っても30°または45°の回転でわずかなソフト化なしには生き残れない。直感的なわかりやすい例：1°回転してから−1°戻しても元の画像は得られず、ソフトになったコピーが得られる。90°回転してから−90°戻すと元のビットマップが正確に得られる。

EXIF方向タグ：写真が横向きになっていたサイレントな理由

「ブラウザが写真を逆さまに表示する」問題には特定の原因がある。現代のスマートフォンは横向きに持って写真を撮ると画像を物理的に回転させず、元のセンサーの向きを保存して画像をどのように表示すべきかを視聴者に伝えるEXIF方向タグ（1995年頃にJEIDAが導入）を追加する。タグには8つの値がある：1=正常、3=180°、6=90°時計回り、8=90°反時計回り、さらに4つのミラーバリアント。

2010年頃以前は、デバイスは回転したピクセルを書き込んでOrientation = 1を設定していた。それ以降、最新のスマートフォンはストレージとバッテリーを節約するために元のピクセルをOrientation付きで保存するようになった。問題：ブラウザは歴史的に<img>要素以外でEXIF方向タグを適用しなかった。縦向きのスマートフォン写真をキャンバスベースのツールにドラッグすると、ツールが方向タグを明示的に読み取って適用しない限り、キャンバスは横向きに描画してしまう。2017年に追加されたCSSのimage-orientationプロパティはHTMLでこれを修正した。最新のcreateImageBitmap()はimageOrientation: 'from-image'でキャンバスで修正する。Chrome 81（2020年4月）はimage-orientation: from-imageを<img>要素のデフォルトにした。

ブラウザで写真を回転させたとき「すでに回転済み」と表示された、または2回回転されたことがあれば、これに遭遇している。正直な修正は、回転ツールがEXIFタグを読み取り、まずその方向を適用してから、ユーザーが選んだ回転を上乗せすることだ。

キャンバスでの処理方法

Canvasのrotate(angle)メソッドはキャンバスの原点（0, 0）を中心に座標系を回転させる。原点が左上隅であるため、単純にctx.rotate(angle)を呼び出してからctx.drawImage(img, 0, 0)を実行すると、画像が左上隅を中心に回転し、回転したピクセルのほとんどがキャンバス外の左上に出てしまう。標準的な解決策は平行移動-回転-平行移動のサンドイッチでこれを修正する：

ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle * Math.PI / 180);   // canvas takes radians
ctx.translate(-image.width / 2, -image.height / 2);
ctx.drawImage(image, 0, 0);
ctx.restore();

90/180/270度の回転では、目的地のキャンバスは入れ替わった（90/270）または元の（180）寸法に合わせてサイズを設定する必要がある。任意の角度では、回転した画像のバウンディング矩形はどちらのソース寸法よりも大きくなる。W × Hの画像をθ回転させると、新しいバウンディングボックスは|W·cos(θ)| + |H·sin(θ)|の幅と|W·sin(θ)| + |H·cos(θ)|の高さになる。そのため45°回転した1000 × 800の画像には、すべての回転したピクセルを収めるために約1273 × 1273のキャンバスが必要だ。「切り取りフィット」トグルで、キャンバスを拡張する（透明または白の三角形のコーナーですべてのピクセルを保持する）か、元の寸法に戻す（回転したコンテンツをクリッピングする）かを決定する。

PNGとJPG出力、コーナー問題

90度以外の回転でキャンバスが拡張されると、4つの三角形のコーナーを何かで埋める必要がある。PNGはそのギャップを完全に透明なピクセル（alpha = 0）としてレンダリングでき、回転した画像を別の背景の上にレイヤーするのに最適だ。JPGはアルファチャンネルがなく、未記入のピクセルをキャンバスのクリアカラーとしてレンダリングし、JPEGはそれを不透明な黒に平坦化する。回転した写真のJPGをダウンロードしてコーナーに黒いくさびがあって驚いたユーザーはこの問題に遭遇している。

このツールは黒コーナー問題を避けるため、エンコードする前にJPG出力を白い背景に合成する。PNG出力は透明性を保持する。形式の選択：透明性があるもの、またはさらに編集するものにはPNG。ファイルサイズが重要な最終的な保存先に向かう写真にはJPG。

JPGにはもう1つニュアンスがある。ロスレスJPEG回転は技術的に可能で、jpegtranユーティリティは画像を再デコードせずにJPEGブロック境界（8×8 DCT係数ブロック）を再配置するため、90/180/270度の回転で基礎となる圧縮データをそのままにして元と同品質のJPEGを出力できる。問題はiMCUエッジ制約だ：画像の寸法がブロックサイズの倍数でないと、回転で数ピクセルのエッジがトリミングされるか部分的なブロックが残る。このページはjpegtranスタイルのブロック操作の代わりにCanvas APIを使用するため、JPG出力は常に再エンコードされる。最高品質で再エンコードされるが、JPEGの再エンコードに固有のわずかな世代ロスが生じる。

ブラウザローテーターを使う場面

• 横向きでインポートされたスマートフォン写真（EXIF方向タグを適用しないデスクトップアプリケーションへの取り込み時）。
• スキャンされた文書（スキャナーの自動検出が誤ったため90°回転して取り込まれた場合）。
• 印刷の向き：縦向きまたは横向き印刷用に画像を準備する。
• アートとデザインのコンポジション：異なる視覚的方向をテストするために写真を回転させる。
• ソーシャルメディアアップロード前の素早い修正（プラットフォームの自動回転が混乱したとき）。
• 機密コンテンツ：業務文書、身分証明写真、家族写真など、サードパーティのサービスにアップロードしたくないもの。

その他の質問

90°回転するだけで写真の品質は低下するか？

回転ステップ自体では劣化しない。90/180/270度の回転はロスレスの並べ替えだ。品質のリスクはエンコーダーにある。JPEGをアップロードすると、このツールはそれをデコードし、ピクセル配列を回転させてから結果を再エンコードする。JPEGはロスシーであるため、再エンコードでわずかな世代ロスが加わる（最高品質では通常不可視）。それも避けるには、PNGでダウンロードするか、再デコードせずにDCTブロックを再配置するjpegtranなどの専用ツールを使う。

SVGを回転しても画像が鮮明なままなのはなぜか？

SVGはベクター形式でピクセルグリッドではなく数学的なパスとして形を保存しているためだ。transform="rotate(angle)"でSVGを回転させてもパス座標を変更するだけで、リサンプリングステップも品質低下も任意の角度で発生しない。ブラウザは再描画のたびに回転したパスを再ラスタライズし、常に現在のズームレベルで行う。このツールはラスター画像（PNG、JPG、WebP）を対象としているためリサンプリングコストが生じる。SVGはtransform属性を直接編集するか、InkscapeやIllustratorなどのベクターエディターを使って回転させるのが最善だ。

コーナーが透明ではなく白になるのはなぜか？

JPG出力をダウンロードしているためだ。JPGにはアルファチャンネルがないため、90度以外の回転で残った三角形のギャップはエンコード前に白で埋められる（背景に合成しないツールでは黒になり、よく見られるダークコーナーの驚きが生じる）。PNGダウンロードに切り替えるとコーナーが正しく透明になる。

1°刻みで回転できるか？

はい。上のスライダーは1°刻みで動き、入力フィールドは任意の小数点以下の値を受け付ける（45.5°も正常に動作する）。非常に精密なアライメント作業（例えば写真の傾いた地平線を直す）では度以下の精度が重要になることがある。90度以外の回転はわずかな品質コストを伴うため、繰り返しの微調整を行う場合は、複数の段階的な調整ではなく最終的な目標角度での1回の回転を検討すること。

何かサーバーに送信されるか？

いいえ。画像はブラウザによってデコードされ、Canvas 2D APIを通じてキャンバスに描画され、ダウンロード用に再エンコードされる。すべてブラウザのプロセス内で行われる。ファイルはデバイスから出ることはない。ページが読み込まれた後はオフラインでも動作する。