cordova plugin ImagePicker

cordova-plugin-ImagePicker

Ich bin Nanchen und Banchichen sehr dankbar für die Bereitstellung des Quellcodes zur Unterstützung von Multi-Star-Open-Source. Es ist nicht einfach, danke. KouKou-Gruppe: 273613165

Eines unterstützt die Mehrfachauswahl und das Album implementiert Funktionen wie das Aufnehmen von Bildern, die Vorschau und das Komprimieren von Bildern.

Funktion

• Albumkatalog
• Multiple-Choice-Bild
• Fotografieren im Album
• Vorschau des ausgewählten Bildes
• Bildkomprimierung

Installationsanforderungen

• Cordova-Version >= 6.0.0
• Cordova-Android >= 6.0.0
• Cordova-iOS >= 4.0.0

Installieren

• cordova plugin add https://github.com/giantss/cordova-plugin-ImagePicker.git

Hinweis: Erstellen Sie das Android-Projekt nicht zuerst direkt, siehe Vorsichtsmaßnahmen für Android.

Android-Videodemo

• Klicken Sie hier, um das Video anzusehen (Youku)

iOS-Videodemo

• Klicken Sie hier, um das Video anzusehen (Youku)

Darstellungen

Android	iOS

Verwendung

Eine grobe Cordova-Demo

 // 选图
ImagePicker . getPictures ( function ( result ) {
    alert ( JSON . stringify ( result ) ) ;
} , function ( err ) {
    alert ( err ) ;
} , { 
    maximumImagesCount : 9 , 
    width : 1920 , 
    height : 1440 , 
    quality : 100 
} ) ;

// 拍照
ImagePicker . takePhoto ( function ( result ) {
    alert ( JSON . stringify ( result ) ) ;
} , function ( err ) {
    alert ( err ) ;
} , { 
    width : 1920 , 
    height : 1440 , 
    quality : 50 
} ) ;

Das Rückgabeergebnis ist wie folgt:

 // 如果是拍照，images 数组中只有一个对象
{
    "images": [{
        "path": "/data/user/0/com.pushsoft.im2/cache/ImagePicker/152783817455118.jpg",
        "uri": "file:///data/user/0/com.pushsoft.im2/cache/ImagePicker/152783817455118.jpg",
        "width": 720,
        "height": 1280,
        "size": 104871 // 文件体积(单位：字节)
    }, {
        "path": "/data/user/0/com.pushsoft.im2/cache/ImagePicker/152783817464525.jpg",
        "uri": "file:///data/user/0/com.pushsoft.im2/cache/ImagePicker/152783817464525.jpg",
        "width": 720,
        "height": 1280,
        "size": 109873
    }],
    "isOrigin": false // 是否原图
}

Um dieses Plug-in in ionic zu verwenden, müssen Sie Folgendes deklarieren: declare let ImagePicker:any

Parameterbedeutung

Konfigurationsparameter	Parameterbedeutung
MaximumImagesCount	Mehrfachauswahl-Grenzmenge, Standard ist 9
Breite	Legen Sie die Breite des Ausgabebilds fest. Die Standardeinstellung ist automatisch
Höhe	Legen Sie die Höhe des Ausgabebildes fest. Die Standardeinstellung ist automatisch
Qualität	Die Bildqualität ist standardmäßig auf 80 eingestellt
enablePickOriginal	Auswahl des Originalbilds zulassen, Standardeinstellung „true“.

Beachten:

• Parameter sind optional. Wenn sie nicht übergeben werden, wird der Standardwert verwendet.
• Wenn Breite > 0 und Höhe > 0: Das komprimierte Bild ist möglicherweise größer als das Originalbild oder die Komprimierungsrate ist nicht hoch (z. B. ist das Originalbild 4 MB groß und das komprimierte Bild ist 2 MB groß), die Qualität kann niedriger eingestellt werden , wie 50;
• Wenn Breite < 0 oder Höhe < 0: Die Komprimierungslogik ähnelt der von WeChat und die entsprechende Auflösung und Komprimierungsqualität werden automatisch ausgewählt. Diese Methode wird empfohlen. Die Komprimierungsbibliothek verwendet Luban und Luban-iOS. Wenn Sie auf Probleme wie unklare Komprimierung stoßen, melden Sie bitte Probleme in ihrem Projekt;
• Beim Ausführen gibt es auf der Bildauswahloberfläche ein Optionsfeld „Originalbild“. Nach der Auswahl wird das unkomprimierte Originalbild zurückgegeben.

Vorsichtsmaßnahmen für Android

• Entfernen Sie zunächst die installierten alten Plug-Ins

• Wenn Build den folgenden Fehler meldet

   error: resource android:attr/dialogCornerRadius not found
  error: resource android:attr/fontVariationSettings not found
  error: resource android:attr/ttcIndex not found
  

  Bitte verwenden Sie das Plug-In „cordova-android-support-gradle-release“, um die Android-Support-Bibliotheksversion im Projekt zu vereinheitlichen:

   $ cordova plugin add cordova-android-support-gradle-release  --variable ANDROID_SUPPORT_VERSION={required version}
  

  Der Wert {required version} ähnelt 26.+ , 27.+ , 28.+ .

