cordova-plugin-ImagePicker
Je suis très reconnaissant à Nanchen et Banchichen d'avoir fourni le code source pour prendre en charge l'open source multi-star. Ce n'est pas facile, merci. Groupe KouKou : 273613165
L'un prend en charge plusieurs sélections et l'album implémente des fonctions telles que la prise de photos, la prévisualisation et la compression d'images.
Fonction
- Catalogue d'albums
- Image à choix multiples
- Prendre des photos à l'intérieur de l'album
- Aperçu de l'image sélectionnée
- Compression d'images
Exigences d'installation
- Version Cordoue >= 6.0.0
- Cordova-Android >= 6.0.0
- Cordova-iOS >= 4.0.0
Installer
-
cordova plugin add https://github.com/giantss/cordova-plugin-ImagePicker.git
Remarque : Ne créez pas directement le projet Android en premier, voir Précautions relatives à Android.
Démo vidéo Android
- Cliquez pour voir la vidéo (Youku)
Démo vidéo iOS
- Cliquez pour voir la vidéo (Youku)
rendus
| Androïde | IOS |
|---|
 |  |
Usage
Une démo brute de Cordova
// 选图
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
} ) ; Le résultat renvoyé est le suivant :
// 如果是拍照，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 // 是否原图
}
Pour utiliser ce plug-in dans ionic, vous devez déclarer : declare let ImagePicker:any
Signification du paramètre
| Paramètres de configuration | Signification du paramètre |
|---|
| nombre maximal d'images | Quantité limite à sélection multiple, la valeur par défaut est 9 |
| largeur | Définissez la largeur de l'image de sortie, la valeur par défaut est automatique |
| hauteur | Définissez la hauteur de l'image de sortie, la valeur par défaut est automatique |
| qualité | La qualité de l'image est par défaut de 80 |
| activerPickOriginal | Autoriser la sélection de l'image originale, vrai par défaut |
Avis:
- Les paramètres sont facultatifs, s'ils ne sont pas transmis, la valeur par défaut sera utilisée ;
- Si largeur > 0 et hauteur > 0 : l'image compressée peut être plus grande que l'image originale ou le taux de compression n'est pas élevé (par exemple, l'image originale fait 4 Mo et l'image compressée est 2 Mo), la qualité peut être réglée à un niveau inférieur. , tel que 50 ;
- Si largeur < 0 ou hauteur < 0 : la logique de compression est proche de celle de WeChat, et la résolution et la qualité de compression appropriées sont automatiquement sélectionnées. Cette méthode est recommandée. La bibliothèque de compression utilise Luban et Luban-iOS. Si vous rencontrez des problèmes tels qu'une compression peu claire, veuillez signaler les problèmes sur leur projet ;
- Lors de l'exécution, il y a un bouton radio "Image originale" sur l'interface de sélection d'image. Après l'avoir sélectionnée, l'image renvoyée est l'image originale non compressée.
précautions Android
Supprimez d’abord les anciens plug-ins installés
Si build signale l'erreur suivante
error: resource android:attr/dialogCornerRadius not found
error: resource android:attr/fontVariationSettings not found
error: resource android:attr/ttcIndex not found
Veuillez utiliser le plug-in cordova-android-support-gradle-release pour unifier la version de la bibliothèque de support Android dans le projet :
$ cordova plugin add cordova-android-support-gradle-release --variable ANDROID_SUPPORT_VERSION={required version}
La valeur {required version} est similaire à 26.+ , 27.+ , 28.+ .
Si vous utilisez une version inférieure de Cordova et Gradle, une erreur sera signalée. implementation Cordova 7.1.0 et inférieure n'est pas prise en charge (correspondant à [email protected] et inférieure). Veuillez modifier cordova-plugin-ImagePickersrcandroidimagepicker.gradle est modifiée pour compile car la version inférieure de Cordova-Android utilise une version inférieure de Gradle et ne prend pas en charge implementation .
Si la construction échoue toujours
$ cordova platform rm android
ou
$ cordova platform rm ios
Supprimez l'ancienne plate-forme et ajoutez-la à nouveau
Projet de référence
Éléments d'image à sélection multiple
- jeasonlzy/ImagePicker (Android)
- nanchen2251/ImagePicker
- CysionLiu/ImagePicker
- banchichen/TZImagePickerController (iOS)
Bibliothèque de compression d'images
- nanchen2251/CompressHelper (Android)
- Curzibn/Luban (Android)
- GuoZhiQiang/Luban_iOS (iOS)
Instructions de mise à jour
v1.2.2
- (ios) Amélioration : iOS 13 plante lors de la sélection de plusieurs images et autres problèmes
v1.2.1
- (Android) Amélioration : la bibliothèque Glide 4.10.+ provoque un conflit entre la bibliothèque android.support et androidx
- (Android) Amélioration : configurez d'abord la sélection radio, puis configurez la multi-sélection, mais le sélecteur a toujours un problème de sélection unique.
v1.1.9
- (iOS) Ajoutez la méthode
takePhoto pour accéder directement à la prise de photo
v1.1.8
- (iOS) Correction de la logique de compression Luban
v1.1.7
- Mise à jour avec la dernière bibliothèque de sélection d'images tierce
- Ajout d'un élément de configuration activatePickOriginal (permet de sélectionner l'image d'origine, c'est-à-dire d'afficher ou non la case à cocher de l'image d'origine)
- (iOS) prend en charge le format d'image HEIC
v1.1.6
- (Android) Supprimer la référence Picasso et le code logique d'implémentation associé
v1.1.5
- (iOS) Désélectionner la fonction de rappel de prise en charge des images
v1.1.4
- La valeur de retour augmente la largeur, la hauteur et la taille du fichier.
- (iOS) Correction du problème de flou de certaines images dans la compression iOS
v1.1.3
- (Android) Correction du problème de l'exception de l'opérateur Diamond dans la construction lors de l'utilisation de versions inférieures de Cordova-Android et Gradle.
- (Android) Ajoutez la méthode
takePhoto pour accéder directement à la prise de photo - (Android) Ajoutez un rappel d'échec, qui sera déclenché lorsque l'image est annulée.
v1.1.2
- (Android) Correction du problème selon lequel lorsque vous revenez à la page d'aperçu des images sur certains téléphones mobiles, toutes les petites images du mur d'images disparaissent.
v1.1.1
- (Android) Adapté à Cordova@8, Cordova-Android@7
- (Android)provider_paths.xml est renommé, FileProvider est renommé, il n'entrera pas en conflit avec d'autres plug-ins et il n'est pas nécessaire de le copier manuellement dans cordova/platform/android/res/xml/
- (Android) Supprimez styles.xml et définissez des styles dans le code pour éviter les conflits avec d'autres plug-ins contenant également des fichiers portant le même nom.
- (Android) La bibliothèque d'images Glide a été mise à jour avec la dernière version, prend en charge Gif et les performances ont été considérablement améliorées. Il ne devrait y avoir aucun problème si le mur d'images ne peut pas afficher l'image d'aperçu.
- (Android) Ajoutez le bouton radio "Image originale" sur la barre inférieure du mur d'images
- (iOS) Correction du problème dans iOS selon lequel lorsque l'image d'origine est vérifiée, l'image renvoyée n'est pas l'image d'origine et l'image compressée est plus grande que l'image d'origine.
- Les paramètres tels que maximumImagesCount, width et height sont éventuellement transmis
- Si la largeur < 0 et la hauteur < 0, la résolution et le taux de compression appropriés seront automatiquement sélectionnés pour la compression, ce qui est proche de la logique de compression de WeChat.
- Modifiez le paramètre de retour du rappel de réussite. Le tableau de chemin d'image d'origine
['xxx', 'yyy'] a été renvoyé, et il est maintenant { images: ['xxx', 'yyy'], isOrigin: true/false }
Licence
La licence MIT (MIT)
