Inhaltsbasierter Zuschnitt: Motiv im Bild behalten

Kevin van Zonneveld

Mitgründer · Amsterdam, Niederlande · Bio anzeigen

Wenn Sie ein Foto als breites Banner, quadratisches Thumbnail und hochformatige Story zuschneiden, entfernt ein zentrierter Zuschnitt oft genau das, was die Menschen sehen wollten. Ab heute kann der Robot 🤖 /image/resize den interessantesten Bereich eines Bildes finden und darum herum zuschneiden. Setzen Sie gravity auf attention oder entropy, und Ihre Zuschnitte orientieren sich am Motiv statt am geometrischen Mittelpunkt.

Warum ein zentrierter Zuschnitt nicht genügt

Die meisten Websites brauchen dasselbe Bild in mehreren Formen. Mit der Strategie zur Größenänderung fillcrop skaliert der Robot ein Bild, bis es die Zielgröße abdeckt, und schneidet alles Überstehende ab. Bisher konnten Sie mit gravity wählen, welcher Bereich erhalten bleibt, etwa top oder bottom-right. Das funktioniert, wenn alle Bilder in Ihrem Katalog gleich aufgebaut sind. Bei Uploads von Nutzern, Marktplatzangeboten oder Fotos verschiedener Fotografen versagt dieser Ansatz, denn das Motiv kann überall liegen.

Nehmen wir unser Wüsten-Demofoto. Der Zeltplatz liegt im unteren Drittel unter einem weiten Sternenhimmel:

Wenn Sie es zentriert zu einem Banner mit 1200×400 zuschneiden, erhalten Sie viel Himmel, während der Zeltplatz am unteren Rand abgeschnitten wird:

Lassen Sie den Robot den Ausschnitt wählen

Nun derselbe Step, bei dem gravity auf attention gesetzt ist. Der Robot sucht den Bereich, der den Blick am ehesten auf sich zieht, und behält ihn im Bild:

Sie können zwischen zwei Strategien wählen:

• attention bevorzugt Bereiche mit hoher Luminanzfrequenz, Farbsättigung und Hauttönen. Dadurch wurde hier der beleuchtete Zeltplatz ausgewählt.
• entropy behält den Bereich mit den meisten visuellen Informationen, gemessen als Shannon-Entropie. Beim Wüstenfoto blieb damit ebenfalls der Zeltplatz im Bild, mit etwas mehr Himmel darüber.

Beide Strategien laufen innerhalb desselben Vorgangs zur Größenänderung. Sie brauchen weder einen zusätzlichen Step noch ein Modell für maschinelles Lernen oder eine Koordinatenliste pro Bild.

Ausprobieren

Diese Assembly Instructions importieren das Demofoto und machen daraus das oben gezeigte Banner:

{
  "steps": {
    "imported": {
      "robot": "/http/import",
      "url": "https://demos.transloadit.com/inputs/desert.jpg"
    },
    "banner": {
      "robot": "/image/resize",
      "use": "imported",
      "width": 1200,
      "height": 400,
      "resize_strategy": "fillcrop",
      "gravity": "attention"
    }
  }
}

Speichern Sie daneben dieses kleine Skript. Es führt die Assembly mit unserem Node.js SDK aus und gibt jedes Ergebnis aus:

import { readFile } from 'node:fs/promises'
import { Transloadit } from '@transloadit/node'

const client = new Transloadit({
  authKey: process.env.TRANSLOADIT_KEY,
  authSecret: process.env.TRANSLOADIT_SECRET,
})

const params = JSON.parse(await readFile('crop.json', 'utf8'))
const assembly = await client.createAssembly({ params, waitForCompletion: true })

for (const [step, files] of Object.entries(assembly.results)) {
  for (const file of files) {
    console.log(step, `${file.meta.width}x${file.meta.height}`, file.ssl_url)
  }
}

Installieren Sie das SDK, ergänzen Sie Ihre Zugangsdaten und führen Sie das Skript aus:

npm install @transloadit/node
export TRANSLOADIT_KEY=MY_AUTH_KEY
export TRANSLOADIT_SECRET=MY_SECRET_KEY
node crop.mjs

$ node crop.mjs
banner 1200x400 https://…/09dbfdd3….jpg

Ändern Sie attention auf den Standardwert center und führen Sie das Skript erneut aus, um den zuvor gezeigten zentrierten Zuschnitt zu erhalten. Um die Uploads Ihrer Nutzer statt einer Demodatei zuzuschneiden, ersetzen Sie in einem Template den Step /http/import durch :original. Anschließend können Sie pro Format einen Step hinzufügen, etwa für ein quadratisches Thumbnail und eine Story im Format 9:16, jeweils mit eigenen Werten für width, height und gravity.

Wann Sie weiterhin einen zentrierten Zuschnitt erhalten

Einige Hinweise:

• Verwenden Sie die Funktion mit fillcrop. attention und entropy wählen, was erhalten bleibt, wenn der Robot das Bild auf die passende Größe zuschneiden muss. Mit resize_strategy: "crop" geben Sie stattdessen explizite Koordinaten an.
• Einige Optionen und Formate verwenden eine andere Engine. Einige Funktionen des Robots laufen über ImageMagick. Dort fallen attention und entropy auf einen zentrierten Zuschnitt zurück. In unseren Tests war das bei sepia, Overlays mit text und HEIC als Eingabeformat der Fall. Dasselbe gilt für andere Optionen, die ausschließlich ImageMagick verwenden, etwa clut, monochrome und blur_regions, sowie für Eingabeformate außer JPEG, PNG, WebP, GIF, TIFF, JPEG XL und SVG. In diesem Fall enthält der Assembly Status eine Warnung, die den Step nennt, sodass Sie dies in Ihren Ergebnissen erkennen können. Sie können das umgehen, indem Sie die Verarbeitung auf mehrere Steps aufteilen. Konvertieren Sie zuerst HEIC in JPEG, schneiden Sie dann mit attention zu und fügen Sie Text oder Effekte in einem abschließenden Step mit /image/resize hinzu, der das zugeschnittene Ergebnis verwendet.
• Es ist eine Heuristik, kein Objektdetektor. attention betrachtet Details, Sättigung und Hauttöne, nicht den tatsächlichen Bildinhalt. Als wir unser Chamäleon-Demofoto zu einer Story im Format 9:16 zuschnitten, behielt der zentrierte Zuschnitt (links) das Auge im Bild, während attention (rechts) die sonnenbeschienenen Blätter daneben auswählte:

Probieren Sie beide Strategien an einer Auswahl Ihrer eigenen Bilder aus, bevor Sie einen ganzen Katalog umstellen. Wenn Ihre Bilder überwiegend Porträts sind, kann der Robot 🤖 /image/facedetect um die Gesichter zuschneiden, die er findet. Seine Optionen haben wir in Erkundung des neuen Parameters „faces“ erläutert.

Erste Schritte

Inhaltsbasierter Zuschnitt ist jetzt im Robot /image/resize verfügbar und wird wie jede andere Größenänderung abgerechnet. Die Dokumentation zu gravity führt alle zulässigen Werte auf. Wenn Sie noch kein Konto haben, können Sie sich kostenlos registrieren und das obige Beispiel in wenigen Minuten ausführen. Wenn Sie Fragen zu Ihren eigenen Bildern haben, melden Sie sich bei uns.