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

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

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

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

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

これらを「画像を切り抜くだけ」のオンラインツールにアップロードしてしまうと、切り抜き前の原版が相手のサーバーに残る可能性があります。オンラインツールはビジネスモデル上、アップロード済みのファイルをログ・解析・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. 比率指定 (1:1, 4:3, 16:9) で切り抜けますか？ A. はい。プリセットボタンで一発切り替えできます。SNS アイコンは 1:1、YouTube サムネは 16:9 など。

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

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

関連ツール

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