Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » (Kostenlose) Services » Diese intelligente Methode, Text in Bildern zu erkennen und zu ändern, solltest du kennen

Diese intelligente Methode, Text in Bildern zu erkennen und zu ändern, solltest du kennen

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Dr. Web Redaktion
  • 14. August 2017
Bookmarke mich
Share on pocket

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.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, Markus Seyfferth und Jörg Mrusek.

Agenturpartner

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

Webagentur klickbeben

Innsbruck

NETZhelfer GmbH

Ostfildern

Fotografie Jennifer Klüpfel

Bodenheim

WPSteinheisser Photography

Ludwigsburg

Alle Agenturpartner

Jobs

Webtexter für SEO Agentur

Salzburg (Österreich)

Junior Webdesigner/ Mediengestalter

Innsbruck

Frontend Development & Project Management

Remote

Google Ads Kampagnen­betreuer

Salzburg

Sprachtalente

Volkach oder Würzburg

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Designpreis Focus Open 2022

So ein Designpreis ist eine feine Sache, wenn man ihn auch gewinnt. Insbesondere Werbeagenturen können und wollen auf ihrer Website mit solch einem Preis werben.

 →   

Farben finden: 16 Tools für Farbverläufe und Farbkombinationen

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.

 →   

„CSS gerootet“: Flexible Schriftgrößen mit REM

Diskussionen über die beste Art und Weise, die Schriftgröße bzw. den Schriftgrad zu definieren sind wahrscheinlich so alt wie das Web. Neben den traditionellen Kandidaten

 →   

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.