使い方
- ファイルを選択を押すか、画像を枠にドロップします。Ctrl+V で貼り付けることもできます。
- 画像が横向きなら、左に回転、右に回転、または反転のボタンを押します。
- 縦横比を選ぶか、自由のままにします。枠をドラッグして置き、角や辺をドラッグして大きさを変えます。
- 正確な数値にしたい場合は、左（px）、上（px）、幅（px）、高さ（px）を入力します。
- 画像を切り抜くを押し、結果をダウンロードします。
枠を動かし、大きさを変える
枠の中をドラッグすると動き、角や辺をドラッグすると大きさが変わります。比率を選んでいるときは、角をドラッグしても比率が保たれ、辺をドラッグすると比率に従ってもう一方の辺が決まります。枠が画像の外に出ることはありません。キーボードでは、Tab で枠に移動し、矢印キーで動かし、Shiftと矢印キーで大きさを変えます。
先に回転と反転をする
スマートフォンで横に構えて撮った写真は、ブラウザが向きを読むときに回転されるので、通常は正しい向きで表示されます。そうならない場合は、ここで回転か反転をしてください。切り抜きは回転後の画像から切り取られ、回転や反転をすると枠は画像全体に戻ります。
円形の切り抜き
円形の切り抜きは正方形の範囲を使い、それを円でクリップします。円の外側の角は透明になります。JPEGは透明さを保存できないため、結果は常にPNGです。プロフィール画像や丸いロゴに使えます。
例：4000 × 3000 pixel の写真から16:9のヘッダー
4000 × 3000 pixel の写真で、比率を16:9にします。その形で最も大きい枠は、幅4000ピクセル、高さ2250ピクセルで、上から375ピクセルの位置に置かれ、上下の帯が均等に取り除かれます。
結果は4000 × 2250 pixel の画像で、Webサイトのヘッダーに合う形です。ファイル名の末尾は -切り抜き になります。
よくある質問
切り抜くとき、写真はアップロードされますか？
いいえ。切り抜きは、お使いの端末の中でブラウザが画像から切り取ります。ページを読み込んだ後にインターネット接続を切り、画像を切り抜いて確かめられます。
切り抜くと、画像の画質は下がりますか？
画像の一部を切り取っても、残った画素は変わりません。JPEGは高い品質で書き直されるため、JPEGの切り抜きは元と少し違いますが、この品質では違いはわずかです。
丸いプロフィール画像は、どう作りますか？
円形に切り抜くにチェックを入れます。枠は正方形になり、画像は角が透明な円でクリップされます。結果はPNGになるので、どの背景の上にも置けます。
回転すると、枠が画像全体に戻るのはなぜですか？
回転や反転は画像の形を変えるため、枠は画像全体か、選んだ比率に設定し直されます。画像を回転させた後に、枠をもう一度描くか入力してください。
正確なピクセル数で切り抜けますか？
はい。左、上、幅、高さをピクセルで入力します。枠は画像の中に収まるので、端を越える値は端に戻されます。
出典
- MDN（英語）: CanvasRenderingContext2D.setTransform()、画像の配置と回転
- MDN（英語）: CanvasRenderingContext2D.clip()、円形の切り抜き
- MDN（英語）: ポインターイベント、マウス、ペン、タッチで枠をドラッグする
数値と文章の最終確認日：2026年11月10日火曜日。