Recortador de Imágenes - Recortar y Rotar Imágenes en Línea
Recorte, rote, voltee y convierta imágenes con relaciones de aspecto preestablecidas. 100% del lado del cliente — sin subir imágenes.
Preguntas Frecuentes
¿Qué es un recortador de imágenes y por qué lo necesito?
Un recortador de imágenes permite seleccionar y extraer una región rectangular específica de una imagen, eliminando bordes, fondos o elementos no deseados. Es esencial para preparar imágenes para redes sociales, crear miniaturas enfocadas y mejorar la composición fotográfica.
¿Cómo uso esta herramienta de recorte?
1. Arrastre y suelte su imagen en el área de carga o haga clic para buscar. 2. Ajuste el área de recorte arrastrando y usando los controles. 3. Opcionalmente elija una relación de aspecto preestablecida. 4. Use los controles de rotación o volteo si es necesario. 5. Elija el formato de salida y la calidad. 6. Haga clic en 'Aplicar Recorte' y luego 'Descargar'.
¿Están seguros mis datos de imagen?
Sus imágenes son 100% seguras y nunca salen de su navegador. Todo el recorte se realiza del lado del cliente usando la API de Canvas HTML5. No se transmiten datos de imagen a ningún servidor.
¿Qué relaciones de aspecto están disponibles?
Relaciones estándar: 1:1, 4:3, 3:2, 16:9, 16:10. Redes sociales: Instagram Portrait (4:5), Instagram Story (9:16), Facebook Post (1.91:1), Facebook Cover (2.63:1), Twitter/X Header (3:1). También puede ingresar una relación personalizada.
¿Qué formatos de imagen son compatibles?
Acepta PNG, JPEG, WebP y GIF como entrada. Para salida: PNG (sin pérdida), JPEG (con control de calidad), WebP (con transparencia). La entrada GIF solo extrae el primer fotograma.
¿Cuál es la diferencia entre recortar y redimensionar?
Recortar elimina partes de la imagen seleccionando una región. Redimensionar cambia las dimensiones generales escalando todos los píxeles. Si necesita ambos, primero recorte y luego use Image Resizer.
¿Puedo rotar o voltear mi imagen antes de recortar?
Sí. Incluye botones de rotación de 90°, un deslizador de rotación fina (-45 a +45 grados) y controles de volteo horizontal/vertical.
¿Cuál es el tamaño máximo de archivo compatible?
Soporta imágenes de hasta 50MB y resoluciones de hasta 16384 x 16384 píxeles.
Ejemplos de Código
// 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);
});