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:
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:
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.
Tags und Links javascript react-native