Giter VIP home page Giter VIP logo

cordova-plugin-imagepicker's Introduction

cordova-plugin-ImagePicker

非常感谢南尘banchichen 提供的源码支持 多点star✨开源不容易,谢谢。扣扣群:273613165

一个支持多选,相册实现了拍照、预览、图片压缩等功能

功能

  • 相册目录
  • 多选图
  • 相册内部拍照
  • 预览选中的图片
  • 图片压缩

安装要求

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

安装

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

注意:Android 项目先不要直接 build ,见 android注意事项

Android 视频演示

iOS 视频演示

效果图

Android iOS

使用方式

一个粗糙的 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 
});

返回结果如下:

// 如果是拍照,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 // 是否原图
}

ionic 中使用本插件,需要声明: declare let ImagePicker:any

参数含义

配置参数 参数含义
maximumImagesCount 多选限制数量,默认为9
width 设置输出图片的width,默认为自动
height 设置输出图片的height,默认为自动
quality 图片质量 默认80
enablePickOriginal 允许选择原图 默认true

注意:

  • 参数都是可选的,不传则使用默认值;
  • 如果 width > 0 且 height > 0:压缩的图可能比原图大或者压缩率不高(比如原图4MB,压缩后也有2MB),可以 quality 设置低一些,比如 50;
  • 如果 width < 0 或 height < 0:压缩逻辑接近于微信,自动选取合适的分辨率和压缩品质,推荐使用这种方式。压缩库使用的是 LubanLuban-iOS。如果遇到压缩不清晰等问题,请到他们的项目上提 issues;
  • 运行时,选图界面上有“原图”单选按钮,选上之后,返回的图片是未压缩的原图

android注意事项

  • 先移除安装过的旧版插件

  • 如果 build 报下面的错

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

    请使用 cordova-android-support-gradle-release 这个插件统一项目中的 Android Support 库版本:

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

    其中{required version} 值为类似 26.+27.+28.+ 这种。

  • 如果你用的是 低版本 Cordova 和 Gradle,会报错不支持implementation Cordova 7.1.0 及以下版本(对应[email protected]及以下版本),请将 cordova-plugin-ImagePicker\src\android\imagepicker.gradle 里面的 implementation 修改为 compile, 因为低版本的 Cordova-Android 使用的是低版本的 Gradle, 不支持 implementation

  • 如果还是 build 不成功

    $ cordova platform rm android
    

    $ cordova platform rm ios
    

    移除旧的平台,然后重新 add

参考项目

多选图片项目

图片压缩库

更新说明

v1.2.2

  • (ios)改进:ios 13 选多张图会崩溃等问题

v1.2.1

  • (Android)改进:Glide库4.10.+导致android.support库和androidx冲突的问题
  • (Android)改进:先设置单选,再设置多选,选择器却还是单选的问题

v1.1.9

  • (iOS)增加 takePhoto 方法,直接进入拍照

v1.1.8

  • (iOS)Luban 压缩逻辑 fix

v1.1.7

  • 更新到最新的第三方图片选择库
  • 增加 enablePickOriginal 配置项(允许选择原图,即是否显示原图勾选框)
  • (iOS)支持 HEIC 图片格式

v1.1.6

  • (Android)移除 picasso 引用和相关实现逻辑代码

v1.1.5

  • (iOS)取消选图支持回调函数

v1.1.4

  • 返回值增加 图片宽高和文件体积
  • (iOS)修复ios压缩某些图片模糊的问题

v1.1.3

  • (Android)修复低版本 Cordova-Android 和 Gradle 的情况下, build 出现 diamond 运算符异常的问题
  • (Android)增加 takePhoto 方法,直接进入拍照
  • (Android)增加失败回调,取消选图时会触发该回调

v1.1.2

  • (Android)修复部分手机图片预览页返回时,图片墙的小图全没了

