ionic插件cordova-plugin-image-picker的使用步骤

在使用ionic默认的照片选择器，只能单选一个照片，不是很方便，所以一般使用cordova-plugin-image-picker插件。
第一步要将插件添加到项目，进入项目目录，运行

ionic plugin add cordova-plugin-image-picker

第二步在相应的controller里面添加方法，具体参数含义可以搜索一下

$scope.image_list = [];
$scope.pictureLibrary=function(){
  var options = {
    maximumImagesCount: 10,
    width: 800,
    height: 800,
    quality: 80
  };
  $cordovaImagePicker.getPictures(options)
    .then(function (results) {
      $scope.image_list = results;
    }, function(error) {
      // error getting photos
      alert("error"+error);
    });

};

第三步是在页面进行调用，以及图片预览

<button class="button button-assertive" ng-click="pictureLibrary()">
    相册
</button>

<ion-list>
    <div class="row row-wrap">
        <div class="col col-20" ng-repeat="image in image_list">
            <img src={{image}} width="100%"/>
        </div>
    </div>
</ion-list>

前三步已经可以正常使用了，但是你会发现，它的按钮以及提示都是用的英文，如果你觉得不影响，那到第三步就可以结束了，如果想改成中文，那么还需要以下几步。
第四步，找到目录platforms/android/res有国际化的几个文件夹

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

看到这里我想，你可能已经会了，就是复制一个文件夹并改名values-zh，里面相应的文件multiimagechooser_strings_ko.xml也同样改名multiimagechooser_strings_zh.xml，并替换内容

<?xml version='1.0' encoding='UTF-8'?>
<resources>
    <string name="multi_app_name">图片选择器</string>
    <string name="free_version_label">免费版本 - 剩余图片: %d</string>
    <string name="error_database">打开相册出现错误. </string>
    <string name="requesting_thumbnails">请稍后。。。</string>
    <string name="discard">取消</string>
    <string name="done">确定</string>
</resources>

第五步，修改源码文件platforms/android/src/com/synconset/MultiImageChooserActivity.java第175行开始（不同版本行数可能不一致），搜索一下

progress = new ProgressDialog(this);
progress.setTitle("图片处理");
progress.setMessage("请稍后。。。");

这样基本上就修改完成了，我步骤写的感觉还是比较详细的，但是不了解ionic开发以及目录结构的可能还是没那么容易看懂，使用本身并没有多复杂，只要细心就很容易完成，很少发博客，希望大家指正。

ionic插件cordova-plugin-image-picker的使用步骤

猜你喜欢