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

最新推荐文章于 2024-07-29 17:18:39 发布

Aji_King

最新推荐文章于 2024-07-29 17:18:39 发布

阅读量4.2k

点赞数 1

本文链接：https://blog.csdn.net/sheng119/article/details/73618634

版权

本文介绍了使用Cordova进行混合应用开发时，如何实现头像裁切、本地图片缩放及上传功能。针对裁切后的图片未进行缩放导致上传速度慢和耗费流量的问题，通过添加cordova-imageResize插件，在裁切后对图片进行本地缩放，以提升上传效率并节省流量。该解决方案适用于Android和iOS平台。

摘要由CSDN通过智能技术生成

命令行进入项目

安装插件

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