Web-Entwickler suchen täglich nach besseren Wegen, die Benutzererfahrung zu optimieren. Das gilt auch für den Umgang mit Bildern. Häufig kommt es vor, dass Bildmaterial, das von Benutzern oder aus anderen Quellen hochgeladen wurde, sensible Informationen enthält, die nach Unkenntlichmachung oder jedenfalls nach Veränderung rufen. Seien es KFZ-Kennzeichen, Ausweise, Straßenschilder oder andere Hinweise und Nachweise. In all diesen Fällen ist es möglich, dass du den textlichen Inhalt eines Bildes bearbeiten können willst.
Die Anforderungen können sogar noch komplexer werden. Etwa, wenn du einen Text aus einer anderen Sprache übersetzen willst.
Von Hand ist das natürlich vergleichsweise einfach. Wenn du aber Dutzende oder gar Hunderte solcher Bilder regemäßig zu bearbeiten hast, wirst du nach einer automatischen Methode suchen, die deine Produktivität rettet. Dienste wie Cloudinary vereinfachen den gesamten Prozess, komplett mit Erkennung und Manipulation. Cloudinary ist ein cloud-basierter Bild- und Video-Verwaltungsdienst. Speicherung, Auslieferung, Änderung und Optimierung die Kernkompetenzen von Cloudinary. Die breite Palette der Features beinhaltet auch die Texterkennung und -extraktion, sowie die Bearbeitung von Text in Bildern.
Optical Character Recognition (OCR) steht als Add-on zur Verfügung und wird zugeliefert auf der Basis der Google Vision API.
OCR zur Textmanipulation
Ein typischer Anwednungsfall hierfür ist die Manipulation eines Bildes in Relation zu dem auf dem Bild gefundenen Text. Auf der Website, die Immobilien zeigt, könntest du verhindern wollen, dass Verkäufer direkt ihre Kontaktinformationen über das Bild kommunizieren, etwa über ein vor dem Haus aufgestelltes Schild:
http://res.cloudinary.com/demo/image/upload/w_1.1/home_4_sale.jpg
Auf dem Schild erhält ein potenzieller Käufer alle Informationen, die er braucht, um deine Website zu umgehen. Mit Cloudinarys OCR-Funktion ersetzt du den Text auf dem Schild einfach durch deine eigenen Informationen.
Um das mit Cloudinary zu erledigen, benötigen wir drei Parameter:
1. Ein Overlay-Bild mit dessen Hilfe wir den Text abdecken können.
2. Der Wert für Gravity wird auf text_ocr gesetzt, um die korrekte Positionierung sicherzustellen
3. fl_region_relative sorgt dafür, dass das Overlay die Breite des erkannten Textbereichs erhält.
http://res.cloudinary.com/demo/image/upload/l_call_text,fl_region_relative,w_1.1,g_ocr_text/home_4_sale.jpg
Um das Beispiel nachzuvollziehen, benötigst du nur einen kostenlosen Cloudinary-Account. Sobald du den Accoun t registriert hast, kannst du das Beispielbild in deinen Cloud-Bereich hochladen und die Textmanipulation vornehmen.
Nbatürlich bietet Cloudinary dafür SDKs an. Das folgende Beispiel verwendet das JavaScript-SDK um das Bild zu ändern und auszuliefern:
js
cloudinary.image("home_4_sale.jpg", {overlay: "call_text",
flags: "region_relative",
width: "1.1",
gravity: "ocr_text"})Wenn du keine eigenen Informationen über den vorhandenen Textbereich blenden willst, kannst du einen starken Weichzeichner über den Text legen, so dass er nicht mehr lesbar ist.
Das geht so mit dem gleichen Beispiel:
js
http://res.cloudinary.com/demo/image/upload/e_pixelate_region:15,w_1.1,g_ocr_text/home_4_sale.jpg
Anstelle der Verwendung eines Overlays setzen wir den Parameter e_pixelate_region auf 15 und entscheiden so über die Stärke des Effekts. Beachte, dass g_ocr_text immer noch verfügbar ist, um etwaige OCR.Anwesiungen zu spezifizieren.
OCR zur Textextraktion
Ein weiterer gängiger Anwednungsfall besteht darin, einen Text aus einem Bild zu extrahieren. Der so extrahierte Text kann dann weiterverwendet werden. Text können während des Uploads oder Updates eines Bildes auf dem Cloudinary-Server extrahiert werden.
Folgend laden wir ein Bild aus Pexels in Cloudinary hoch und lassen des Text im Bild erkennen:
Um das Beispiel nachvollziehen zu können, brauchst du wieder deinen kostenlosen Cloudinary-Account. MIt dem Zugang zu deinem Account erhältst du einen Speicherbereich in der Cloud, auf dem du Bilder ablegen und manipulieren kannst, wie es dir beliebt. Außerdem erhältst du die API-Daten, die du benötigst, darunter der Name des Cloud-Bereichs, den API-Key und das Passwort. Bewahre die Zugangsdaten gut und sicher auf.
Als nächstes aktivierst du das OCR-Add-on, idem du die Add-on-Settings aufrufst und die entsprechende Option des OCR-Add-ons anklickst.
Jetzt startest du eine einfache Node-Umgebung durch die Eingabe von:
bash
Erstelle ein Node-Projekt
npm init --y
Füge einen Entry Point hinzu
touch index.js
In unserem Beispiel erstellen wir ebenso einen Entry Point für index.js. Bevor wir uns aber den Inhalten dieser Datei widmen, installieren wir zunhächst das Cloudinary-SDK:
bash
npm install --save cloudinary
Jetzt konfigurieren wir in der index.js eine Cloudinary-Instanz, die mit unserem Cloud-Bereich verbunden wird:
js
const cloudinary = require('cloudinary');
cloudinary.config({
cloudname: 'CLOUDNAME',
apikey: 'APIKEY',
apisecret: 'APISECRET'
});Jetzt ist alles vorbereitet, um Texte während des Uploads aus deinen Bildern zu ziehen. So geht das:
js
cloudinary.v2.uploader.upload("https://static.pexels.com/photos/164542/pexels-photo-164542.jpeg",
{ ocr: "adv_ocr" },
function(error, result) {
if(error) {
console.log(error);
return
}
console.log(result.info.ocr.adv_ocr.data[0].textAnnotations[0].description)
});Im Grunde genommen soll diese Upload-Methode lediglich deine Bilder auf den Cloudinary-Server bringen. Um zusätzlich die Texte zu extrahieren, verwendest du das OCR-Add-on und änderst die Option ocr zu adv_ocr.
Jetzt lass die App mal laufen und achte auf den Output in der Console:
bash
node index.js
Der Output sieht so aus:
Verwende den Text, so wie du ihn gebrauchen kannst.
Fazit
Es ist überaus erstaunlich, was wir alles mit Cloudinarys OCR-Add-on erreichen können. Ein paar Parameter reichen aus, um Text zu ersetzen oder unlesbar zu machen. Auf diese Weise ließen sich auch Bilder in Abhängigkeit ihres Text-Inhalts sperren, etwa bei nicht jugendfreien Inhalten. Cloudinary OCR kann da noch so einige Anwendungsfälle abzudecken.
Besorg dir einen kostenlosen Account und mach dir selbst ein Bild.
Dieser Beitrag ist ein Sponsored Post aus dem Hause Cloudinary.
