Bilder in JavaScript zuschneiden: Koordinatengenauigkeit wahren

Ein JavaScript-Zuschneidewerkzeug erfüllt zwei Aufgaben: Es hilft einer Person, einen Bereich auszuwählen, und beschreibt diesen Bereich eindeutig. Das Vermischen von Vorschau-Pixeln, CSS-skalierten Koordinaten und Quell-Pixeln ist die häufigste Ursache für fehlerhafte Zuschnitte.

Worauf es besonders ankommt

• Vermeiden Sie es, sehr große Bilder auf speicherbeschränkten Geräten wiederholt zu dekodieren.
• Validieren Sie Koordinaten und Mindestdimensionen erneut auf dem Server.

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

function cropToSourcePixels(crop, sourceWidth, sourceHeight) {
  return {
    left: Math.round(crop.x * sourceWidth),
    top: Math.round(crop.y * sourceHeight),
    right: Math.round((crop.x + crop.width) * sourceWidth),
    bottom: Math.round((crop.y + crop.height) * sourceHeight),
  }
}

function renderCrop(image, crop) {
  const width = crop.right - crop.left
  const height = crop.bottom - crop.top
  const canvas = document.createElement('canvas')
  canvas.width = width
  canvas.height = height
  const context = canvas.getContext('2d')
  if (context == null) throw new Error('2D canvas is unavailable')

  context.drawImage(
    image,
    crop.left,
    crop.top,
    width,
    height,
    0,
    0,
    width,
    height,
  )

  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => {
      if (blob == null) reject(new Error('The browser could not encode the crop'))
      // Browsers fall back to image/png when the requested type is unsupported
      else if (blob.type !== 'image/webp') reject(new Error('Encoder fell back to ' + blob.type))
      else resolve(blob)
    }, 'image/webp', 0.86)
  })
}

Wissenswerte technische Details

• naturalWidth und naturalHeight beschreiben die dekodierten Bildabmessungen, während clientWidth und clientHeight die CSS-Box beschreiben. Zuschnittkoordinaten müssen zwischen diesen Räumen übersetzt werden.
• Kamerabilder können Ausrichtungsmetadaten enthalten, die die visuelle Breite, Höhe und Achsen verändern, ohne die gespeicherte Pixelreihenfolge zu ändern. Deshalb muss die Ausrichtung vor der Koordinatenberechnung normalisiert werden.
• Blob-URLs vermeiden den ungefähr ein Drittel höheren Größen-Overhead von Base64-Daten-URLs, aber jede URL hält ihr zugrunde liegendes Blob so lange, bis URL.revokeObjectURL aufgerufen oder das Dokument entladen wird.
• Der Canvas-Export kann Farbprofile, Metadaten, Animationen und die Encoding-Qualität verändern, was ein weiterer Grund ist, das Browser-Ergebnis als Vorschau und nicht als Masterdatei zu behandeln.
• Zeigerkoordinaten sind relativ zum Viewport, bis sie über das begrenzende Rechteck des Elements, Scrolling, Zoom und angewendete CSS-Transformationen übersetzt werden.
• Sehr große dekodierte Bilder können mobile Canvas-Grenzen überschreiten, selbst wenn der komprimierte Upload klein ist. Deshalb benötigen Vorschauabmessungen und Quellpixelzahlen separate Begrenzungen.

Ein praxisnaher Ansatz

Architekturgrenze

Das Browser-Canvas eignet sich gut für interaktive Vorschauen, verbraucht aber Client-Speicher und garantiert kein identisches Encoding auf allen Geräten. Machen Sie ein Smartphone nicht für jedes Produktions-Derivat verantwortlich.