画像をトリミング
画像の上にボックスをドラッグしてトリミングします。自由な形または一般的なアスペクト比に固定でき、トリミングはフル解像度で行われます。
クリックして画像を選択、またはここにドラッグ＆ドロップ
JPG、PNG、WebPに対応。デバイス内にとどまり、アップロードは一切されません。
生成されると、トリミングされた画像がここに表示されます。
必要であれば先にアスペクト比を選び（プロフィール写真なら1:1など）、次にボックスを目的の位置にドラッグしてください。トリミングはプレビューの表示サイズではなく画像のフル解像度で行われるため、出力は鮮明なままです。
仕組み
あなたのファイルはURL.createObjectURLを通じて読み込まれます。これはローカルのメモリ内参照であり、アップロードでは決してありません。そしてエディターに収まるよう縮小して表示されます。あなたがドラッグするトリミングボックスは画面上のピクセルで追跡されますが、トリミングをクリックした瞬間、その座標は画像の実際のサイズと表示サイズの比率で乗算されます。つまり、4000ピクセルの写真が800ピクセル幅で表示されている場合、画面上の200ピクセル幅のボックスは、実際の画像の1000ピクセル幅の領域を選択することになります。選択された矩形はcanvas APIのdrawImageのソース矩形形式でコピーされ、フル解像度のオリジナルからその正確なピクセルを抽出します。
出力形式は入力形式に従います。PNGを入力すればPNGを出力し（可逆で、元の領域とピクセル単位で完全に同一）、それ以外はcanvas.toBlobを介して92%の品質でJPEGとして再エンコードされます。この違いは知っておく価値があります。JPEGをトリミングするということは、JPEG圧縮がもう1世代加わることを意味し、92%の品質では通常目に見えませんが実際には発生しています。ピクセル単位で正確なトリミングが必要な場合は、ツールにPNGを渡してください。
上記のすべては、あなたのブラウザ自身の画像デコーダーとcanvas内で行われます。写真をドロップする前にDevToolsのNetworkタブを開いてみてください。画像を運ぶリクエストは一切発生しません。これはサーバー側のサイズ制限も待ち行列も存在しないことを意味します。