ブラウザベースの画像切り抜きの仕組み
切り抜き処理はすべてブラウザタブ内でCanvas APIを使って実行されます。サーバーサイド処理、アップロード、サードパーティサービスは不要です。すべての工程がお使いのデバイス上で行われます。
- 画像を
<img>要素に読み込み、ブラウザがローカルでデコードします。キャンバスオーバーレイが画像をビューポートに合わせて拡大表示し、ドラッグ可能な選択矩形が現在の切り抜き領域を示します。 - 矩形の端や角をドラッグして切り抜き領域を調整します。矩形は画像境界に固定されるため、画像外の領域を選択することはできません。固定アスペクト比（1:1、16:9、4:3）が有効な場合、サイズ変更は自動的にその比率を維持します。
- ピクセル表示がドラッグに合わせてリアルタイムで更新され、画像ピクセル座標での切り抜き幅、高さ、X、Y位置を示します。これにより、推測なしで正確な寸法を狙えます。
- 「切り抜いてダウンロード」をクリックすると、ページはソース画像の選択領域のみをオフスクリーンキャンバスに元のピクセル解像度で描画し、
canvas.toBlob()を介してソースファイルと同じ形式で結果をエクスポートします。ダウンロード用のBlob URLが生成されます。
なぜオンラインで画像を切り抜くのか？
- 切り抜きは不要な端、余白、視覚的なノイズを取り除きます。1回の切り抜きで、フィルターや色調整よりも写真の構図が改善されることがよくあります。
- アスペクト比の制御は公開プラットフォームに不可欠です。SNSフィードはプロフィールに1:1、動画サムネイルに16:9、標準写真に4:3を期待します。適切な比率に切り抜くことで、アップロード時のレターボックスやはみ出しを防げます。
- クライアント側の切り抜きは、写真編集機能のない制限された社用デバイスで唯一の選択肢です。アップロードがないため、データ漏洩リスクがなく、機密画像のコンプライアンスレビューも不要です。
- リアルタイム寸法表示で推測が不要です。ドラッグ中にピクセル座標と選択サイズが確認できるため、ピクセル測定ツールに切り替えずに正確な幅と高さに切り抜けます。
よくある切り抜きの活用例
切り抜きはWeb公開、SNS、ソフトウェア開発で最も一般的な画像編集のひとつです。ブラウザベースの切り抜きツールが時間を節約する3つのパターンを紹介します。
- オンラインストアの商品写真を準備する。1:1や4:5の統一アスペクト比に切り抜いて、すべてのサムネイルをグリッドに整列。エクスポートは元の形式を保持するため、JPEG商品写真はJPEGのままです。
- ドキュメントやバグレポート用のスクリーンショットをトリミング。ブラウザツールバー、Windowsタスクバー、機密通知を切り取ってから画像をチケットやプルリクエストに添付。
- ランディングページのヒーロー画像やバナーをフレーミング。16:9プリセットをロックし、写真の最も重要な部分を切り抜き矩形の中央に配置し、retinaディスプレイで最高品質を得るために元の解像度でエクスポート。
実例：4000×3000の写真をヒーローバナー用に1200×675に切り抜く
デジタルカメラの4000×3000ピクセルの写真は、一般的なWebヒーローバナーには大きすぎます。バナー領域は1200×675（16:9フレーム）かもしれません。
写真をアップロードゾーンにドロップします。画像はフル解像度で読み込まれますが、快適なドラッグ操作のためにビューポートに合わせて拡大表示されます。16:9のアスペクト比プリセットを選択します。切り抜き矩形は即座に画像に収まる最大の16:9領域にスナップします。矩形をドラッグして、焦点となる被写体（山頂、製品、人物の顔など）をフレーム内に配置します。リアルタイム表示は現在の選択範囲を4000×2250（全画像の16:9ウィンドウ）として示します。角のハンドルをつかんで内側にドラッグし、幅の表示が 1200 px になるまで調整します。比率がロックされているため、高さは自動的に追従します。切り抜いてダウンロードをクリックします。ページは元のピクセルから選択された1200×675領域を抽出し、ソース形式で切り抜きファイルを提供します。全体の処理は1〜2秒で完了し、初期ページ読み込み以外のネットワーク帯域は使用しません。
切り抜きに対応している画像形式は？
ブラウザがデコードできる形式であればすべて受け付けます：PNG、JPEG、WebPでほぼすべての実用的なユースケースをカバーします。切り抜き後の出力はソースファイルと同じ形式で保存されます。PNGはロスレス、JPEGは元の品質レベルを保持、WebPはWebPのままです。形式はソースファイルのMIMEタイプから検出されます。
切り抜きでファイルサイズは小さくなりますか？
切り抜きはピクセルを除去するため、大きな枠線や空白領域を切り取った場合など、出力のファイルサイズは通常ソースより小さくなります。エクスポートは元のファイル形式とそのエンコードパラメータを使用するため、PNGはロスレス、JPEGは元の品質設定を維持します。削減は再圧縮ではなくピクセル数の減少のみによるものです。
アスペクト比プリセットの機能は？
プリセット（1:1、16:9、4:3、3:2、9:16）は切り抜き矩形の幅と高さの比率を固定します。プリセットが有効な場合、角や辺のハンドルをドラッグすると比率を一定に保ったまま選択サイズが調整されます。フリーモードに切り替えると制約が解除され、矩形を自由にリサイズできます。比率は画像ピクセル座標に基づいて適用されるため、出力は選択した正確なアスペクト比になります。
画像はサーバーにアップロードされますか？
いいえ。画像がデバイスの外に出ることはありません。ページはブラウザのFile APIを使用して画像をメモリに読み込み、Canvas APIで切り抜きとエクスポートを行います。ブラウザのDevToolsのNetworkパネルを開いて確認できます—切り抜き中の外部リクエストは初期ページ読み込みと広告呼び出しのみです。画像データは送信されません。
正確なピクセル座標を入力して特定の領域を切り抜けますか？
現在のバージョンでは、画像プレビュー上でのドラッグ操作で切り抜き矩形を調整します。選択範囲のX、Y、幅、高さのリアルタイムピクセル座標は読み取れます。v1では切り抜き矩形への直接数値入力はできませんが、将来のアップデートで機能追加が計画されています。
元の画像はどうなりますか？
元のファイルはデバイス上に残ります。ページは表示と切り抜きのために画像をブラウザのメモリに読み込みますが、ディスク上のソースファイルを変更することはありません。切り抜き出力は別途ダウンロードする新しいファイルです。元のファイルはコンピュータやスマートフォンの元の場所でそのまま残ります。
切り抜きにファイルサイズ制限はありますか？
このツールは、低スペックデバイスでのブラウザメモリを管理するために、アップロードゾーンで1ファイルあたり30MBの制限を設けています。画像が30MBより大きい場合は、専用の画像リサイズツールで縮小してからここに読み込んで切り抜いてください。
スマートフォンやタブレットでも切り抜けますか？
はい。切り抜きハンドルはタッチターゲットを考慮したサイズになっており、インタラクションはマウスクリックと指タップの両方で動作するポインターイベントを使用します。スマートフォン画面では画像プレビューが利用可能な幅に適応し、コントロールは縦に積み重なって片手で操作しやすくなっています。