• Wenn Sie eine niedrigere Version von Cordova und Gradle verwenden, wird ein Fehler gemeldet. implementation cordova-plugin-ImagePickersrcandroidimagepicker.gradle Cordova 7.1.0 und niedriger wird nicht unterstützt (entsprechend [email protected] und niedriger). cordova-plugin-ImagePickersrcandroidimagepicker.gradle wurde in compile geändert, da die niedrigere Version von Cordova-Android eine niedrigere Version von Gradle verwendet und implementation nicht unterstützt.

• Wenn der Build immer noch fehlschlägt

   $ cordova platform rm android
  

  oder

   $ cordova platform rm ios
  

  Entfernen Sie die alte Plattform und fügen Sie sie erneut hinzu

Referenzprojekt

Bildelemente mit mehreren Auswahlmöglichkeiten

• jeasonlzy/ImagePicker (Android)
  • nanchen2251/ImagePicker
  • CysionLiu/ImagePicker
• banchichen/TZImagePickerController (iOS)

Bildkomprimierungsbibliothek

• nanchen2251/CompressHelper (Android)
• Curzibn/Luban (Android)
• GuoZhiQiang/Luban_iOS (iOS)

Anweisungen zum Aktualisieren

v1.2.2

• (ios) Verbesserung: iOS 13 stürzt bei der Auswahl mehrerer Bilder und anderen Problemen ab

v1.2.1

• (Android) Verbesserung: Die Glide-Bibliothek 4.10.+ verursacht einen Konflikt zwischen der android.support-Bibliothek und androidx
• (Android) Verbesserung: Richten Sie zuerst die Radioauswahl und dann die Mehrfachauswahl ein, aber der Selektor hat immer noch ein Problem mit der Einzelauswahl.

v1.1.9

• (iOS) Fügen Sie takePhoto -Methode hinzu, um direkt in die Fotoaufnahme einzusteigen

v1.1.8

• (iOS) Korrektur der Luban-Komprimierungslogik

v1.1.7

• Auf die neueste Bildauswahlbibliothek eines Drittanbieters aktualisiert
• Konfigurationselement „enablePickOriginal“ hinzugefügt (ermöglicht die Auswahl des Originalbilds, d. h., ob das Kontrollkästchen „Originalbild“ angezeigt werden soll)
• (iOS) unterstützt das HEIC-Bildformat

v1.1.6

• (Android) Entfernen Sie die Picasso-Referenz und den zugehörigen Implementierungslogikcode

v1.1.5

• (iOS) Deaktivieren Sie die Rückruffunktion für die Bildunterstützung

v1.1.4

• Der Rückgabewert erhöht die Bildbreite, -höhe und Dateigröße.
• (iOS) Das Problem der Unschärfe einiger Bilder bei der iOS-Komprimierung wurde behoben

v1.1.3

• (Android) Das Problem der Diamond-Operator-Ausnahme im Build wurde behoben, wenn niedrigere Versionen von Cordova-Android und Gradle verwendet wurden.
• (Android) Fügen Sie takePhoto -Methode hinzu, um direkt in die Fotoaufnahme einzusteigen
• (Android) Fügen Sie einen Fehlerrückruf hinzu, der ausgelöst wird, wenn das Bild abgebrochen wird.

v1.1.2

• (Android) Das Problem wurde behoben, dass bei der Rückkehr zur Bildvorschauseite auf einigen Mobiltelefonen alle kleinen Bilder auf der Bilderwand verschwunden waren.

v1.1.1

• (Android) Angepasst an Cordova@8, Cordova-Android@7
• (Android)provider_paths.xml wird umbenannt, FileProvider wird umbenannt, es kommt nicht zu Konflikten mit anderen Plug-Ins und es besteht keine Notwendigkeit, es manuell nach cordova/platform/android/res/xml/ zu kopieren.
• (Android) Entfernen Sie „styles.xml“ und legen Sie Stile im Code fest, um Konflikte mit anderen Plug-Ins zu vermeiden, die ebenfalls Dateien mit demselben Namen haben.
• (Android) Glide-Bildbibliothek wurde auf den neuesten Stand gebracht, unterstützt GIF und die Leistung wurde erheblich verbessert. Es sollte kein Problem sein, dass die Bilderwand das Vorschaubild nicht anzeigen kann.
• (Android) Fügen Sie das Optionsfeld „Originalbild“ in der unteren Leiste der Bilderwand hinzu
• (iOS) Das Problem in iOS wurde behoben, das dazu führte, dass bei der Überprüfung des Originalbilds das zurückgegebene Bild nicht das Originalbild war und das komprimierte Bild größer als das Originalbild war.
• Parameter wie MaximumImagesCount, Breite und Höhe werden optional übergeben
• Wenn Breite < 0 und Höhe < 0, werden automatisch die entsprechende Auflösung und das entsprechende Komprimierungsverhältnis für die Komprimierung ausgewählt, was der Komprimierungslogik von WeChat nahe kommt.
• Ändern Sie den Rückgabeparameter des Erfolgsrückrufs. Das ursprüngliche Bildpfad-Array ['xxx', 'yyy'] wurde zurückgegeben und lautet jetzt { images: ['xxx', 'yyy'], isOrigin: true/false }

Lizenz

Die MIT-Lizenz (MIT)