Comment créer un processus de recadrage d’images avec React

Un composant de recadrage React est avant tout un champ de saisie contrôlé. Il doit exposer un modèle de recadrage stable, rester accessible et éviter de coupler les mouvements du pointeur à de lourdes opérations d’encodage du canvas.

L’essentiel

• Évitez les copies en base64 de fichiers volumineux dans l’état ; utilisez des URL d’objet et révoquez-les.
• Validez les dimensions minimales de sortie avant d’activer l’envoi.

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
}

Détails techniques à connaître

• Le rapport de pixels de l’appareil modifie la résolution du bitmap interne du canvas, mais ne doit pas modifier le recadrage normalisé de la source. Enregistrer les sélections en pixels CSS rendus les rend instables d’un écran à l’autre.
• Les URL d’objet doivent, si possible, être conservées en dehors de l’état sérialisable de React et être révoquées lorsqu’un fichier de remplacement est sélectionné ou que le composant d’aperçu est démonté, afin de libérer la mémoire occupée par le fichier.
• La validation côté client améliore le retour d’information, mais ne constitue pas une frontière de confiance. Le backend doit rejeter de manière indépendante les coordonnées hors limites, les images trop grandes et les types de contenu non pris en charge.
• Un modèle de recadrage devrait inclure l’orientation de la source et le rapport largeur/hauteur souhaité afin que la sélection puisse être interprétée de manière cohérente après le rechargement de la page ou le traitement par le backend.
• Les incréments de déplacement au clavier doivent être visibles et prévisibles, avec des poignées qui exposent des noms accessibles et les valeurs actuelles sans nécessiter de pointeur.
• Téléverser l’original avant que l’utilisateur ne confirme un recadrage peut améliorer la réactivité, mais il faut alors prévoir explicitement l’annulation et la conservation des téléversements abandonnés.

Une approche pratique

Périmètre architectural

React devrait gérer l’état de la sélection et l’expérience utilisateur de l’aperçu, plutôt que l’encodage coûteux destiné à la production. Un recadrage côté client peut être pratique, mais la validation et la génération côté serveur restent nécessaires pour obtenir des résultats de confiance.