cordova混合式开发:实现头像裁切、本地缩放、上传,适用于android和ios

来源:互联网 发布:mfc socket编程实例 编辑:程序博客网 时间:2024/06/16 06:07

命令行进入项目

安装插件

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    });
原创粉丝点击