Mit Cloud Vision und Firebase Auth und Firebase-Funktionen unter Android Text in Bildern sicher erkennen

Wenn Sie eine Google Cloud API über Ihre App aufrufen möchten, müssen Sie eine Zwischen-REST API erstellen, die die Autorisierung übernimmt und geheime Werte wie API-Schlüssel schützt. Anschließend müssen Sie Code in Ihrer mobilen App schreiben, um sich bei diesem Vermittlungsdienst zu authentifizieren und mit ihm zu kommunizieren.

Eine Möglichkeit, diese REST API zu erstellen, ist die Verwendung von Firebase Authentication und Functions. Damit erhalten Sie ein verwaltetes, serverloses Gateway für Google Cloud APIs, das die Authentifizierung übernimmt und über Ihre mobile App mit vorgefertigten SDKs aufgerufen werden kann.

In diesem Leitfaden wird gezeigt, wie Sie diese Methode verwenden, um die Cloud Vision API aus Ihrer App aufzurufen. Mit dieser Methode können alle authentifizierten Nutzer über Ihr Cloud-Projekt auf kostenpflichtige Cloud Vision-Dienste zugreifen. Überlegen Sie daher, ob dieser Authentifizierungsmechanismus für Ihren Anwendungsfall ausreichend ist, bevor Sie fortfahren.

Hinweis

Projekt konfigurieren

Falls noch nicht geschehen, fügen Sie Ihrem Android-Projekt Firebase hinzu.
Wenn Sie cloudbasierte APIs für Ihr Projekt noch nicht aktiviert haben, holen Sie dies jetzt nach:
1. Öffnen Sie in der Firebase Console die Seite Firebase ML-APIs.
2. Wenn Sie Ihr Projekt noch nicht auf den Blaze-Tarif (Pay as you go) umgestellt haben, klicken Sie auf Upgraden, um dies zu tun. Sie werden nur dann zum Upgraden aufgefordert, wenn Ihr Projekt nicht im Blaze-Tarif ist.
  
  Nur Projekte mit dem Blaze-Tarif können cloudbasierte APIs verwenden.
3. Wenn cloudbasierte APIs noch nicht aktiviert sind, klicken Sie auf Cloudbasierte APIs aktivieren.
Konfigurieren Sie Ihre vorhandenen Firebase-API-Schlüssel so, dass der Zugriff auf die Cloud Vision API nicht zulässig ist:
1. Öffnen Sie in der Cloud Console die Seite Anmeldedaten.
2. Öffnen Sie für jeden API-Schlüssel in der Liste die Bearbeitungsansicht und fügen Sie im Abschnitt „Schlüsseleinschränkungen“ alle verfügbaren APIs mit Ausnahme der Cloud Vision API in die Liste ein.

Aufrufbare Funktion bereitstellen

Als Nächstes stellen Sie die Cloud Functions-Funktion bereit, mit der Sie Ihre App und die Cloud Vision API verbinden. Das Repository functions-samples enthält ein Beispiel, das Sie verwenden können.

Standardmäßig können nur authentifizierte Nutzer Ihrer App über diese Funktion auf die Cloud Vision API zugreifen. Sie können die Funktion an unterschiedliche Anforderungen anpassen.

So stellen Sie die Funktion bereit:

Klonen oder laden Sie das functions-samples-Repository herunter und wechseln Sie in das Verzeichnis Node-1st-gen/vision-annotate-image:
```
git clone https://github.com/firebase/functions-samples
cd Node-1st-gen/vision-annotate-image
```
Installieren Sie die Abhängigkeiten:
```
cd functions
npm install
cd ..
```
Wenn Sie die Firebase CLI nicht haben, installieren Sie sie.
Initialisieren Sie ein Firebase-Projekt im Verzeichnis vision-annotate-image. Wählen Sie bei Aufforderung Ihr Projekt in der Liste aus.
```
firebase init
```

Die Funktion bereitstellen:

firebase deploy --only functions:annotateImage

Firebase Authentication zu Ihrer App hinzufügen

Die oben bereitgestellte aufrufbare Funktion lehnt alle Anfragen von nicht authentifizierten Nutzern Ihrer App ab. Falls Sie das noch nicht getan haben, müssen Sie Firebase Auth zu Ihrer App hinzufügen.

