图片裁剪器 - 在线裁剪旋转图片

通过拖拽选择、预设比例和旋转来裁剪图片并转换格式。100%客户端处理 — 不上传任何图片。

将图片拖放到此处或点击浏览

支持 PNG, JPG, WebP, GIF

每张最大 50MB

常见问题

什么是图片裁剪器？为什么需要它？

图片裁剪器是一款可以从图片中选择并提取特定矩形区域的工具，用于去除不需要的边框、背景或干扰元素。它对于准备社交媒体图片、创建缩略图和改善照片构图至关重要。

如何使用这个图片裁剪工具？

1. 将图片拖放到上传区域或点击浏览文件。2. 拖动调整裁剪区域。3. 可选择预设宽高比。4. 使用旋转或翻转控件。5. 选择输出格式和质量。6. 点击「应用裁剪」然后下载。

我的图片数据安全吗？会上传到服务器吗？

您的图片100%安全，绝不会离开您的浏览器。所有裁剪都通过HTML5 Canvas API在客户端执行，不会向任何服务器传输图片数据。

有哪些可用的宽高比？

标准比例：1:1、4:3、3:2、16:9、16:10。社交媒体：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);
});