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

nickking 2016-05-28

在使用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开发以及目录结构的可能还是没那么容易看懂,使用本身并没有多复杂,只要细心就很容易完成,很少发博客,希望大家指正。

相关推荐