画像トリミング

必要なフレームに合わせてトリミングします

画像トリミングは、アップロードせずに、PNG、JPEG、または WebP 画像から選択した長方形の領域を切り出します。 エッジを削除したり、被写体を中央に配置したり、固定カード、サムネイル、アバター、ソーシャル プレビューの比率を一致させるために使用します。

クロップ ボックスはピクセル座標を使用します。X と Y は左上隅をマークし、幅と高さは選択した領域を定義します。クロップすると、構成と出力サイズが変更されます。選択したピクセルは、選択したトリミング サイズでエクスポートされます。

処理はブラウザのキャンバスを通じて実行されます。フリー クロップは任意のフレーミングに最適ですが、1:1、4:3、および 16:9 のプリセットは、目的地で安定したアスペクト比が必要な場合に役立ちます。再エンコード後はメタデータと方向の処理が異なる可能性があるため、出力を確認してください。

使い方

1. PNG、JPEG、または WebP 画像を 1 つアップロードします。
2. クロップ ボックスをドラッグし、ハンドルからサイズを変更し、比率プリセットを選択するか、正確なクロップ値を入力します。
3. JPEG/WebP の品質を調整し、出力をプレビューして、トリミングされた画像をダウンロードします。

画像をトリミングする必要があるのはどのような場合ですか?

画像クロップ は、画像のフレームを変更するためのものです。空白の余白を削除したり、重要な被写体に焦点を合わせたり、画像を固定比率のスロットに収めたりすることができます。

デザイン仕様または CMS で正確なピクセルのトリミングが必要な場合は、正確な X、Y、幅、高さの値を使用します。 JPEG/WebP エクスポートは品質を調整できますが、透明度を維持する必要がある場合は PNG がより安全な選択です。

Canvas でトリミング

キャンバスのトリミングでは、ソース座標が使用され、選択された四角形のみが出力キャンバスに描画されます。

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 エラー を返します。

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 へのリンクを返します。