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    });

阅读全文

0 0