画像トリミング

画像トリミング

このツールは、PNG、JPEG、WebP 画像1枚をブラウザ内で直接トリミングします。切り抜き範囲をドラッグまたはリサイズし、比率プリセットを選ぶか、正確なピクセル座標を入力できます。

元のファイルは端末上に残ります。Canvas の書き出しは、ブラウザが対応している場合 PNG、JPEG、WebP を維持し、必要に応じて PNG にフォールバックします。

自由切り抜きは任意の範囲に、1:1、4:3、16:9 などの比率プリセットは SNS プレビュー、サムネイル、ドキュメント用サイズに便利です。

使用方法

1. PNG、JPEG、WebP 画像を1枚アップロードします。
2. 切り抜き範囲をドラッグし、ハンドルでサイズ変更し、比率プリセットまたは正確な値を指定します。
3. JPEG/WebP の品質を調整し、出力を確認してからトリミング後の画像をダウンロードします。

画像トリミングの用途

不要な端を取り除き、被写体を強調し、カード、サムネイル、SNS プレビュー用の固定比率に合わせられます。

デザインや CMS が特定ピクセルの切り抜き範囲を要求する場合は、正確な数値入力を使えます。

Canvas でトリミング

ブラウザでは Canvas drawImage の元座標を使用します：

const canvas = document.createElement('canvas');
canvas.width = crop.width;
canvas.height = crop.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(image, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
canvas.toBlob(saveBlob, outputMime, quality);

MCP 連携

MCP (Model Context Protocol) により、AI エージェントやアプリは Coding.Tools のユーティリティを発見し、変換、整形、ハッシュ、生成ワークフローで実行できます。

MCP ツール名: image-crop

MCP エンドポイント: https://coding.tools/mcp

まず tools/list を呼び出してください。各ツールには inputSchema、outputSchema、examples が含まれるため、AI エージェントやクライアントは推測せずに有効な引数を作成できます。

tools/call では、表示用の値は result.content[0].text、機械処理用の値は result.structuredContent を読みます。ツール単位の失敗は isError: true、プロトコル単位の失敗は JSON-RPC error を返します。

tools/call リクエスト例:

curl -s https://coding.tools/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "MCP-Protocol-Version: 2025-06-18" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"image-crop","arguments":{}}}'

この画像ツールは MCP ではブラウザ専用です。tools/call はサーバーでローカル画像バイトを処理せず、isError: true と Web UI への resource_link を返します。

ほとんどのテキストおよびデータツールは input 文字列と任意の options を受け取ります。ブラウザの画像 API が必要な画像ツールは発見用に公開され、必要に応じて Web UI へのリンクを返します。