画像の切り抜き
使い方（3ステップ）
タップまたはドラッグ＆ドロップで画像を読み込みます。
枠をドラッグ・四隅で拡縮し、切り抜く範囲を決めます（比率固定も可）。
「切り抜く」を押し、PNG/JPG/WebPでダウンロードします。
画面では縮めて表示し、切り出しは原寸で行っています
画面に出ている画像は、収まるように縮めたものだ。枠をドラッグして決めた範囲も、そのままでは表示用の座標にすぎない。
切り抜くときは、元画像の幅を表示幅で割った倍率をかけて、実際の画素の位置へ換算している。だからスマホの狭い画面で操作しても、切り出される画像の解像度は落ちない。表示が縮んでいるだけで、素材そのものには触れていない。
枠の下に出る数値が、換算したあとの実サイズである。「320 × 240 px」と出ていれば、保存されるのはその大きさのファイルだ。画面上の見かけの大きさとは一致しない。
JPGを選んだときだけ、先に白を敷いています
保存形式でJPGを選ぶと、画像を載せる前にカンバス全体を白で塗っている。PNGとWebPでは塗らない。
JPGは透過を持てない形式なので、透過のあるPNGをそのままJPGで書き出すと、透けていた部分は黒く沈む。試したところ、白を敷かない場合の透過部分はほぼ黒になった。ロゴを切り抜いてJPGで保存したら背景が真っ黒だった、という事故はこれが原因である。
透過をそのまま残したいならPNGかWebPを選ぶ。透過のない普通の写真なら、どれを選んでも見た目は変わらない。
選択範囲の下限を24ピクセルにした理由
枠は表示上の24ピクセルより小さくできないようにしてある。それ以下だと四隅のハンドルが重なり、指でつまめなくなるためだ。
これは表示上の大きさに対する制限なので、元画像が大きければ、切り出される実サイズは24ピクセルよりずっと大きくなる。ごく小さい範囲を正確に切りたいときは、先に画像リサイズで拡大しておくと扱いやすい。
同じ位置で何枚も切るのには向きません
一度に読み込めるのは1枚だけだ。範囲を決めて切り、次の画像に進む、という流れになる。同じ位置・同じ大きさで何十枚も切りそろえたい用途には向かない。
決まった比率にそろえたいだけなら、フリマ写真を正方形にのほうが速い。あちらは複数枚をまとめて処理でき、すべて1:1で書き出せる。
切り抜いたうえでサイズもそろえたいときは、この画面で比率を決めてから画像リサイズに通すとよい。
よくある質問
画像は送信されますか？
いいえ。読み込みも切り抜きもすべてブラウザ内（端末内）で行われ、画像がサーバーに送信されることはありません。
比率を固定して切り抜けますか？
はい。1:1（正方形）、16:9、4:3、3:4、9:16などに固定して切り抜けます。アイコンやサムネイル、SNS投稿用の画像作りに便利です。
画質は落ちますか？
切り抜きは元の解像度のまま行うため、選択範囲の画質は保たれます。PNGなら劣化なし、JPG・WebPは軽さ重視で保存します。
スマホでも使えますか？
使えます。指で枠をドラッグして範囲を指定し、四隅をつまんでサイズを調整できます。
切り抜いたあとの大きさはどこで分かりますか？
枠の下に出る数値が、保存されるファイルの実サイズです。画面上では縮めて表示していますが、切り出し自体は元の解像度のまま行うため、表示の見かけの大きさとは一致しません。
透過のあるPNGを切り抜くとどうなりますか？
PNGかWebPで保存すれば透過はそのまま残ります。JPGを選んだ場合は透過を持てないため、透けていた部分は白になります。白で塗ってから書き出しているためで、この処理がないと黒く沈みます。
複数の画像をまとめて切り抜けますか？
できません。1枚ずつの処理になります。同じ比率にそろえるだけであれば、フリマ写真を正方形にのほうが速く、複数枚を一括で処理できます。