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

Wenn Sie eine Google Cloud API von Ihrer App aus aufrufen möchten, müssen Sie eine Zwischen-REST-API erstellen, die die Autorisierung verarbeitet und geheime Werte wie API-Schlüssel schützt. Sie müssen dann Code in Ihrer mobilen App schreiben, um sich bei diesem Zwischendienst zu authentifizieren und mit ihm zu kommunizieren.

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

In diesem Leitfaden wird gezeigt, wie Sie mit dieser Methode die Cloud Vision API von Ihrer App aus aufrufen. Mit dieser Methode können alle authentifizierten Nutzer über Ihr Cloud-Projekt auf die in Rechnung gestellten Cloud Vision-Dienste zugreifen. Überlegen Sie daher, ob dieser Authentifizierungsmechanismus für Ihren Anwendungsfall ausreicht, bevor Sie fortfahren.

Hinweis

Projekt konfigurieren

  1. Fügen Sie Ihrem Android-Projekt Firebase hinzu, falls noch nicht geschehen.
  2. Wenn Sie cloudbasierte APIs für Ihr Projekt noch nicht aktiviert haben, tun Sie dies jetzt:

    1. Öffnen Sie in der Firebase-Konsole die Seite Firebase MLAPIs.
    2. Wenn Sie Ihr Projekt noch nicht auf den Blaze-Tarif umgestellt haben, klicken Sie auf Upgrade. Sie werden nur dann zum Umstellen aufgefordert, wenn Ihr Projekt nicht den Blaze-Tarif hat.

      Cloud-basierte APIs können nur in Projekten auf Blaze-Ebene verwendet werden.

    3. Wenn cloudbasierte APIs noch nicht aktiviert sind, klicken Sie auf Cloudbasierte APIs aktivieren.
  3. Konfigurieren Sie Ihre vorhandenen Firebase API-Schlüssel so, dass der Zugriff auf die Cloud Vision API nicht mehr 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 „Einschränkungen für Schlüssel“ alle verfügbaren APIs außer der Cloud Vision API zur Liste hinzu.

Aufrufbare Funktion bereitstellen

Stellen Sie als Nächstes die Cloud Functions-Funktion bereit, mit der Sie eine Brücke zwischen Ihrer App und der Cloud Vision API herstellen. Das functions-samples-Repository 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 für unterschiedliche Anforderungen anpassen.

So stellen Sie die Funktion bereit:

  1. Klonen Sie das Repository „functions-samples“ oder laden Sie es 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
    
  2. Installieren Sie die Abhängigkeiten:
    cd functions
    npm install
    cd ..
  3. Wenn Sie die Firebase CLI noch nicht haben, installieren Sie sie.
  4. Initialisieren Sie ein Firebase-Projekt im Verzeichnis vision-annotate-image. Wählen Sie bei Aufforderung Ihr Projekt in der Liste aus.
    firebase init
  5. Die Funktion bereitstellen:
    firebase deploy --only functions:annotateImage

Firebase Auth zur App hinzufügen

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

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

  • Fügen Sie die Abhängigkeiten für die Cloud Functions for Firebase-Client- und Gson-Android-Bibliotheken der Gradle-Datei des Moduls (auf App-Ebene) hinzu (in der Regel <project>/<app-module>/build.gradle.kts oder <project>/<app-module>/build.gradle):
    implementation("com.google.firebase:firebase-functions:21.1.0")
    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:
    1. Bild als Bitmap-Objekt abrufen:

      Kotlin

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

      Java

      Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), uri);
    2. Optional können Sie das Bild verkleinern, um Bandbreite zu sparen. Weitere Informationen finden Sie unter 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);
    3. Wandeln Sie das Bitmap-Objekt in einen base64-codierten String um:

      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);
    4. Das vom Bitmap-Objekt dargestellte Bild muss aufrecht sein und darf nicht zusätzlich gedreht werden.

    2. Aufrufbare Funktion zum Erkennen von Text aufrufen

    Wenn Sie Text in einem Bild erkennen möchten, rufen Sie die aufrufbare Funktion auf und übergeben Sie eine JSON-Cloud Vision-Anfrage.

    1. Initialisieren Sie zuerst eine Cloud Functions-Instanz:

      Kotlin

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

      Java

      private FirebaseFunctions mFunctions;
      // ...
      mFunctions = FirebaseFunctions.getInstance();
      
    2. 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()));
                      }
                  });
      }
      
    3. Erstellen Sie die JSON-Anfrage. Die Cloud Vision API unterstützt zwei Typen der Texterkennung: TEXT_DETECTION und DOCUMENT_TEXT_DETECTION. 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 angeben, 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);
      
    4. Rufen Sie abschließend die Funktion 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 erkannten Texts extrahieren

    Wenn der Texterkennungsvorgang erfolgreich war, wird im Ergebnis der Aufgabe eine JSON-Antwort vom Typ BatchAnnotateImagesResponse zurückgegeben. Die Texthinweise 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 jede block-, paragraph-, word- und symbol-Region 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);
        }
    }