v1.1.1

  • (Android)适配 Cordova@8、Cordova-Android@7
  • (Android)provider_paths.xml 改名,FileProvider 改名,不会与其他插件冲突,也不需要手动复制到 cordova/platform/android/res/xml/ 下
  • (Android)去除 styles.xml,改成在代码中设置样式,避免与其它插件也有这个同名的文件导致冲突
  • (Android)Glide 图片库更新到最新,支持 Gif,性能大幅提升,应该没有图片墙显示不出预览图的问题了
  • (Android)图片墙底栏上增加“原图”单选按钮
  • (iOS)修正 iOS 勾选原图是,返回的图不是原图,以及压缩图比原图大的问题
  • maximumImagesCount、width、height 等参数可选传递
  • 如果 width < 0 且 height < 0,则自动选取合适的分辨率和压缩比进行压缩,接近于微信的压缩逻辑
  • 修改成功回调的返回参数,原来返回图片路径数组 ['xxx', 'yyy'],现在是 { images: ['xxx', 'yyy'], isOrigin: true/false }

License

The MIT License (MIT)

cordova-plugin-imagepicker's People

Contributors

giantss avatar guodapeng avatar lazydan avatar lovelyelfpop avatar songlipeng2003 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cordova-plugin-imagepicker's Issues

String translation

Everything works great. I have one small issue with localized string.

In iOS, I cannot find where to update this string "拍照". It is under the camera icon.

For Android, I can find and replace all the strings without problem.

Thank you.

Error: No resource found that matches the given name (at 'theme' with value '@style/AppTheme').

  • Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
    Error: cmd: Command failed with exit code 1 Error output:
    E:\WorkSpace\IONIC-Pro\web-one\platforms\android\build\intermediates\manifests\full\armv7\debug\AndroidManifest.xml:45:28-43: AAPT: No resource found that matches the given name (at 'theme' with value '@style/AppTheme').

E:\WorkSpace\IONIC-Pro\web-one\platforms\android\build\intermediates\manifests\full\armv7\debug\AndroidManifest.xml:40: error: Error: No resource found that matches the given name (at 'theme' with value '@style/AppTheme').

cordova build报错

PS D:\cordova_project\telem> cordova build android
(node:11872) UnhandledPromiseRejectionWarning: TypeError: Cannot set property 'text' of null
at updateProjectAccordingTo (D:\cordova_project\telem\platforms\android\cordova\lib\prepare.js:174:51)
at D:\cordova_project\telem\platforms\android\cordova\lib\prepare.js:47:16
at _fulfilled (D:\cordova_project\telem\platforms\android\cordova\node_modules\q\q.js:854:54)
at self.promiseDispatch.done (D:\cordova_project\telem\platforms\android\cordova\node_modules\q\q.js:883:30)
at Promise.promise.promiseDispatch (D:\cordova_project\telem\platforms\android\cordova\node_modules\q\q.js:816:13)
at D:\cordova_project\telem\platforms\android\cordova\node_modules\q\q.js:570:49
at runSingle (D:\cordova_project\telem\platforms\android\cordova\node_modules\q\q.js:137:13)
at flush (D:\cordova_project\telem\platforms\android\cordova\node_modules\q\q.js:125:13)
at process._tickCallback (internal/process/next_tick.js:150:11)
at Function.Module.runMain (module.js:703:11)
(node:11872) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:11872) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Uploaded Image Quality is very poor

I tested this from iOS so far. When I upload an image from Album, the uploaded image quality is very poor. I even tried these:

  1. added quality: 100 to options

  2. Selected "Full image" when selecting images from Camera Roll

  3. The results log shows filepath as:

"/Users/me/Library/Developer/CoreSimulator/Devices/D53A2E22-A48F-470D-A1A4-BA3C2F992FE4/data/Containers/Data/Application/BA666A51-B3FF-47EF-BA03-4CA3AE59BA54/Documents/iIMG_0002.jpg"

After the image is selected, I pass the above fileURI and upload to server using File Transfer plugin. It appears only the thumbnail quality of the image is uploaded and not the high quality image from Phone Album.

