win-jのロゴ
個人技術ブログ

画像ユーティリティ

画像切り抜き

JPG、PNG、WEBP画像から必要な範囲を正確に選択し、新しい画像として保存できます。比率プリセット、元画像のピクセル座標、出力品質、透過背景の設定に対応しています。

ブラウザ内で安全に処理 画像をサーバーへ送信・保存せず、現在のブラウザ内で直接処理します。
元画像ピクセルで正確に選択 選択範囲と8つのハンドルをドラッグするか、X、Y、幅、高さを元画像のピクセルで直接入力できます。
形式と品質を設定 PNG、JPG、WEBPの形式、品質、透過背景または背景色を用途に合わせて設定できます。
STEP 1

画像をアップロード

切り抜くJPG、PNG、WEBP画像を1枚選択してください。

プライバシー 選択した画像はネットワークへ送信されません。結果ファイルは新しく生成され、元のEXIF情報や位置情報は含まれません。
使い方ガイド

必要な部分を切り抜いてから画像サイズを調整する

切り抜きは画像の一部を残す操作で、サイズ変更は寸法を変える操作です。元画像のピクセル座標で残す範囲を選びます。出力の幅と高さは選択範囲と同じなので、小さな範囲を切り抜いても細部は増えません。

作成・確認
win-j
最終確認
2026-09-30

こんな方におすすめ

  • プロフィール写真、商品サムネイル、記事のバナーを作る方。
  • マウスの目測ではなく正確な座標を指定したい方。

活用場面

  • 横長の写真から正方形のプロフィール画像を作る。
  • 透過ロゴの余白だけを取り除き、形は変えずに保存する。

入力から結果の確認まで

  1. 1

    40 MiB、6,000万画素までのJPG・PNG・WebPを選びます。

  2. 2

    自由比率または1:1・4:3・3:2・16:9・9:16などの比率を選びます。

  3. 3

    選択枠を動かすか、元画像基準のX・Y・幅・高さを入力します。

  4. 4

    透過を残す場合はPNG・WebPを選びます。JPEGでは指定した背景色を使います。

  5. 5

    切り抜いた結果を確認して保存します。提出先に固定の寸法がある場合は、その後に画像サイズ変更で調整します。

使用例 1

中央を正方形にする

入力
元画像1600×900px、X 350、Y 0、幅900、高さ900
結果
中央部分を残した900×900pxの画像。

左右それぞれ350pxを取り除く指定です。寸法の例であり、保存容量を保証する数値ではありません。

使用例 2

幅300pxのプロフィール画像

入力
1600×900pxから900×900pxを切り抜き、画像サイズ変更で縮小
結果
形を変えずに300×300pxへ調整。

1:1は選択枠の形を正方形にする指定です。最終的な幅を自動で300pxにするものではありません。

計算・処理の仕組み

選択範囲を元画像内に収め、CanvasのdrawImageで同じ幅・高さの新しいキャンバスへ描画し、PNG・JPEG・WebPで出力します。元ファイルは上書きしません。

注意点と制限

  • 選択範囲は長方形です。円形のマスク画像は生成しません。
  • 切り抜きだけでは拡大や鮮明化は行いません。
  • JPEGは透明度を保持できません。再エンコードで容量、色、メタデータが変わる場合があります。
  • 範囲外の画素は出力に含まれないため、再編集用に元画像を残してください。
データの取り扱い

元画像と結果はブラウザーのメモリー内で処理します。このツールは画像をwin-jのサーバーへ送信しません。

あわせて使えるツール

よくある質問

XとYは小さなプレビュー上の座標ですか？

いいえ。読み込んだ元画像のピクセル座標です。プレビューが縮小表示されても基準は変わりません。

1:1を選ぶと300×300pxになりますか？

いいえ。選択枠が正方形になるだけです。切り抜いた後、必要な幅と高さに縮小してください。

透明な背景を残せますか？

PNGまたはWebPを選び、透明度の保持を有効にしてください。JPEGは選択した背景色で透明部分を埋めます。

切り抜けばファイル容量制限も満たせますか？

必ずしもそうではありません。ピクセル寸法とファイル容量は別の条件なので、保存結果の両方を確認してください。