1. 程式人生 > >ionic1使用ImagePicker外掛並且顯示中文(漢化)

ionic1使用ImagePicker外掛並且顯示中文(漢化)

在使用ionic開發時,開啟相簿應該是使用比較頻繁的外掛之一。
下面講講我在專案中使用(這部分官方比較詳細,就簡單描述)以及解決外掛顯示英文問題

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

2、在ionic1開發中的使用

2.1在js檔案中

angular.module("app").controller("imagePickerCtrl", ["$scope", "$cordovaImagePicker",
  function ($scope,  $cordovaImagePicker,) {
    "use strict"
; $scope.imgList = []; $scope.openImagePicker= () => { const options = { maximumImagesCount: 11, // 允許一次選中的最多照片數量 width: 800, // 篩選寬度 height: 600, //篩選高度 quality: 100 //影象質量的大小,預設為100 }; $cordovaImagePicker.getPictures(options) .then(results
=>
{ console.log("選中的照片返回一個照片地址陣列,可以直接在html中繫結"); $scope.imgList = results; }, error => { console.log(error); console.log("開啟照片失敗"); }); }; }]);

2.2 在html中

<ion-view view-title="拍照demo">
  <ion-content>
    <button ng-click
="openImagePicker()">
點選拍照</button> <div> <img ng-repeat="item in imgList " ng-src="
{{item}}"> </div> </ion-content> </ion-view>

3、最後還有一個問題,就是外掛漢化。
我們使用的imagepicker沒有支援中文,直接打包安裝在手機上,呼叫開啟相簿功能時會發現所有文字都是英文,這個時候就需要我們修改一下原始碼
3.1 在專案的目錄platforms/android/res有國際化的幾個資料夾


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

選擇其中的一個資料夾複製中改成values-zh, 然後修改multiimagechooser_strings_es.xml檔案

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="multi_app_name">圖片選擇器</string>
    <string name="requesting_thumbnails">請稍後...</string>
    <string name="free_version_label">免費版本 - 剩餘圖片: %d張</string>
    <string name="error_database">開啟相簿出現錯誤</string>
    <string name="processing_images_header">圖片處理中</string>
    <string name="processing_images_message">這可能需要幾分鐘時間</string>
    <string name="maximum_selection_count_error_header">到達上限制</string>
    <string name="maximum_selection_count_error_message">您最多可以選擇 %d 張一次</string>
    <string name="discard">取消</string>
    <string name="done">確定</string>
</resources>

3.2接下來我們需要去修改提示文字部分,在專案目錄platforms/android/src/com/synconset/MultiImageChooserActivity.java第175行開始

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("請稍後...");
    }

    @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,大功告成,接下來再次打包安裝後,呼叫手機相簿後就可以看到已經顯示中文了

5、寫在最後。ionic1的imagePicker還是有些問題的,比如用ionic的camera拍照後,無法在相簿中找到該照片,因為ionic的camera在拍照後並不會通知相簿更新,然後使用imagepicker上會找不到該照片。

最坑的是,在一些高版本android6以上的手機,直接呼叫imagepicker會導致手機閃退,這個是因為imagepicker沒有請求儲存許可權和相機許可權,android版本較高時是不預設給這兩個許可權的。
解決辦法可以看我另一篇文章:

參考文獻: