画像クロッパー - 画像の切り抜き・回転 オンライン
ドラッグ選択、アスペクト比プリセット、回転で画像を切り抜き。100%クライアント処理 — サーバーへのアップロードなし。
よくある質問
画像クロッパーとは何ですか？なぜ必要ですか？
画像クロッパーは、画像から特定の矩形領域を選択して抽出するツールです。不要な境界線、背景、または邪魔な要素を除去します。SNS用の画像準備、サムネイル作成、写真の構図改善に不可欠です。
この画像クロッパーツールの使い方は？
1. アップロードエリアに画像をドラッグ＆ドロップするか、クリックしてファイルを選択。2. ドラッグでトリミング領域を調整。3. プリセットアスペクト比を選択（任意）。4. 回転・反転コントロールを使用（任意）。5. 出力形式と品質を選択。6.「切り抜き適用」をクリックしてダウンロード。
画像データは安全ですか？サーバーにアップロードされますか？
画像は100%安全で、ブラウザから出ることはありません。すべてのトリミングはHTML5 Canvas APIを使用してクライアント側で実行されます。
どのアスペクト比が利用できますか？
標準: 1:1、4:3、3:2、16:9、16:10。SNS: Instagram Portrait (4:5)、Instagram Story (9:16)、Facebook Post (1.91:1)、Facebook Cover (2.63:1)、Twitter/X Header (3:1)。カスタム比率の入力も可能です。
対応している画像形式は？
入力: PNG、JPEG、WebP、GIF。出力: PNG（ロスレス）、JPEG（品質制御付き）、WebP。GIF入力は最初のフレームのみ抽出されます。
切り抜きとリサイズの違いは？
切り抜きは領域を選択して画像の一部を除去します。リサイズは全ピクセルをスケーリングして全体サイズを変更します。両方必要な場合は、先に切り抜いてからImage Resizerを使用してください。
切り抜き前に画像を回転・反転できますか？
はい。90度回転ボタン、-45〜+45度の微調整スライダー、水平/垂直反転コントロールがあります。
サポートされる最大ファイルサイズと解像度は？
ファイルあたり最大50MB、解像度は最大16384 x 16384ピクセルに対応しています。
コード例
// Client-side image cropping using Canvas API
async function cropImage(file, cropX, cropY, cropWidth, cropHeight, options = {}) {
const { quality = 0.92, format = null } = options;
return new Promise((resolve, reject) => {
const img = new Image();
const url = URL.createObjectURL(file);
img.onload = () => {
URL.revokeObjectURL(url);
const canvas = document.createElement('canvas');
canvas.width = cropWidth;
canvas.height = cropHeight;
const ctx = canvas.getContext('2d');
const outputType = format || file.type || 'image/png';
if (outputType === 'image/jpeg') {
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, cropWidth, cropHeight);
}
ctx.drawImage(
img,
cropX, cropY, cropWidth, cropHeight,
0, 0, cropWidth, cropHeight
);
canvas.toBlob(
(blob) => {
if (!blob) { reject(new Error('Crop failed')); return; }
resolve({
blob,
width: cropWidth,
height: cropHeight,
originalWidth: img.naturalWidth,
originalHeight: img.naturalHeight,
});
},
outputType,
outputType === 'image/png' ? undefined : quality
);
};
img.onerror = () => { URL.revokeObjectURL(url); reject(new Error('Failed to load')); };
img.src = url;
});
}
// Crop to center square
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
const file = e.target.files[0];
const img = new Image();
img.src = URL.createObjectURL(file);
await new Promise((r) => (img.onload = r));
const size = Math.min(img.naturalWidth, img.naturalHeight);
const x = Math.round((img.naturalWidth - size) / 2);
const y = Math.round((img.naturalHeight - size) / 2);
const result = await cropImage(file, x, y, size, size, { format: 'image/png' });
console.log(`Cropped: ${result.width}x${result.height}`);
const url = URL.createObjectURL(result.blob);
const a = document.createElement('a');
a.href = url; a.download = 'cropped.png'; a.click();
URL.revokeObjectURL(url);
});