画像の切り抜き・回転・反転をブラウザ内で — /tools/image-edit の思想と使い方

SNS アイコンの正方形切り出し、履歴書の証明写真の比率合わせ、商品画像の回転、スキャン画像の左右反転。Photoshop を開くほどでもないのに地味に面倒な作業ですよね。

Zerosend の画像編集ツール は、この 3 操作を 1 画面に集約してブラウザ内で完結させます。

こんな場面で使える

• SNS アイコン・プロフィール画像: Instagram や Twitter は正方形が基本。1:1 プリセットでワンクリック切り抜き
• 証明写真のトリミング: 就活・パスポート申請用に 3:4 比率で切り抜き。顔が含まれるデータをサーバーに送りたくないときに特に有効
• スキャン画像の向き修正: スキャナが横向きで読み込んだ場合、90° 回転で即座に修正
• 商品画像の整形: EC サイト用に余白をカットして正方形化
• 鏡像反転: 文字が逆に写り込んだ画像を水平反転で修正
• ブログ・資料のサムネイル: 16:9 プリセットで統一感のある横長画像を作成

なぜブラウザ内で編集するのか

トリミングは個人情報と密接です。証明写真を切り出すなら顔、名刺をスキャンするなら氏名・連絡先、社内資料の一部を切り出すなら機密情報が含まれます。

これらを「画像を切り抜くだけ」のオンラインツールにアップロードすると、切り抜き前の原版が相手のサーバーに残る可能性があります。オンラインツールはビジネスモデル上、アップロード済みのファイルをログ・解析・AI 学習に回しても契約上問題にならないケースが多く、利用者側からはその境界が見えません。

Zerosend は編集処理そのものをローカルで行うことで、この不透明性を取り除きます。

使い方

1. /tools/image-edit を開く
2. 画像をドラッグ&ドロップ
3. 3 つの操作から選ぶ:
   • 切り抜き: 矩形を選択範囲として指定
   • 回転: 90° / 180° / 270° の 3 ステップ
   • 反転: 水平 / 垂直
4. プレビューで結果を確認してダウンロード

仕組み

• 切り抜き: 選択した矩形の寸法の <canvas> を作り、drawImage で元画像の該当領域を切り出し
• 回転: 回転行列を ctx.transform で適用してから描画
• 反転: ctx.scale(-1, 1) で水平、ctx.scale(1, -1) で垂直

いずれも Canvas API の基本操作の組み合わせで、追加ライブラリは使っていません。処理は数十ミリ秒で完了します。

よくある質問

Q. 元の画像ファイルは変更されますか？ A. いいえ。処理はブラウザのメモリ上で行われ、ダウンロードするまで何も書き変わりません。元ファイルはそのまま手元に残ります。

Q. 対応している画像形式は？ A. JPEG・PNG・WebP・GIF (静止画) に対応しています。HEIC 形式の場合は先に HEIC → JPG 変換 を使ってから編集してください。

Q. 比率指定 (1:1, 4:3, 16:9) で切り抜けますか？ A. はい。プリセットボタンで一発切り替えできます。SNS アイコンは 1:1、YouTube サムネは 16:9 など。

Q. 複数画像をまとめて同じ比率で切り抜けますか？ A. 現状は 1 枚ずつです。バッチ処理は要望を見ながら検討します。

Q. 編集後に再度編集したい場合は？ A. ダウンロードしたファイルを再度ドロップすれば、何度でも編集できます。

関連ツール

• 画像リサイズ — 切り抜き後に寸法を揃えたいとき
• 画像圧縮 — 編集後の軽量化
• 画像結合 — 複数画像を 1 枚にまとめたいとき