Cordova Android - 从设备中获取所有图像

Question

你好，我想在 Cordova 6.1.1 上做一个画廊 APP

我需要从设备中获取所有图像

我在我的应用程序的 iOS 版本上使用“File”和“AssetsLib”插件完成此操作

https://github.com/glowmar/phonegap-plugin-assetslib

但我不知道如何在 Android 上做到这一点

Answer 1

我创建了一个 Android Gallery Project，它在网格视图中获取并显示所有图像和文件夹 -

https://github.com/hiteshsahu/AwesomeAndroid-Gallery

这个function返回图像文件夹的地图，文件夹名称为Key，图像的ArrayList为Value

public static Map<String, ArrayList<ImageDataModel>> getImageFolderMap(
            Activity activity) {

        imageFolderMap.clear();

        Uri uri;
        Cursor cursor;
        int column_index_data, column_index_folder_name;

        String absolutePathOfImage = null, folderName;
        uri = android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI;

        String[] projection = { MediaColumns.DATA,
                MediaStore.Images.Media.BUCKET_DISPLAY_NAME };

        cursor = activity.getContentResolver().query(uri, projection, null,
                null, null);

        column_index_data = cursor.getColumnIndexOrThrow(MediaColumns.DATA);

        column_index_folder_name = cursor
                .getColumnIndexOrThrow(MediaStore.Images.Media.BUCKET_DISPLAY_NAME);

        while (cursor.moveToNext()) {

            absolutePathOfImage = cursor.getString(column_index_data);

            folderName = cursor.getString(column_index_folder_name);

            ImageDataModel imDataModel = new ImageDataModel(folderName,
                    absolutePathOfImage);

            if (imageFolderMap.containsKey(folderName)) {

                imageFolderMap.get(folderName).add(imDataModel);

            } else {

                ArrayList<ImageDataModel> listOfAllImages = new ArrayList<ImageDataModel>();

                listOfAllImages.add(imDataModel);

                imageFolderMap.put(folderName, listOfAllImages);
            }
        }

        // Get all Internal images
        uri = android.provider.MediaStore.Images.Media.INTERNAL_CONTENT_URI;

        cursor = activity.getContentResolver().query(uri, projection, null,
                null, null);

        column_index_data = cursor.getColumnIndexOrThrow(MediaColumns.DATA);

        column_index_folder_name = cursor
                .getColumnIndexOrThrow(MediaStore.Images.Media.BUCKET_DISPLAY_NAME);

        while (cursor.moveToNext()) {

            absolutePathOfImage = cursor.getString(column_index_data);

            folderName = cursor.getString(column_index_folder_name);

            ImageDataModel imDataModel = new ImageDataModel(folderName,
                    absolutePathOfImage);

            if (imageFolderMap.containsKey(folderName)) {

                imageFolderMap.get(folderName).add(imDataModel);
            } else {

                ArrayList<ImageDataModel> listOfAllImages = new ArrayList<ImageDataModel>();

                listOfAllImages.add(imDataModel);

                imageFolderMap.put(folderName, listOfAllImages);
            }

        }

        keyList = new ArrayList(imageFolderMap.keySet());

        return imageFolderMap;
    }

