Cómo crear un flujo de trabajo de recorte de imágenes en React

Un componente de recorte en React es, ante todo, una entrada controlada. Debería exponer un modelo de recorte estable, mantenerse accesible y evitar acoplar el movimiento del puntero a codificaciones extensas del canvas.

Lo más importante

• Evita copias en base64 de archivos grandes en el estado; usa URL de objeto y revócalas.
• Valida las dimensiones mínimas de salida antes de habilitar el envío.

interface Crop {
  height: number
  width: number
  x: number
  y: number
}

export function normalizeCrop(crop: Crop, sourceWidth: number, sourceHeight: number): Crop {
  return {
    x: crop.x / sourceWidth,
    y: crop.y / sourceHeight,
    width: crop.width / sourceWidth,
    height: crop.height / sourceHeight,
  }
}

import { useEffect, useState } from 'react'

export function useObjectUrl(file: File | null): string | null {
  const [url, setUrl] = useState<string | null>(null)

  useEffect(() => {
    if (file == null) {
      setUrl(null)
      return
    }

    const nextUrl = URL.createObjectURL(file)
    setUrl(nextUrl)
    return () => URL.revokeObjectURL(nextUrl)
  }, [file])

  return url
}

Detalles técnicos que conviene conocer

• Los cambios en la relación de píxeles del dispositivo modifican la resolución interna de píxeles del canvas, pero no deberían cambiar el recorte de origen normalizado. Persistir los píxeles CSS renderizados hace que las selecciones sean inestables entre pantallas.
• Las URL de objeto deberían vivir fuera del estado serializable de React cuando sea posible y deberían revocarse cuando se selecciona un reemplazo o se desmonta la vista previa, para liberar la memoria de archivo retenida.
• La validación del cliente mejora la retroalimentación, pero no es un límite de confianza. El backend debe rechazar de forma independiente las coordenadas fuera de rango, las imágenes de tamaño excesivo y los tipos de contenido no admitidos.
• Un modelo de recorte debería incluir la orientación de la fuente y la intención de relación de aspecto, para que una selección pueda interpretarse de forma consistente tras recargar la página o procesarla en el backend.
• Los incrementos de movimiento con teclado deberían ser visibles y predecibles, con asas que expongan nombres accesibles y valores actuales en lugar de requerir un puntero.
• Subir el original antes de que el usuario confirme un recorte puede mejorar la capacidad de respuesta, pero entonces la cancelación y la retención de subidas abandonadas deben diseñarse de forma explícita.

Un enfoque práctico

Límite de la arquitectura

React debería encargarse del estado de selección y la experiencia de vista previa, no de la codificación de producción costosa. Un recorte del lado del cliente puede ser una comodidad, pero la validación y generación del lado del servidor siguen siendo necesarias para obtener salidas confiables.