How can I fix this please?

点击相册内的图片后闪退,返回后图片都不见了

在ImageDataSource.java 中修改

    //回调接口,通知图片数据准备完成
    ImagePicker.getInstance().setImageFolders(imageFolders);
    loadedListener.onImagesLoaded(imageFolders);
    if(loaderManager.getLoader(LOADER_ALL)!=null){
        loaderManager.destroyLoader(LOADER_ALL);
      }

问题解决

返回键没有处理,会闪退

解决办法:ImageGridActivity.java中
@OverRide
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
// 按下BACK,同时没有重复
//Log.d(WZLOG, "onKeyDown()");
}
return super.onKeyDown(keyCode, event);
}
@OverRide
public void onBackPressed() {
//Log.d(WZLOG, "onBackPressed()");
super.onBackPressed();
}

我这里遇见了一些问题 colors.xml、provider_paths.xml 文件貌似需要自己填上

下面是一些片段

Error: /Users/guodapeng/Documents/Cordova/skateboard/platforms/android/gradlew: Command failed with exit code 1 Error output:
/Users/guodapeng/Documents/Cordova/skateboard/platforms/android/res/drawable/selector_back_press.xml:4:29-46: AAPT: No resource found that matches the given name (at 'drawable' with value '@color/theme_body').

Error: /Users/guodapeng/Documents/Cordova/skateboard/platforms/android/gradlew: Command failed with exit code 1 Error output:
/Users/guodapeng/Documents/Cordova/skateboard/platforms/android/build/intermediates/manifests/full/debug/AndroidManifest.xml:66:35-54: AAPT: No resource found that matches the given name (at 'resource' with value '@xml/provider_paths').

但是治好了这些后。我还是遇到了一些问题

Error: /Users/guodapeng/Documents/Cordova/skateboard/platforms/android/gradlew: Command failed with exit code 1 Error output:
/Users/guodapeng/Documents/Cordova/skateboard/platforms/android/src/com/giants/imagepicker/adapter/ImageFolderAdapter.java:41: 错误: -source 1.6 中不支持 diamond 运算符
        else imageFolders = new ArrayList<>();
                                          ^
  (请使用 -source 7 或更高版本以启用 diamond 运算符)

这个问题我觉得可能是我的问题。

非常感谢能贡献出这个插件。
抱歉的是,我 Android 和 iOS 实在不懂,没办法帮助修复这个。
我很辛运,我在想写一个这样的插件时看到了这个。

通过$cordovaFile.copyFile()拷贝图片时提示 NOT_FOUND_ERR

我想将选择的图片拷到别的地方去,通过些插件获取到的图片地址是:/data/user/0/io.ionic.starter/cacheCompressHelper/IMG_20171228_095307.jpeg,在使用$cordovaFile.copyFile()时,无论是直接用这个地址还是在这个地址前加了file://,都无法拷贝,返回NOT_FOUND_ERR。
请问我该怎么办?

自定义主题

你好,
非常感谢你能开源这个插件,我才接触cordova,正发愁怎么同时实现多选图片和拍照功能就找到这个插件了。
我有个问题,怎么样能够自定义主题呢?我的APP顶栏不是黑色背景,以后也可能会换颜色,希望能指点一下。

android build 报错

版本:

node v8.7.0
npm v5.4.2
cordova v8.0.0
cordova-android v7.1.0

执行cordova build android会提示这样的错误:

cp: copyFileSync: could not write to dest file (code=ENOENT): /platforms/android/res/xml/config.xml

尝试新建一个 config.xml ,结果还是会报错。

是因为 cordova-android 的版本不正确吗?应该换到 [email protected] ?

[email protected] build 失败,7.0.0正常

:CordovaLib:compileReleaseJavaWithJavacע: ijЩ�����ļ�ʹ�û򸲸����ѹ�ʱ�� API��
ע: �й���ϸ��Ϣ, ��ʹ�� -Xlint:deprecation ���±��롣