Fügen Sie Ihrer App die erforderlichen Abhängigkeiten hinzu

Fügen Sie die Abhängigkeiten für die Android-Bibliotheken „Cloud Functions for Firebase (Client)“ und „gson“ der Gradle-Datei des Moduls (auf App-Ebene) (in der Regel <project>/<app-module>/build.gradle.kts oder <project>/<app-module>/build.gradle) hinzu:

implementation("com.google.firebase:firebase-functions:22.1.1")
implementation("com.google.code.gson:gson:2.8.6")

Jetzt können Sie mit dem Erkennen von Text in Bildern beginnen.

1. Eingabebild vorbereiten

Damit Cloud Vision aufgerufen werden kann, muss das Bild als base64-codierter String formatiert sein. So verarbeiten Sie ein Bild aus einem gespeicherten Datei-URI:

Bild als Bitmap-Objekt abrufen:

Kotlin

var bitmap: Bitmap = MediaStore.Images.Media.getBitmap(contentResolver, uri)

Java

Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), uri);

Optional: Verkleinern Sie das Bild, um Bandbreite zu sparen. Empfohlene Bildgrößen für Cloud Vision

Kotlin

private fun scaleBitmapDown(bitmap: Bitmap, maxDimension: Int): Bitmap {
    val originalWidth = bitmap.width
    val originalHeight = bitmap.height
    var resizedWidth = maxDimension
    var resizedHeight = maxDimension
    if (originalHeight > originalWidth) {
        resizedHeight = maxDimension
        resizedWidth =
            (resizedHeight * originalWidth.toFloat() / originalHeight.toFloat()).toInt()
    } else if (originalWidth > originalHeight) {
        resizedWidth = maxDimension
        resizedHeight =
            (resizedWidth * originalHeight.toFloat() / originalWidth.toFloat()).toInt()
    } else if (originalHeight == originalWidth) {
        resizedHeight = maxDimension
        resizedWidth = maxDimension
    }
    return Bitmap.createScaledBitmap(bitmap, resizedWidth, resizedHeight, false)
}

Java

private Bitmap scaleBitmapDown(Bitmap bitmap, int maxDimension) {
    int originalWidth = bitmap.getWidth();
    int originalHeight = bitmap.getHeight();
    int resizedWidth = maxDimension;
    int resizedHeight = maxDimension;

    if (originalHeight > originalWidth) {
        resizedHeight = maxDimension;
        resizedWidth = (int) (resizedHeight * (float) originalWidth / (float) originalHeight);
    } else if (originalWidth > originalHeight) {
        resizedWidth = maxDimension;
        resizedHeight = (int) (resizedWidth * (float) originalHeight / (float) originalWidth);
    } else if (originalHeight == originalWidth) {
        resizedHeight = maxDimension;
        resizedWidth = maxDimension;
    }
    return Bitmap.createScaledBitmap(bitmap, resizedWidth, resizedHeight, false);
}

Kotlin

// Scale down bitmap size
bitmap = scaleBitmapDown(bitmap, 640)

Java

// Scale down bitmap size
bitmap = scaleBitmapDown(bitmap, 640);

Konvertieren Sie das Bitmap-Objekt in einen base64-codierten String:

Kotlin

// Convert bitmap to base64 encoded string
val byteArrayOutputStream = ByteArrayOutputStream()
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, byteArrayOutputStream)
val imageBytes: ByteArray = byteArrayOutputStream.toByteArray()
val base64encoded = Base64.encodeToString(imageBytes, Base64.NO_WRAP)

Java

// Convert bitmap to base64 encoded string
ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, byteArrayOutputStream);
byte[] imageBytes = byteArrayOutputStream.toByteArray();
String base64encoded = Base64.encodeToString(imageBytes, Base64.NO_WRAP);

Bitmap

2. Aufrufbare Funktion zum Erkennen von Text aufrufen

Um Text in einem Bild zu erkennen, rufen Sie die aufrufbare Funktion auf und übergeben Sie eine Cloud Vision-Anfrage im JSON-Format.

Initialisieren Sie zuerst eine Instanz von Cloud Functions:

Kotlin

private lateinit var functions: FirebaseFunctions
// ...
functions = Firebase.functions

Java

private FirebaseFunctions mFunctions;
// ...
mFunctions = FirebaseFunctions.getInstance();

