Hybrid App 选择图片并剪切制作头像
hello,很多应用都需要选择一张图片用来当做头像，通常头像的大小是确定的，但是用户的照片的大小是不确定的，然后出现了裁剪，保证头像不会变形。（ionic/ng）
我们采用如下方式获取手机本地的图片，或者直接用相机拍一张，顺便避开官方Bug .
首先我们得先有如下native控件。分别用来获取图片，拷贝图片，获取图片路径.
(效果在底部-->>)
public camera:Camera,
public file:File,
public filePath:FilePath,
normalizeURL//这个可要可不用，主要用来修正文件的路径，官方bug就是路径问题。
然后在你用使用的地方注入这些控件（constructor(...){}）
declare var cordova:any;
.......
sendToggle
=true;
isup=false;
lastImage:any;
myImagePath="";
truePath="assets/ui/add.png";
constructor(public navCtrl: NavController,
public navParams: NavParams,
public render:Renderer2,
public actionSheet:ActionSheetController,
public camera:Camera,
public file:File,
public filePath:FilePath,
public tranfer:FileTransfer,
public platform:Platform,
public toast:ToastController,
public loading:LoadingController,
public crop:Crop) {
}
//首先我们需要创建一个actionSheet用来给用户提供选择，（相机或者相册），并绑定到按钮的事件中。
showActionSheet(){
let sheet=this.actionSheet.create({
title:"选择图片",
buttons:[{
text:"相机",
handler:()=>{
this.takePicture(this.camera.PictureSourceType.CAMERA);
}
},{
text:"相册",
handler:()=>{
this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
}
},{
text:"取消",
role:'cancel'
}]
});
sheet.present();
}
接着，写好 takePicture（type）函数->如下：
takePicture(sourceType) {
var options: CameraOptions = {//初始化相机属性，分别是：照片质量，图片来源，
是否保存到相册，是否自动纠正相机方向
quality:60,
sourceType: sourceType,
saveToPhotoAlbum:false,
correctOrientation:true
};
this.camera.getPicture(options).then((imagePath) => {
if (this.platform.is("android") && sourceType ==
this.camera.PictureSourceType.PHOTOLIBRARY) {
//这里需要特别处理安卓的路径问题，下面是通过字符串截取的方法纠正
this.filePath.resolveNativePath(imagePath).then((filepath) => {
let correctPath = filepath.substr(0, filepath.lastIndexOf('/') +1);
let currentName = imagePath.substring(imagePath.lastIndexOf('/') +1,
imagePath.lastIndexOf('?'));
this.copyFileToLocalDir(correctPath,currentName,this.createFileName());
//这里需要拷贝一份图片文件
});
}else {
var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') +1);
//获取正确的文件名var currentName = imagePath.substr(imagePath.lastIndexOf('/') +1);
this.copyFileToLocalDir(correctPath,currentName,this.createFileName());
}
},err=>{
this.showToast("获取图片失败...");
});
}
//拷贝文件.
copyFileToLocalDir
(namePath, currentName, newFileName){
this.file.copyFile(namePath,currentName,cordova.file.dataDirectory,newFileName)
.then(success=>{
//这里把图片拷贝上设备中可用的文件夹中。
this.lastImage=newFileName;
this.myImagePath=this.pathForImg(this.lastImage);
//获取图片正确的路径（处理官方bug）;
//注意这里，我们就是通过crop插件来进行截取图片的，我们需要在图片完成拷贝之后才做处理
，不然可能会出现预料之外的错误。
this.crop.crop(this.myImagePath, {quality:100,targetWidth: -1,
targetHeight: -1 }).then((path)=>{
this.truePath=path;
//targetHeight->截图区域高度 -1表示可以自行调整高度
//targetWidth->截图区域宽度 -1表示可以自行调整宽度
//quality->截图之后的质量 100默认
});
},error=>{
//错误处理this.showToast("....");
});
}
//创建新的文件名
createFileName(){
var d=new Date();
var n=d.getTime();
var newFileName=n+".jpg";
return newFileName;
}
//该bug的不处理的话在android 的文件路径是 （例子）->如下(括号内)：
(////data/path/img/abs.jpg)
public pathForImg(img){
if(img==null){
return "assets/ui/add.png";
}else{
return normalizeURL(cordova.file.dataDirectory+img);
}
}
showToast(msg){
//信息显示（吐司）
let toast=this.toast.create({
message:msg,
duration:3000
});
toast.present();
}
（暂将这个当成头像ui）
p1:
p2:
p3:
p4:
p5:
相机的这里就不演示了~（代码下一期一起发出来）（懒~）
感谢关注日宅记~现更名为：没才艺的普通人
