Como criar um fluxo de recorte de imagens no React

Um componente de recorte em React é, principalmente, um input controlado. Ele deve expor um modelo de recorte estável, permanecer acessível e evitar acoplar o movimento do ponteiro a codificações grandes de canvas.

O que mais importa

• Evite cópias em base64 de arquivos grandes no estado; use URLs de objeto e revogue-as.
• Valide as dimensões mínimas de saída antes de habilitar o envio.

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
}

Detalhes técnicos que vale a pena conhecer

• A proporção de pixels do dispositivo altera a resolução do bitmap interno do canvas, mas não deve alterar o recorte normalizado da imagem de origem. Persistir pixels CSS renderizados torna as seleções instáveis entre telas.
• Sempre que possível, as URLs de objeto devem ficar fora do estado serializável do React e ser revogadas quando uma substituição for selecionada ou quando a prévia for desmontada, para liberar a memória de arquivo retida.
• A validação no cliente melhora o feedback, mas não é uma fronteira de confiança. O backend precisa rejeitar de forma independente coordenadas fora do intervalo, imagens grandes demais e tipos de conteúdo não suportados.
• Um modelo de recorte deve incluir a orientação da imagem de origem e a intenção de proporção para que uma seleção possa ser interpretada de forma consistente após o recarregamento da página ou o processamento no backend.
• Os incrementos de movimento pelo teclado devem ser visíveis e previsíveis, com alças que exponham nomes acessíveis e valores atuais, em vez de exigir um ponteiro.
• Fazer o upload do original antes que o usuário confirme um recorte pode melhorar a capacidade de resposta, mas, nesse caso, o cancelamento e a retenção de uploads abandonados precisam ser projetados explicitamente.

Uma abordagem prática

Limite da arquitetura

O React deve cuidar do estado da seleção e da UX da pré-visualização, não da codificação de produção custosa. Um recorte no lado do cliente pode ser uma conveniência, mas a validação e a geração no lado do servidor continuam necessárias para saídas confiáveis.