创建自定义插件 :- 您可以在 Cordova 插件中合并此功能

      /*
         * 
         * This Cordova plugin help to fetch all folders with images
         */

        public class ImageGalleryPlugin extends CordovaPlugin {

            priva

te static final String FETCH_ALL_IMAGES_ACTION = "fetchAllImages";
        private CallbackContext mCallbackContext;

        @Override
        public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) {

            this.mCallbackContext = callbackContext;

            if (FETCH_ALL_IMAGES_ACTION.equals(action)) {

                cordova.getThreadPool().execute(new Runnable() {
                    public void run() {

                        mCallbackContext.success(new JSONObject(getImageFolderMap(cordova.getActivity())));

                    }
                });

                return true;
            }
            return false;

        }

        /*
         * Returns an Map of image folder with key = "folder name" and value =
         * "List Of Images in that Folder"
         * 
         * Retrieve image from folder Map by
         * 
         * 1) fetching all folder keys from Map :-
         * 
         * ArrayList<String> folderKeyList = new ArrayList(imageFolderMap.keySet());
         * 
         * 2) Retrive images in a folder by its index in folderKeyMap
         * 
         * ArrayList<ImageDataModel> imageList =
         * imageFolderMap.get(folderKeyList.get(indexOfFolder)) ;
         * 
         */
        public static Map<String, ArrayList<ImageDataModel>> getImageFolderMap(Activity activity) {

            String folderNameKey;

            // Map to store list of images with folder name as Key Value
            Map<String, ArrayList<ImageDataModel>> imageFolderMap = new HashMap<String, ArrayList<ImageDataModel>>();

            // Clear Map to avoid duplication of images
            imageFolderMap.clear();

            int columnIndexData, columnIndexFolderName, columnIndexImageName;

            // GET ALL EXTERNAL STORAGE IMAGES
            Uri uri = android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI;

            // Query image path,name and folder name
            String[] projection = { MediaColumns.DATA, MediaStore.Images.Media.BUCKET_DISPLAY_NAME,
                    MediaStore.Images.Media.DISPLAY_NAME };

            Cursor cursor = activity.getContentResolver().query(uri, projection, null, null, null);

            columnIndexImageName = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DISPLAY_NAME);

            columnIndexData = cursor.getColumnIndexOrThrow(MediaColumns.DATA);

            columnIndexFolderName = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.BUCKET_DISPLAY_NAME);

            // Iterate over all cursor data
            while (cursor.moveToNext()) {

                // Get folder Name of image
                folderNameKey = cursor.getString(columnIndexFolderName);

                // Fill data in image data Model
                ImageDataModel imDataModel = new ImageDataModel(
                        cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DISPLAY_NAME)),
                        cursor.getString(columnIndexFolderName), cursor.getString(columnIndexData));

                // If folder is already added in Map
                if (imageFolderMap.containsKey(folderNameKey)) {

                    // Add Image into Existing Arraylist of images in Map
                    imageFolderMap.get(folderNameKey).add(imDataModel);

                } else {

                    // If folder was not added add image into array list with folder
                    // name as key
                    ArrayList<ImageDataModel> listOfAllImages = new ArrayList<ImageDataModel>();

                    // Add image into array list
                    listOfAllImages.add(imDataModel);

                    // put array list into map with folder name
                    imageFolderMap.put(folderNameKey, listOfAllImages);
                }
            }

            // GET ALL INTERNALK STORAGE IMAGES
            uri = android.provider.MediaStore.Images.Media.INTERNAL_CONTENT_URI;

            // Query image path,name and folder name
            cursor = activity.getContentResolver().query(uri, projection, null, null, null);

            while (cursor.moveToNext()) {

                folderNameKey = cursor.getString(columnIndexFolderName);

                ImageDataModel imDataModel = new ImageDataModel(cursor.getString(columnIndexImageName),
                        cursor.getString(columnIndexFolderName), cursor.getString(columnIndexData));

                // If folder is already added in Map
                if (imageFolderMap.containsKey(folderNameKey)) {

                    // Add image to Arraylist
                    imageFolderMap.get(folderNameKey).add(imDataModel);
                } else {

                    ArrayList<ImageDataModel> listOfImagesInFolder = new ArrayList<ImageDataModel>();

                    listOfImagesInFolder.add(imDataModel);

                    imageFolderMap.put(folderNameKey, listOfImagesInFolder);
                }

            }

            return imageFolderMap;
        }

    }

添加模型类来保存数据

