在使用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版本较高时是不默认给这两个权限的。
解决办法可以看我另一篇文章:
ionic1使用imagepicker在安卓手机上闪退问题