ionic1使用ImagePicker插件并且顯示中文（漢化）

Vultr 發(fā)布于2019-08-26 11:41 / 1389人閱讀

摘要：在使用開(kāi)發(fā)時(shí)，打開(kāi)相冊(cè)應(yīng)該是使用比較頻繁的插件之一。解決辦法可以看我另一篇文章使用在安卓手機(jī)上閃退問(wèn)題參考文獻(xiàn)之圖片選擇插件使用插件中文顯示

在使用ionic開(kāi)發(fā)時(shí)，打開(kāi)相冊(cè)應(yīng)該是使用比較頻繁的插件之一。
下面講講我在項(xiàng)目中使用（這部分官方比較詳細(xì)，就簡(jiǎn)單描述）以及解決插件顯示英文問(wèn)題

1、imagepicker安裝
cordova plugin add cordova-plugin-image-picker

2、在ionic1開(kāi)發(fā)中的使用
2.1在js文件中

angular.module("app").controller("imagePickerCtrl", ["$scope", "$cordovaImagePicker",
  function ($scope,  $cordovaImagePicker,) {
    "use strict";
    
     $scope.imgList = [];

     $scope.openImagePicker= () => {
        const options = {
            maximumImagesCount: 11, // 允許一次選中的最多照片數(shù)量
            width: 800,    // 篩選寬度
            height: 600,    //篩選高度
            quality: 100    //圖像質(zhì)量的大小，默認(rèn)為100
          };
          
      $cordovaImagePicker.getPictures(options)
        .then(results => {
          console.log("選中的照片返回一個(gè)照片地址數(shù)組，可以直接在html中綁定");
          $scope.imgList = results;
        }, error => {
          console.log(error);
          console.log("打開(kāi)照片失敗");
        });
     };

 }]);

2.2 在html中

3、最后還有一個(gè)問(wèn)題，就是插件漢化。
我們使用的imagepicker沒(méi)有支持中文，直接打包安裝在手機(jī)上，調(diào)用打開(kāi)相冊(cè)功能時(shí)會(huì)發(fā)現(xiàn)所有文字都是英文，這個(gè)時(shí)候就需要我們修改一下源碼
3.1 在項(xiàng)目的目錄platforms/android/res有國(guó)際化的幾個(gè)文件夾

values-de
values-es
values-fr
values-hu
values-ja
values-ko

選擇其中的一個(gè)文件夾復(fù)制中改成values-zh，然后修改multiimagechooser_strings_es.xml文件



    圖片選擇器
    請(qǐng)稍后...
    免費(fèi)版本 - 剩余圖片: %d張
    打開(kāi)相冊(cè)出現(xiàn)錯(cuò)誤
    圖片處理中
    這可能需要幾分鐘時(shí)間
    到達(dá)上限制
    您最多可以選擇 %d 張一次
    取消
    確定

3.2接下來(lái)我們需要去修改提示文字部分，在項(xiàng)目目錄platforms/android/src/com/synconset/MultiImageChooserActivity.java第175行開(kāi)始

LoaderManager.enableDebugLogging(false);
        getLoaderManager().initLoader(CURSORLOADER_THUMBS, null, this);
        getLoaderManager().initLoader(CURSORLOADER_REAL, null, this);
        setupHeader();
        updateAcceptButton();
        progress = new ProgressDialog(this);
        progress.setTitle("圖片處理中");
        progress.setMessage("請(qǐng)稍后...");
    }

    @Override
    public void onItemClick(AdapterView arg0, View view, int position, long id) {
        String name = getImageName(position);
        int rotation = getImageRotation(position);

        if (name == null) {
            return;
        }
        boolean isChecked = !isChecked(position);
        if (maxImages == 0 && isChecked) {
            isChecked = false;
            AlertDialog.Builder builder = new AlertDialog.Builder(this);
            builder.setTitle("提示");
            builder.setMessage("您只能選擇 " + maxImageCount + "張圖片");
            builder.setPositiveButton("知道了", new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int which) {
                    dialog.cancel();
                }
            });
            AlertDialog alert = builder.create();
            alert.show();

4、ok，大功告成，接下來(lái)再次打包安裝后，調(diào)用手機(jī)相冊(cè)后就可以看到已經(jīng)顯示中文了

5、寫在最后。ionic1的imagePicker還是有些問(wèn)題的，比如用ionic的camera拍照后，無(wú)法在相冊(cè)中找到該照片，因?yàn)閕onic的camera在拍照后并不會(huì)通知相冊(cè)更新，然后使用imagepicker上會(huì)找不到該照片。

最坑的是，在一些高版本android6以上的手機(jī)，直接調(diào)用imagepicker會(huì)導(dǎo)致手機(jī)閃退，這個(gè)是因?yàn)閕magepicker沒(méi)有請(qǐng)求存儲(chǔ)權(quán)限和相機(jī)權(quán)限，android版本較高時(shí)是不默認(rèn)給這兩個(gè)權(quán)限的。
解決辦法可以看我另一篇文章：
ionic1使用imagepicker在安卓手機(jī)上閃退問(wèn)題

參考文獻(xiàn)：
ionic3之圖片選擇插件com.synconset.imagepicker

ionic使用ImagePicker插件中文顯示