画像クロップツール

画像クロップツールは、サーバーへのアップロードなしでJPEG、PNG、 WebP画像をクロップできる無料のブラウザベースツールです。 スクリーンショットの余白を切り取る、プロフィール写真を完璧な円形に カットする、大きな画像から特定の領域を抽出するなど、素早くプライベート に処理できます。

すべてのクロップはHTML5 Canvas APIを使用してブラウザ内で完全に 行われます。画像をアップロードすると、 FileReader.readAsDataURL() でメモリに読み込まれ、画面上に表示 されて視覚的に選択できます。選択領域はオフスクリーンの <canvas> 要素に ctx.drawImage() のソース矩形パラメータを 使って描画されます。円形クロップでは ctx.globalCompositeOperation = 'destination-in' と ctx.arc() を使用して出力を円形にマスクし、透明度を保持するために PNGとしてエクスポートします。ピクセルデータがデバイスの外に出ることは 一切ありません。

2つのクロップモードが利用できます。矩形モード（デフォルト）は 標準的な矩形クロップを生成し、元の画像形式を保持します。 円形モードは選択矩形内に内接する楕円形の領域で画像をクロップし、 透明な角を持つ正方形のPNGを出力します — アバターやプロフィール写真に 最適です。

5つのアスペクト比プリセット（Free、1:1、4:3、16:9、3:2）で、 ソーシャルメディア、印刷、動画で使用される一般的な比率に選択を ロックできます。X、Y、Width、Heightフィールドに正確なピクセル 座標を入力することも可能です。

インタラクティブなクロップ領域には三分割法のグリッドオーバーレイが 表示され、古典的な写真構図に沿ったクロップの構成をサポートします。 選択領域をドラッグして位置を変更するか、角と辺のハンドルを使って サイズを変更できます。クロップ領域外の暗くなったオーバーレイで、 何が残るかが一目でわかります。

クロップ後に出力をリサイズする必要がある場合は、 画像リサイズツールをお試しください。 クロップの前後に明るさやコントラストを調整するには、 画像明るさ・コントラストツールを 使用してください。ターゲットのアスペクト比に適した寸法を計算するには、 アスペクト比計算ツールが便利です。

1. アップロードエリアに画像をドラッグ＆ドロップするか、クリックしてファイルを選択します。JPEG、PNG、WebPに対応しています（最大50MB）。
2. 画像がエディタに表示され、画像の80%をカバーするデフォルトのクロップ選択が設定されます。ドロップダウンで矩形または円形クロップモードを選択します。
3. アスペクト比プリセット（Free、1:1、4:3、16:9、3:2）を選択して選択範囲の比率をロックするか、Freeのままにして自由にクロップします。
4. 選択範囲内をドラッグして移動するか、角や辺のハンドルをドラッグしてサイズを変更します。または、X、Y、Width、Heightフィールドに正確なピクセル値を入力して精密に制御します。
5. Crop Image をクリック（または Ctrl+Enter を押す）してクロップを実行します。クロップされたプレビューが右側に表示されます。
6. 結果を確認します。クロップが正確でない場合は、選択範囲を調整して再度クロップします。
7. Download をクリックしてクロップ画像を保存します。円形モードのクロップは透明度を保持するため常にPNGとして保存されます。Reset で新しい画像からやり直します。