1,使用cordova-plugin-image-picker插件。
1 cordova plugin add https://github.com/wymsee/cordova-imagePicker.git
2,在相应的controller里添加方法。 我这里是写在一个util中,调用即可。
1 //图片选择 2 imagePick: function (p_width, p_height) { 3 var q = $q.defer(); 4 var ret = []; 5 var options = { 6 maximumImagesCount: 1, 7 width: p_width, 8 height: p_height, 9 quality: 100 10 }; 11 $cordovaImagePicker.getPictures(options) 12 .then(function (results) { 13 q.resolve(results[0]); 14 }, function (error) { 15 // error getting photos 16 }); 17 return q.promise; 18 },
3,页面中的调用。
1 <div ng-click="selectImageByPic()"> 2 <a class="button z_chatAddPic" href=""></a> 3 <p style="text-align: center;">照片</p> 4 </div>
这样基本可以完成图片的上传和显示了。但是会发现显示的是英文字母。
4,修改选择图片时,英文变成中文显示 找到目录platforms/android/res有国际化的几个文件夹
values-de
values-es
values-fr
values-hu
values-ja values-ko
复制其中一个文件夹,修改为values-zh,然后修改其中的xml文件为multiimagechooser_strings_zh.xml。 打开multiimagechooser_strings_zh.xml文件,替换成如下内容即可。
1 <?xml version="1.0" encoding="utf-8"?> 2 <resources> 3 <string name="multi_app_name">图片选择器</string> 4 <string name="free_version_label">免费版本 - 剩余图片: %d</string> 5 <string name="error_database">打开相册出现错误.</string> 6 <string name="requesting_thumbnails">请稍后...</string> 7 <string name="processing_images_header">图像选择</string> 8 <string name="processing_images_message">这可能是一个短暂的瞬间的时间.</string> 9 <string name="maximum_selection_count_error_header">Auswahllimit erreicht</string> 10 <string name="maximum_selection_count_error_message">Sie können maximal %d Bilder auf einmal auswählen.</string> 11 <string name="discard">取消</string> 12 <string name="done">确定</string> 13 </resources>
5,修改源码文件platforms/android/src/com/synconset/MultiImageChooserActivity.java第175行开始
1 progress = new ProgressDialog(this); 2 progress.setTitle("图片处理"); 3 progress.setMessage("请稍后...");
这样就算是修改完成了,由于也是产品那边要求修改,所以网上查了些资料和博客,整理一下,方便其他有同样需求的同学。