命令行进入项目
安装插件
cordova plugin add cordova-plugin-camera cordova-plugin-file cordova-plugin-file-opener2 cordova-plugin-file-transfer cordova-plugin-crop
js调用代码
一、拍照/选图 ->裁切 -> 上传
navigator.camera.getPicture(
function success(imageURI){
plugins.crop(function success(url) {
url = url.split('?');
this.upfile(url[0]);
}, function fail(err) {
console.log(err);
}, imageURI, {quality: 80});
},
function fail(message){
navigator.notification.alert("操作失败,原因:" + message, null, "警告");
},
{
//拍照
destinationType: Camera.DestinationType.FILE_URI
//相册选图
//mediaType: Camera.MediaType.PICTURE,
//sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM
}
);
//上传图片
function upfile ( fileURL ) {
var uri = encodeURI(BASE_URL + "api/upfile/up_avatar"); //服务器接收地址
var options = new FileUploadOptions();
options.fileKey="file"; //表单元素的名称。默认为file
options.fileName=fileURL.substr(fileURL.lastIndexOf('/')+1); //在服务器上保存文件时要使用的文件名。默认为image.jpg
options.mimeType="text/plain"; //要上传的数据的MIME类型。默认为image/jpeg。
options.headers = {'headerParam':'headerValue'};
var ft = new FileTransfer();
// 上传进度
// ft.onprogress = function(progressEvent) {
// if (progressEvent.lengthComputable) {
// loadingStatus.setPercentage(progressEvent.loaded / progressEvent.total);
// } else {
// loadingStatus.increment();
// }
// };
ft.upload(fileURL, uri,
function win(r) {
var fileUrl = JSON.parse(r.response).file_name;
$('#js-headimg').attr('src',BASE_URL+fileUrl);
},
function fail(error) {
alert("An error has occurred: Code = " + error.code);
}, options
);}
二、上面方法经测试可用,但是crop插件裁切图片没有进行缩放处理,导致很多大图上传速度很慢,且耗费流量,下面增加cordova-imageResize插件,裁切完图片后进行本地缩放,然后再上传至服务器;
安装插件
cordova plugin add https://github.com/autobotsrocks/cordova-imageResize部分用户会安装失败,如果安装失败,请手动将插件下载到项目的plugin目录下,然后改文件夹名称为com.autobots.cordova.imageResize(目的是和plugin.xml下id值保持一致),最后重新构建cordova项目,该插件就会被引用到项目中;
js代码
navigator.camera.getPicture(
function success(imageURI){
plugins.crop(function success(url) {
url = url.split('?');
//缩放裁切后的图片,然后再上传
window.autobots.imageResize.resize(
{
source: url[0],
quality: 90, // Default 70
type: 'maxPixelResize' | 'minPixelResize', //Default maxPixelResize
width: 100,
height: 100
},
function(response) {
//console.log(response.filePath);
//console.log(response.width);
//console.log(response.height);
this.upfile('file://'+ response.filePath);
},
function(error) {
alert(error);
}
);
}, function fail(err) {
console.log(err);
}, imageURI, {quality: 80});
},
function fail(message){
navigator.notification.alert("操作失败,原因:" + message, null, "警告");
},
{
//拍照
destinationType: Camera.DestinationType.FILE_URI
//相册选图
//mediaType: Camera.MediaType.PICTURE,
//sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM
}
);