网站备案注意什么,实体服务器做网站,wordpress英文写作插件,网易企业邮箱登录入口网页版前言在APP中启动相册选择器或者拍照上传图片这些功能是非常常见的。对于Ionic2#xff0c;我们只能通过cordova插件实现调用原生的功能。下面将简单的封装一个选择相册或拍照上传图片的ImgService服务。具体如下。
Cordova准备下载安装所需的Cordovar插件#xff1a; Image P…前言在APP中启动相册选择器或者拍照上传图片这些功能是非常常见的。对于Ionic2我们只能通过cordova插件实现调用原生的功能。下面将简单的封装一个选择相册或拍照上传图片的ImgService服务。具体如下。
Cordova准备下载安装所需的Cordovar插件 Image Picker相册选择
ionic plugin add https://github.com/Telerik-Verified-Plugins/ImagePicker
1
Camera拍照
ionic plugin add cordova-plugin-camera
1
Transfer上传文件
ionic plugin add cordova-plugin-file-transfer
1
ImgService服务的实现通过显示ActionSheet组件让用户选择上传图片的方式如从相册选择或者拍照。具体如下
/*** Created by admin on 2016/10/21.*/
import { Injectable } from angular/core;
import { ActionSheetController } from ionic-angular;
import { Camera, ImagePicker, Transfer } from ionic-native;
import { NoticeService } from ./notice.service;Injectable()
export class ImgService {// 参考https://github.com/driftyco/ionic-native/blob/master/src/plugins/camera.ts// 调用相机时传入的参数private cameraOpt {quality: 50,destinationType: 1, // Camera.DestinationType.FILE_URI,sourceType: 1, // Camera.PictureSourceType.CAMERA,encodingType: 0, // Camera.EncodingType.JPEG,mediaType: 0, // Camera.MediaType.PICTURE,allowEdit: true,correctOrientation: true};// 调用相册时传入的参数private imagePickerOpt {maximumImagesCount: 1,//选择一张图片width: 800,height: 800,quality: 80};//imgPath: string ; //图片路径fileTransfer: Transfer;upload: any {url: http://xxx/, //接收图片的urlfileKey: image, //接收图片时的keyheaders: {Accept: text/html,application/xhtmlxml,application/xml;q0.9,image/webp,*/*;q0.8 //不加入 发生错误},params: {}, //需要额外上传的参数success: (data) {}, //图片上传成功后的回调error: (err) {}, //图片上传失败后的回调listen: () {} //监听上传过程};constructor(private actionSheetCtrl: ActionSheetController,private noticeSer: NoticeService) {}showPicActionSheet() {this.useASComponent();}// 使用ionic中的ActionSheet组件private useASComponent() {let actionSheet this.actionSheetCtrl.create({title: 选择,buttons: [{text: 拍照,handler: () {this.startCamera();}},{text: 从手机相册选择,handler: () {this.openImgPicker();}},{text: 取消,role: cancel,handler: () {}}]});actionSheet.present();}// 使用原生的ActionSheet组件/*private useNativeAS() {let buttonLabels [拍照, 从手机相册选择];ActionSheet.show({title: 选择,buttonLabels: buttonLabels,addCancelButtonWithLabel: Cancel,//addDestructiveButtonWithLabel : Delete}).then((buttonIndex: number) {if(buttonIndex 1) {this.startCamera();} else if(buttonIndex 2) {this.openImgPicker();}});}*/// 启动拍照功能private startCamera() {Camera.getPicture(this.cameraOpt).then((imageData) {this.uploadImg(imageData);}, (err) {this.noticeSer.showToast(ERROR: err); //错误无法使用拍照功能});}// 打开手机相册private openImgPicker() {let temp ;ImagePicker.getPictures(this.imagePickerOpt).then((results) {for (var i 0; i results.length; i) {temp results[i];}this.uploadImg(temp);}, (err) {this.noticeSer.showToast(ERROR: err); //错误无法从手机相册中选择图片});/*let str {status:1,msg:提示图片上传成功,data:http:\/\/192.168.1.20\/image\/580af6bcc4d40580af6bcc4d45.jpg};let res JSON.parse(str);this.upload.success(res);*/}// 上传图片private uploadImg(path: string) {if(!path) {return;}this.fileTransfer new Transfer();let options: any;options {fileKey: this.upload.fileKey,headers: this.upload.headers,params: this.upload.params};this.fileTransfer.upload(path, this.upload.url, options).then((data) {if(this.upload.success) {this.upload.success(JSON.parse(data.response));}}, (err) {if(this.upload.error) {this.upload.error(err);} else {this.noticeSer.showToast(错误上传失败);}});}// 停止上传stopUpload() {if(this.fileTransfer) {this.fileTransfer.abort();}}
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172注这里自定义了一个NoticeService服务主要用于统一toast的显示。如下
/*** Created by Administrator on 2016/10/10 0010.*/
import { Injectable } from angular/core;
import { ToastController } from ionic-angular;Injectable()
export class NoticeService {static TOAST_POS_BOTTOM: string bottom;static TOAST_POS_MIDDLE: string middle;constructor(private toastCtrl: ToastController) {}// 显示 toast提示showToast(message: string, position: string NoticeService.TOAST_POS_BOTTOM) {let toast this.toastCtrl.create({message: message,duration: 1500,position: position});toast.present();return toast;}/*showNoticeByToast(code: Number, msg: string) {let m ;if(code 1) {m 提示 msg ;} else {m 错误 code msg ;}return this.showToast(m);}*/showNoticeByToast(code: Number, msg: string) {let m ;if(msg msg.length 0) {if(msg.charAt(msg.length - 1) ! || msg.charAt(msg.length - 1) ) {msg msg.substr(0, msg.length - 1);}}if(code 1) {m 提示 msg ;} else {m 错误 code msg ;}return this.showToast(m);}
}
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
ImgService服务的使用使用ImgService服务需要在对应的Page页面中的构造方法中进行注入。如
constructor(private notiSer: NotiService,private imgSer: ImgService) {}
123使用ImgService服务需要我们先进行初始化如
// 初始化上传图片的服务private initImgSer() {this.imgSer.upload.url ; // 上传图片的url如果同默认配置的url一致那无须再设置this.imgSer.upload.success (data) {//上传成功后的回调处理};this.imgSer.upload.error (err) {this.noticeSer.showToast(错误头像上传失败);};}
12345678910正式使用
this.initImgSer();
this.imgSer.showPicActionSheet();
12
示例效果Android显示效果如下
相册选择器的汉化在打开相册选择器的过程中我们可能会发现其相册选择器的“取消”或“确定”按钮是英文显示的。但是BOSS可能会要求我们修改为中文这时又要伤一下脑筋咯。 解决针对Anroid来说ios应该也是一样滴在项目的plugins目录下找到com.synconset.imagepicker文件夹进入src/android/Library/res目录创建values-zh文件夹在values-zh文件夹中创建multiimagechooser_strings_zh.xml文件内容如下
?xml version1.0 encodingutf-8?
resourcesstring namemulti_app_name图片选择器/stringstring namefree_version_label免费版本 - 剩余图片: %d/stringstring nameerror_database打开相册出现错误./stringstring namerequesting_thumbnails请稍后.../stringstring nameprocessing_images_header图像选择/stringstring nameprocessing_images_message这可能是一个短暂的瞬间的时间./stringstring namemaximum_selection_count_error_headerAuswahllimit erreicht/stringstring namemaximum_selection_count_error_messageSie können maximal %d Bilder auf einmal auswählen./stringstring namediscard取消/stringstring namedone确定/string
/resources
12345678910111213修改plugins/com.synconset.imagepicker/plugin.xml文件找到android区域增加如下语句
source-file srcsrc/android/Library/res/values-zh/multiimagechooser_strings_zh.xml target-dirres/values-zh/需要的插件(ionic 官网 native中均有):
$ ionic cordova plugin add cordova-plugin-file $ npm install --save ionic-native/file $ ionic cordova plugin add cordova-plugin-file-transfer $ npm install --save ionic-native/file-transfer $ ionic cordova plugin add cordova-plugin-camera $ npm install --save ionic-native/camera $ ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION需要访问您的相册 $ npm install --save ionic-native/image-picker
1删除项目platforms文件夹下的android平台重新添加平台打包运行即可。
