Bild-Zuschnitt-Workflow in React erstellen

Eine React-Zuschnittkomponente ist vor allem ein kontrolliertes Eingabeelement. Sie sollte ein stabiles Zuschnittmodell bereitstellen, barrierefrei sein und die Kopplung von Zeigerbewegungen an aufwendige Canvas-Encodings vermeiden.

Worauf es besonders ankommt

• Vermeiden Sie Base64-Kopien großer Dateien im Zustand; verwenden Sie Object-URLs und widerrufen Sie diese.
• Validieren Sie Mindestausgabemaße, bevor Sie das Absenden aktivieren.

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
}

Wissenswerte technische Details

• Das Gerätepixelverhältnis ändert die Backing-Auflösung des Canvas, sollte aber nicht den normalisierten Quellzuschnitt ändern. Werden gerenderte CSS-Pixel persistiert, wird die Auswahl über verschiedene Bildschirme hinweg instabil.
• Objekt-URLs sollten nach Möglichkeit außerhalb des serialisierbaren React-Zustands liegen und widerrufen werden, wenn ein Ersatz ausgewählt wird oder die Vorschau ausgehängt wird, um den zurückgehaltenen Dateispeicher freizugeben.
• Client-seitige Validierung verbessert das Feedback, ist aber keine Vertrauensgrenze. Das Backend muss außerhalb des gültigen Bereichs liegende Koordinaten, übergroße Bilder und nicht unterstützte Inhaltstypen unabhängig zurückweisen.
• Ein Zuschnittmodell sollte die Quellausrichtung und die Seitenverhältnis-Absicht enthalten, damit eine Auswahl nach einem Seiten-Neuladen oder einer Backend-Verarbeitung konsistent interpretiert werden kann.
• Tastatur-Bewegungsschritte sollten sichtbar und vorhersehbar sein, mit Griffpunkten, die zugängliche Namen und aktuelle Werte offenlegen, statt ein Zeigegerät vorauszusetzen.
• Das Hochladen des Originals vor der Bestätigung eines Zuschnitts durch den Nutzer kann die Reaktionsfähigkeit verbessern, doch Abbrüche und die Aufbewahrung abgebrochener Uploads müssen dann explizit gestaltet werden.

Ein praxisnaher Ansatz

Architekturgrenze

React sollte den Auswahlzustand und die Vorschau-UX verwalten, nicht das aufwendige produktive Encoding. Ein clientseitiger Zuschnitt kann eine Komfortfunktion sein, doch für vertrauenswürdige Ausgaben bleiben serverseitige Validierung und Erzeugung notwendig.