:CordovaLib:transformClassesAndResourcesWithPrepareIntermediateJarsForRelease
:javaPreCompileRelease
:compileReleaseJavaWithJavacD:\gc_app\platforms\android\src\com\giants\imagepicker\adapter\ImageFolderAdapter.java:59: ����: -source 1.6 �в�֧�� diamond �����
else imageFolders = new ArrayList<>();
^
(��ʹ�� -source 7 ����߰汾������ diamond �����)
D:\gc_app\platforms\android\src\com\giants\imagepicker\adapter\ImageGridAdapter.java:49: ����: -source 1.6 �в�֧�� diamond �����
private ArrayList images = new ArrayList<>(); //��ǰ��Ҫ��ʾ�����е�ͼƬ����
^
(��ʹ�� -source 7 ����߰汾������ diamond �����)
D:\gc_app\platforms\android\src\com\giants\imagepicker\adapter\ImagePageAdapter.java:32: ����: -source 1.6 �в�֧�� diamond �����
private ArrayList images = new ArrayList<>();
^
(��ʹ�� -source 7 ����߰汾������ diamond �����)
D:\gc_app\platforms\android\src\com\giants\imagepicker\adapter\ImageRecyclerAdapter.java:71: ����: -source 1.6 �в�֧�� diamond �����
if (images == null || images.size() == 0) this.images = new ArrayList<>();
^
(��ʹ�� -source 7 ����߰汾������ diamond �����)
D:\gc_app\platforms\android\src\com\giants\imagepicker\DataHolder.java:35: ����: -source 1.6 �в�֧�� diamond �����
data = new HashMap<>();
^
(��ʹ�� -source 7 ����߰汾������ diamond �����)
D:\gc_app\platforms\android\src\com\giants\imagepicker\ImageDataSource.java:37: ����: -source 1.6 �в�֧�� diamond �����
private ArrayList imageFolders = new ArrayList<>(); //���е�ͼƬ�ļ���
^
(��ʹ�� -source 7 ����߰汾������ diamond �����)
D:\gc_app\platforms\android\src\com\giants\imagepicker\ImagePicker.java:76: ����: -source 1.6 �в�֧�� diamond �����
private ArrayList mSelectedImages = new ArrayList<>(); //ѡ�е�ͼƬ����
^
(��ʹ�� -source 7 ����߰汾������ diamond �����)
7 ������
FAILED

FAILURE: Build failed with an exception.

关于用法

我直接根据wiki里的用法
ImagePicker.getPictrues()
然后cordova运行起来报错,错误信息是ImagePicker对象未定义。
然后我又尝试了下
window.plugins.ImagePicker还是不行

关于修改包名的建议

感谢您的开源!
image
请问这一点是否可以在add plugin的时候在末尾添加参数来实现呢?这样显得自动化一些,哈哈哈

Event when Image Selection in Cancelled from Album

I noticed that when you go to the Album and then press Cancel without selecting an image, an error is not returned when no image is obtained. This is the code I have:

ImagePicker.getPictures(function(results) {
   console.log(results);
}, function (error) {
    console.log('Error: ' + error);
    alert("Unable to obtain pictures");
}, options); 

In the above, when the image selection is cancelled, I thought I should get the Unable to obtain pictures alert but that doesn't work. Neither the success nor the error method is triggered when cancelled. This is the same in both iOS and Android App. How can I handle this event?

This is my ionic info:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    Cordova Platforms : android 7.0.0 ios 4.5.4
    Ionic Framework   : ionic1 1.3.3

System:

    ios-deploy : 1.9.2 
    ios-sim    : 5.0.13 
    Node       : v9.3.0
    npm        : 5.7.1 
    OS         : macOS High Sierra
    Xcode      : Xcode 9.2 Build version 9C40b 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

I wrap my code in a service so I need to return a promise with success or error. Since cancel doesn't trigger anything, I am unable to complete it when user cancels the image selection from album.

Is it possible to add this please? May I ask how long it might take to add this in?