Public class ImageDataModel {

    private String imageTitle, imagePath, imageFolder;

    public String getImageFolder() {
        return imageFolder;
    }

    public void setImageFolder(String imageFolder) {
        this.imageFolder = imageFolder;
    }

    /**
     * @return the imageTitle
     */
    public String getImageTitle() {
        return imageTitle;
    }

    /**
     * @param imageTitle
     *            the imageTitle to set
     */
    public void setImageTitle(String imageTitle) {
        this.imageTitle = imageTitle;
    }

    /**
     * @return the imagePath
     */
    public String getImagePath() {
        return imagePath;
    }

    /**
     * @param imagePath
     *            the imagePath to set
     */
    public void setImagePath(String imagePath) {
        this.imagePath = imagePath;
    }

    public ImageDataModel(String imageTitle, String imageFolder, String absolutePathOfImage) {
        this.imageTitle = imageTitle;
        this.imageFolder = imageFolder;
        this.imagePath = absolutePathOfImage;
    }

}

• 用法：-然后你就可以像这样使用这个插件了

getAllImages: 函数（成功，错误，参数）{ '使用严格'; cordova.exec（成功，错误，“ImageGalleryPlugin”，“fetchAllImages”，args）； },

Answer 2

您的问题可以分为 2 个子问题

问题 1：- 获取 SD 卡上的所有图像

解决方案：-制作一个cordova插件或将此方法嵌入到您现有的插件之一中。使用您的自定义 cordova 插件操作（例如 fetchAllImages）调用此方法，它将返回 sd 卡中所有图像的路径。 Hers 是我制作的一个 Cordova 插件，我没有测试过它可能会起作用，或者你会明白的：-

import java.util.ArrayList;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaArgs;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

import android.app.Activity;
import android.database.Cursor;
import android.net.Uri;
import android.provider.MediaStore;
import android.provider.MediaStore.MediaColumns;

public class GalleryPlugin extends CordovaPlugin {

    private static final String ACTION_GET_ALL_IMAGES = "getAllImages";

    @Override
    public boolean execute(String action, CordovaArgs args,
            final CallbackContext callbackContext) throws JSONException {
        try {

            // if action is getAllImages
            if (ACTION_GET_ALL_IMAGES.equals(action)) {

                // DO operation in thread pool to avoid cordova thread blocking
                cordova.getThreadPool().equals(new Runnable() {
                    public void run() {

                        // Return list of images in JSON Array
                        callbackContext.success(new JSONArray(
                                getAllShownImagesPath(cordova.getActivity())));

                    }
                });

            }
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }

        return super.execute(action, args, callbackContext);
    }

    /**
     * Getting All Images Path.
     *
     * @param activity
     *            the activity
     * @return ArrayList with images Path
     */
    private ArrayList<String> getAllShownImagesPath(Activity activity) {
        Uri uri;
        Cursor cursor;
        int column_index_data, column_index_folder_name;
        ArrayList<String> listOfAllImages = new ArrayList<String>();
        String absolutePathOfImage = null;
        uri = android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI;

        String[] projection = { MediaColumns.DATA,
                MediaStore.Images.Media.BUCKET_DISPLAY_NAME };

        cursor = activity.getContentResolver().query(uri, projection, null,
                null, null);

        column_index_data = cursor.getColumnIndexOrThrow(MediaColumns.DATA);
        column_index_folder_name = cursor
                .getColumnIndexOrThrow(MediaStore.Images.Media.BUCKET_DISPLAY_NAME);
        while (cursor.moveToNext()) {
            absolutePathOfImage = cursor.getString(column_index_data);

            listOfAllImages.add(absolutePathOfImage);
        }
        return listOfAllImages;
    }
}

问题2：-现在你已经在js端有了所有的图片路径，你需要在cordova webView中显示图片

解决方案：-你可以参考这篇文章Load the image saved in sdcard in webview

替代方案：- You can implement your own gallery app 并将其嵌入到您的科尔多瓦应用程序中。