Definieren Sie eine Methode zum Aufrufen der Funktion:

Kotlin

private fun annotateImage(requestJson: String): Task<JsonElement> {
    return functions
        .getHttpsCallable("annotateImage")
        .call(requestJson)
        .continueWith { task ->
            // This continuation runs on either success or failure, but if the task
            // has failed then result will throw an Exception which will be
            // propagated down.
            val result = task.result?.data
            JsonParser.parseString(Gson().toJson(result))
        }
}

Java

private Task<JsonElement> annotateImage(String requestJson) {
    return mFunctions
            .getHttpsCallable("annotateImage")
            .call(requestJson)
            .continueWith(new Continuation<HttpsCallableResult, JsonElement>() {
                @Override
                public JsonElement then(@NonNull Task<HttpsCallableResult> task) {
                    // This continuation runs on either success or failure, but if the task
                    // has failed then getResult() will throw an Exception which will be
                    // propagated down.
                    return JsonParser.parseString(new Gson().toJson(task.getResult().getData()));
                }
            });
}

Erstellen Sie die JSON-Anfrage. Die Cloud Vision API unterstützt zwei Typen der Texterkennung: TEXT_DETECTION und DOCUMENT_TEXT_DETECTION. Weitere Informationen zu den Unterschieden zwischen den beiden Anwendungsfällen finden Sie in der Cloud Vision OCR-Dokumentation.

Kotlin

// Create json request to cloud vision
val request = JsonObject()
// Add image to request
val image = JsonObject()
image.add("content", JsonPrimitive(base64encoded))
request.add("image", image)
// Add features to the request
val feature = JsonObject()
feature.add("type", JsonPrimitive("TEXT_DETECTION"))
// Alternatively, for DOCUMENT_TEXT_DETECTION:
// feature.add("type", JsonPrimitive("DOCUMENT_TEXT_DETECTION"))
val features = JsonArray()
features.add(feature)
request.add("features", features)

Java

// Create json request to cloud vision
JsonObject request = new JsonObject();
// Add image to request
JsonObject image = new JsonObject();
image.add("content", new JsonPrimitive(base64encoded));
request.add("image", image);
//Add features to the request
JsonObject feature = new JsonObject();
feature.add("type", new JsonPrimitive("TEXT_DETECTION"));
// Alternatively, for DOCUMENT_TEXT_DETECTION:
//feature.add("type", new JsonPrimitive("DOCUMENT_TEXT_DETECTION"));
JsonArray features = new JsonArray();
features.add(feature);
request.add("features", features);

Optional können Sie Sprachhinweise geben, um die Spracherkennung zu unterstützen (siehe unterstützte Sprachen):

Kotlin

val imageContext = JsonObject()
val languageHints = JsonArray()
languageHints.add("en")
imageContext.add("languageHints", languageHints)
request.add("imageContext", imageContext)

Java

JsonObject imageContext = new JsonObject();
JsonArray languageHints = new JsonArray();
languageHints.add("en");
imageContext.add("languageHints", languageHints);
request.add("imageContext", imageContext);

Rufen Sie die Funktion schließlich auf:

Kotlin

annotateImage(request.toString())
    .addOnCompleteListener { task ->
        if (!task.isSuccessful) {
            // Task failed with an exception
            // ...
        } else {
            // Task completed successfully
            // ...
        }
    }

Java

annotateImage(request.toString())
        .addOnCompleteListener(new OnCompleteListener<JsonElement>() {
            @Override
            public void onComplete(@NonNull Task<JsonElement> task) {
                if (!task.isSuccessful()) {
                    // Task failed with an exception
                    // ...
                } else {
                    // Task completed successfully
                    // ...
                }
            }
        });

3. Text aus Blöcken mit erkanntem Text extrahieren

Wenn die Texterkennung erfolgreich ist, wird im Ergebnis der Aufgabe eine JSON-Antwort vom Typ BatchAnnotateImagesResponse zurückgegeben. Die Textanmerkungen finden Sie im Objekt fullTextAnnotation.

Sie können den erkannten Text als String im Feld text abrufen. Beispiel:

Kotlin

val annotation = task.result!!.asJsonArray[0].asJsonObject["fullTextAnnotation"].asJsonObject
System.out.format("%nComplete annotation:")
System.out.format("%n%s", annotation["text"].asString)