Thank you so much for this awesome plugin. I love the fact that you can also select camera from the image picker which is really great.

Thanks,
Neel.

与crosswalk插件冲突

rt

新建一个cordova项目,引入ImagePick插件,工作正常

再引入crosswalk,选图时崩溃

➜  testApp cordova plugin ls  
cordova-plugin-ImagePicker 0.1.0 "ImagePicker"
cordova-plugin-crosswalk-webview 2.3.0 "Crosswalk WebView Engine"
cordova-plugin-whitelist 1.3.2 "Whitelist"

调用报错

`
declare let cordova :any;
@component({
})

cordova.plugins.ImagePicker.getPictures(function (result) {

  alert(result);

}, function (err) {

  alert(err);

}, {maximumImagesCount: 9, width: 1920, height: 1440, quality: 100});

`
楼主,这样调用报错, 我自定义自己的插件这样调用没有问问题

Does it select Video as well?

Is this plugin only for selecting Images or does it select Videos from Album as well? I only need images to be selected and in other plugins I usually need to add an option like:

encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,

Do I need any setting like that for this plugin or it only lists and selects images only as default?

cache location

on Android selecting image result is /data/user/0/[package_name]/cacheCompressHelper/IMG_xyz.jpeg
then call resolveLocalFileSystemURL but got error code 1 (not found).

I check in explorer also doesn't seem to find this cache location?

Other than that this plugin looks great. Thank you.

English Translation

Does this plugin require any additional English translation? Or does it automatically use the language in phone? The screenshot images in ReadMe shows in Chinese I think. All of my users are English so when they select photos from their album, will the texts be in English (as in their default phone language) or Chinese?

Thank you.

app闪退

上个项目用完全没问题,昨天新项目安装这个插件后 打开app就闪退 ,remove插件后app就能正常运行

关于通过cordova plugin add cordova-plugin-imagepicker-plus插件安装说明和提交新Issues说明

1,如果使用的cordova plugin add cordova-plugin-imagepicker-plus安装的不能使用(不是我本人在维护),可以换cordova plugin add https://github.com/giantss/cordova-plugin-ImagePicker.git安装试试。
2,提交新的issues的时候尽量提供详细点的信息,比如使用平台、系统版本、手机型号、现象描述等信息,如果能提供报错信息最好,感谢大家的支持。

image cropping

There is a ImageCrop library used in the source code, but how to use cropping function?

相册图片选取闪退

之前使用没问题,添加了 下面两个插件后,选取相册app闪退(您开发的插件很棒,满足了我项目需求,谢谢)
cordova-plugin-app-version
cordova-plugin-file-opener2

android build 报错

AAPT: Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Borderless.Colored

gif的转换问题

[[PHImageManager defaultManager] requestImageDataForAsset:asset options:option resultHandler: .. 即使参数PHAsset是个gif内容
但是返回的还是一个jpg图片的NSData
可以参考:
先设置gif的temp位置(url),然后用

  • (void)writeDataForAssetResource:(PHAssetResource *)resource
    toFile:(NSURL *)fileURL
    options:(nullable PHAssetResourceRequestOptions *)options
    completionHandler:(void(^)(NSError *__nullable error))completionHandler;方法生成temp的gif图片,再获取url的nsdata.从而拿到gif图片的真是nsdata
    还有..最后sendPluginResult也需要返回这个gif的temp位置..

android运行失败

PT: Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Colored'.

FAILURE: Build failed with an exception.

  • What went wrong:
    Execution failed for task ':processDebugResources'.

com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command '/Users/caizepeng/Library/Android/sdk/build-tools/25.0.0/aapt'' finished with non-zero exit value 1

  • Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
    FAILED

BUILD FAILED

Total time: 14.694 secs

安装插件后执行cordova-plugin-android报错了

图片路径读取问题

使用该插件得到的path在读取时候如下,跳到fail,code:5
window.resolveLocalFileSystemURL(path, gotFile, fail);
是哪里错误了吗?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.