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

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