Java

JsonObject annotation = task.getResult().getAsJsonArray().get(0).getAsJsonObject().get("fullTextAnnotation").getAsJsonObject();
System.out.format("%nComplete annotation:%n");
System.out.format("%s%n", annotation.get("text").getAsString());

Sie können auch Informationen zu bestimmten Bereichen des Bildes abrufen. Für jedes block, paragraph, word und symbol können Sie den in der Region erkannten Text und die Begrenzungskoordinaten der Region abrufen. Beispiel:

Kotlin

for (page in annotation["pages"].asJsonArray) {
    var pageText = ""
    for (block in page.asJsonObject["blocks"].asJsonArray) {
        var blockText = ""
        for (para in block.asJsonObject["paragraphs"].asJsonArray) {
            var paraText = ""
            for (word in para.asJsonObject["words"].asJsonArray) {
                var wordText = ""
                for (symbol in word.asJsonObject["symbols"].asJsonArray) {
                    wordText += symbol.asJsonObject["text"].asString
                    System.out.format(
                        "Symbol text: %s (confidence: %f)%n",
                        symbol.asJsonObject["text"].asString,
                        symbol.asJsonObject["confidence"].asFloat,
                    )
                }
                System.out.format(
                    "Word text: %s (confidence: %f)%n%n",
                    wordText,
                    word.asJsonObject["confidence"].asFloat,
                )
                System.out.format("Word bounding box: %s%n", word.asJsonObject["boundingBox"])
                paraText = String.format("%s%s ", paraText, wordText)
            }
            System.out.format("%nParagraph: %n%s%n", paraText)
            System.out.format("Paragraph bounding box: %s%n", para.asJsonObject["boundingBox"])
            System.out.format("Paragraph Confidence: %f%n", para.asJsonObject["confidence"].asFloat)
            blockText += paraText
        }
        pageText += blockText
    }
}

Java

for (JsonElement page : annotation.get("pages").getAsJsonArray()) {
    StringBuilder pageText = new StringBuilder();
    for (JsonElement block : page.getAsJsonObject().get("blocks").getAsJsonArray()) {
        StringBuilder blockText = new StringBuilder();
        for (JsonElement para : block.getAsJsonObject().get("paragraphs").getAsJsonArray()) {
            StringBuilder paraText = new StringBuilder();
            for (JsonElement word : para.getAsJsonObject().get("words").getAsJsonArray()) {
                StringBuilder wordText = new StringBuilder();
                for (JsonElement symbol : word.getAsJsonObject().get("symbols").getAsJsonArray()) {
                    wordText.append(symbol.getAsJsonObject().get("text").getAsString());
                    System.out.format("Symbol text: %s (confidence: %f)%n", symbol.getAsJsonObject().get("text").getAsString(), symbol.getAsJsonObject().get("confidence").getAsFloat());
                }
                System.out.format("Word text: %s (confidence: %f)%n%n", wordText.toString(), word.getAsJsonObject().get("confidence").getAsFloat());
                System.out.format("Word bounding box: %s%n", word.getAsJsonObject().get("boundingBox"));
                paraText.append(wordText.toString()).append(" ");
            }
            System.out.format("%nParagraph:%n%s%n", paraText);
            System.out.format("Paragraph bounding box: %s%n", para.getAsJsonObject().get("boundingBox"));
            System.out.format("Paragraph Confidence: %f%n", para.getAsJsonObject().get("confidence").getAsFloat());
            blockText.append(paraText);
        }
        pageText.append(blockText);
    }
}

Mit Cloud Vision und Firebase Auth und Firebase-Funktionen unter Android Text in Bildern sicher erkennen Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Hinweis

Projekt konfigurieren

Aufrufbare Funktion bereitstellen

Firebase Authentication zu Ihrer App hinzufügen

Fügen Sie Ihrer App die erforderlichen Abhängigkeiten hinzu

1. Eingabebild vorbereiten

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

2. Aufrufbare Funktion zum Erkennen von Text aufrufen

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

3. Text aus Blöcken mit erkanntem Text extrahieren

Kotlin

Java

Kotlin

Java

Mit Cloud Vision und Firebase Auth und Firebase-Funktionen unter Android Text in Bildern sicher erkennen