Zugriff auf Bildpixeldaten in reaktionsnativen Systemen

8

Ich habe ein Bild, das von einer Kamerarolle oder einer anderen Quelle, normalerweise einer lokalen, geladen wurde.

Wie kann ich auf seine Pixeldatenkarte zugreifen, um einige Berechnungen oder Messungen durchzuführen?

    
zamuka 29.06.2016, 11:27
quelle

1 Antwort

9

Es gibt eine Möglichkeit, diese Informationen mit nativen Modulen zu erhalten, aber ich habe momentan nur eine Android-Implementierung. Getestet auf RN 0.42.3. Zunächst müssen Sie in Ihrer App ein natives Modul erstellen. Angenommen, die Anwendung wird mit dem Namen SampleApp initialisiert, erstellen Sie ein neues Verzeichnis in Ihrem React Native-Projekt android/app/src/main/java/com/sampleapp/bitmap mit zwei Dateien darin:

android / app / src / main / java / de / sampleapp / bitmap / BitmapReactPackage.java

%Vor%

Android / app / src / main / Java / com / Beispielapp / Bitmap / BitmapModule.java

%Vor%

Wie Sie in der zweiten Datei sehen können, gibt es eine Methode getPixels , die von JS als Teil von Bitmap native module zur Verfügung steht. Er akzeptiert einen Pfad zu einer Bilddatei und konvertiert das Bild in einen internen Bitmap-Typ, der das Lesen von Bildpixeln ermöglicht. Alle Bildpixel werden nacheinander gelesen und in einem Array von Pixeln in Form von Hex-Strings gespeichert (da es mit React Native nicht möglich ist, Hex-Werte über die Brücke zu übergeben). Diese Hexadezimalzeichenfolgen haben 8 Zeichen, 2 Zeichen pro ARGB -Kanal: die ersten zwei Zeichen sind ein Hexadezimalwert für Alpha-Kanal, zweite zwei - für rot, dritte zwei - für Grün und die letzten zwei - für blauen Kanal. Zum Beispiel ist der Wert ffffffff - ist eine weiße Farbe und ff0000ff - ist eine blaue Farbe. Der Einfachheit halber werden die Bildbreite, die Höhe und das Vorhandensein des Alphakanals zusammen mit einer Pixelmatrix zurückgegeben. Methode gibt ein Versprechen mit einem Objekt zurück:

%Vor%

Natives Modul muss auch in der App registriert werden, ändern Sie android/app/src/main/java/com/sampleapp/MainApplication.java und fügen Sie dort ein neues Modul hinzu:

%Vor%

So verwenden Sie von JS:

%Vor%

Ich muss erwähnen, dass es ziemlich langsam abläuft, wahrscheinlich wegen der Übertragung eines riesigen Arrays durch die Bridge.

    
Michael Radionov 25.03.2017 22:13
quelle

Tags und Links