ionic之自定义图片选择器

关于cordova-plugin-image-picker

这是ionic官方提供的多图选择器插件，但是从ionic1.0到现在最新版本ionic3.9.2这个插件的样式都没有改过，如下图所示（Android界面）：

看到这样的界面我也是醉了，在iOS里可以按照目录选择图片，用户还可以接受。但是在Android里这样子怎么能忍，接下来我把这个插件修改一下，还加上了预览、删除、双指缩放效果。只需要修改android代码就可以，js获取到的路径格式和以前一样，不需修改。先看下修改过后的效果图，如下所示：

代码实现

1.在gradle里添加 com.foamtrace:photopicker:1.0依赖库

2.在colors.xml里添加

colors.xml

3.在styles.xml里添加

styles.xml

4.替换ImagePicker.java代码为

/**

* @author：刘武昌

*/

package com.synconset;

import android.app.Activity;

import android.content.Intent;

import com.foamtrace.photopicker.ImageConfig;

import com.foamtrace.photopicker.PhotoPickerActivity;

import com.foamtrace.photopicker.SelectModel;

import com.foamtrace.photopicker.intent.PhotoPickerIntent;

import org.apache.cordova.CallbackContext;

import org.apache.cordova.CordovaPlugin;

import org.json.JSONArray;

import org.json.JSONException;

import org.json.JSONObject;

import java.util.ArrayList;

public class ImagePickerextends CordovaPlugin {

public static StringTAG ="ImagePicker";

  private static final int REQUEST_CAMERA_CODE =11;

  private CallbackContextcallbackContext;

  private JSONObjectparams;

  public boolean execute(String action, final JSONArray args, final CallbackContext callbackContext)throws JSONException {

this.callbackContext = callbackContext;

    this.params = args.getJSONObject(0);

    if (action.equals("getPictures")) {

imageChoose();

    }

return true;

  }

public void imageChoose() {

ImageConfig config =new ImageConfig();

    config.minHeight =400;

    config.minWidth =400;

    config.mimeType =new String[]{"image/jpeg", "image/png"};

    PhotoPickerIntent intent =new PhotoPickerIntent(cordova.getActivity());

    intent.setSelectModel(SelectModel.MULTI);

    intent.setMaxTotal(9); // 最多选择照片数量，默认为9

    this.cordova.startActivityForResult(this,intent, REQUEST_CAMERA_CODE);

  }

public void onActivityResult(int requestCode, int resultCode, Intent data) {

if (resultCode == Activity.RESULT_OK && data !=null) {

switch (requestCode) {

// 选择照片

        case REQUEST_CAMERA_CODE:

ArrayList fileNames =data.getStringArrayListExtra(PhotoPickerActivity.EXTRA_RESULT);

          JSONArray res =new JSONArray(fileNames);

          this.callbackContext.success(res);

break;

      }

}else if (resultCode == Activity.RESULT_CANCELED && data !=null) {

String error = data.getStringExtra("ERRORMESSAGE");

      this.callbackContext.error(error);

    }else if (resultCode == Activity.RESULT_CANCELED) {

JSONArray res =new JSONArray();

      this.callbackContext.success(res);

    }else {

this.callbackContext.error("No images selected");

    }

}

}