MUI---上传头像功能实现

这里使用MUI上传头像的功能是结合VUE来做的，所以：

changeFace:function(){
    var IMAGE_UNSPECIFIED = "image/*"; //相册显示的文件类型
    var PHOTOZOOM = 2; // 获取完图片返回key
    var PHOTOLAT = 1; // 剪裁完毕后返回key
    var main = plus.android.runtimeMainActivity(); //h5+获取应用主Activity实例对象
    var Intent = plus.android.importClass("android.content.Intent");
    //导入java类intent对象  以下importClass都是使用安卓原生类
    var MediaStore = plus.android.importClass("android.provider.MediaStore");
    var File = plus.android.importClass("java.io.File");
    var Uri = plus.android.importClass("android.net.Uri");
    var intent = new Intent(Intent.ACTION_PICK, null);
    intent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, IMAGE_UNSPECIFIED);
    intent.putExtra("scale", true);
    intent.putExtra("scaleUpIfNeeded", true);
    var outPutPath = plus.io.convertLocalFileSystemURL("_www/head.jpg");
    main.startActivityForResult(intent, PHOTOZOOM);
    // uploadImgPath
    main.onActivityResult = (requestCode,resultCode,data)=>{
    // main.onActivityResult = function(requestCode, resultCode, data) {
        if (PHOTOZOOM == requestCode) {
            var file = new File(outPutPath);
            // 输出目录uri
            var outPutUri = Uri.fromFile(file);
            if (data == undefined) {
                return false;
            }
            plus.android.importClass(data);
            var uri = data.getData();
            var cropIntent = new Intent("com.android.camera.action.CROP"); //裁剪
            cropIntent.setDataAndType(uri, IMAGE_UNSPECIFIED);
            // 截图完毕后 输出目录
            cropIntent.putExtra(MediaStore.EXTRA_OUTPUT, outPutUri);
            cropIntent.putExtra("crop", "true");
            //aspectX aspectY 是宽高的比例
            cropIntent.putExtra("aspectX", 1);
            cropIntent.putExtra("aspectY", 1);
            // outputX outputY 是裁剪图片宽高
            cropIntent.putExtra("outputX", 70);
            cropIntent.putExtra("outputY", 70);
            cropIntent.putExtra("return-data", true);
            main.startActivityForResult(cropIntent, PHOTOLAT);
        } else if (requestCode == PHOTOLAT) {
            if (data == undefined) {
                return false;
            }
            var a = new File(outPutPath);
            if (!a.exists()) {
                console.log(outPutPath);
                mui.toast('裁剪错误');
                return false;
            }
            this.uploadImgPath = outPutPath;
            console.log(outPutPath);
            alert(outPutPath);
            // img.src = outPutPath;
        };
    };
    // user/profile/update/
    var server = "";
    server = config.userProfileUpdate;
    var files = [];
    var upload_img = (p)=>{
        files = [];
        var n = p.substr(p.lastIndexOf('/')+1);
        files.push({name:"uploadkey"},{path:p});
        // 开始上传
        start_upload();
    };
    var start_upload = ()=>{
        if(files.length <= 0){
            plus.nativeUI.alert("没有添加上传文件");
            return;
        };
        // 原生的转圈等待框
        var wt = plus.nativeUI.showWaiting();
        var task = plus.uploader.createUpload(server,{methods:"POST"},(t,status){
            // 上传完成
            alert(status);
            if(status == 200){
                // 资源
                var responseText = t.responseText;
                // 转化为json
                var json = eval('('+responseText+')');
                // 上传文件的信息
                var files = json.files;
                // 上传成功以后的保存路径
                var img_url = files.uploadkey.url;
                alert(img_url);
                // ajax 写入数据库
                // 关闭转圈等待框
                wt.close();
            }else{
                console.log("上传失败："+status);
            };
        });
        task.addData("client","");
        task.addData("uid",getUid()); // 每次都不同
        for(var i=0;i<files.length;i++){
            var f = files[i];
            task.addFile(f.path,{key:f.name});
        };
        task.start();// 执行到这里才会开始上传
    };
    // 产生一个随机数
    var getUid = (){
        return Math.floor(Math.random()*100000000+100000000).toString();
    };
    // main.onActivityResult = function(requestCode, resultCode, data) {
    //     if (PHOTOZOOM == requestCode) {

    //         var file = new File(outPutPath);
    //         // 输出目录uri
    //         var outPutUri = Uri.fromFile(file);
    //         if (data == undefined) {
    //             return false;
    //         }
    //         plus.android.importClass(data);
    //         var uri = data.getData();
    //         var cropIntent = new Intent("com.android.camera.action.CROP"); //裁剪
    //         cropIntent.setDataAndType(uri, IMAGE_UNSPECIFIED);
    //         // 截图完毕后 输出目录
    //         cropIntent.putExtra(MediaStore.EXTRA_OUTPUT, outPutUri);
    //         cropIntent.putExtra("crop", "true");
    //         //aspectX aspectY 是宽高的比例
    //         cropIntent.putExtra("aspectX", 1);
    //         cropIntent.putExtra("aspectY", 1);
    //         // outputX outputY 是裁剪图片宽高
    //         cropIntent.putExtra("outputX", 70);
    //         cropIntent.putExtra("outputY", 70);
    //         cropIntent.putExtra("return-data", true);
    //         main.startActivityForResult(cropIntent, PHOTOLAT);
    //     } else if (requestCode == PHOTOLAT) {
    //         if (data == undefined) {
    //             return false;
    //         }
    //         var a = new File(outPutPath);
    //         if (!a.exists()) {
    //             console.log(outPutPath);
    //             mui.toast('裁剪错误');
    //             return false;
    //         }
    //         console.log(outPutPath);
    //         alert(outPutPath);
    //         // img.src = outPutPath;
    //     }
    // }
    // this.showSelectFace = !this.showSelectFace;
    // this.selectFace = true;
    // this.mask = mui.createMask((res)=>{
    //     this.selectFace = false;
    // });
    // this.mask.show();
    // if (mui.os.plus) {
    //     var a = [{
    //         title: "拍照"
    //     },{
    //         title: "从手机相册选择"
    //     }];
    //     plus.nativeUI.actionSheet({
    //         title: "修改用户头像",
    //         cancel: "取消",
    //         buttons: a
    //     }, function(b) { /*actionSheet 按钮点击事件*/
    //         switch (b.index) {
    //             case 0:
    //                 break;
    //             case 1:
    //                 getImage(); /*拍照*/
    //                 break;
    //             case 2:
    //                 galleryImg();/*打开相册*/
    //                 break;
    //             default:
    //                 break;
    //         }
    //     })
    // };
    // 拍照
    function getImage() {
        var c = plus.camera.getCamera();
        c.captureImage(function(e) {
            plus.io.resolveLocalFileSystemURL(e, function(entry) {
                var s = entry.toLocalURL() + "?version=" + new Date().getTime();
                uploadHead(s); /*上传图片*/
            }, function(e) {
                console.log("读取拍照文件错误：" + e.message);
            });
        }, function(s) {
            console.log("error" + s);
        }, {
            filename: "_doc/head.png"
        })
    };
    // 本地相册
    function galleryImg() {
        // 从相册中选择图片
        console.log("从相册中选择图片");
        plus.gallery.pick(function(path){
            console.log(path);
        },function ( e ) {
            console.log( "取消选择图片" );
        }, {filter:"image"} );
        // 从相册中选择图片
        // plus.gallery.pick(function(a) {
        //     plus.io.resolveLocalFileSystemURL(a, function(entry) {
        //         plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
        //             root.getFile("head.png", {}, function(file) {
        //                 //文件已存在
        //                 file.remove(function() {
        //                     console.log("file remove success");
        //                     entry.copyTo(root, 'head.png', function(e) {
        //                             var e = e.fullPath + "?version=" + new Date().getTime();
        //                             uploadHead(e); /*上传图片*/
        //                             //变更大图预览的src
        //                             //目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
        //                         },
        //                         function(e) {
        //                             console.log('copy image fail:' + e.message);
        //                         });
        //                 }, function() {
        //                     console.log("delete image fail:" + e.message);
        //                 });
        //             }, function() {
        //                 //文件不存在
        //                 entry.copyTo(root, 'head.png', function(e) {
        //                         var path = e.fullPath + "?version=" + new Date().getTime();
        //                         uploadHead(path); /*上传图片*/
        //                     },
        //                     function(e) {
        //                         console.log('copy image fail:' + e.message);
        //                     });
        //             });
        //         }, function(e) {
        //             console.log("get _www folder fail");
        //         })
        //     }, function(e) {
        //         console.log("读取拍照文件错误：" + e.message);
        //     });
        // }, function(a) {}, {
        //     filter: "image"
        // })
    };
    //上传头像图片
    function uploadHead(imgPath) {
        console.log("imgPath = " + imgPath);
        mainImage.src = imgPath;
        mainImage.style.width = "60px";
        mainImage.style.height = "60px";
        var image = new Image();
        image.src = imgPath;
        image.onload = function() {
            var imgData = getBase64Image(image);
            pc = new PhotoClip("#clipArea",{
                size: [300, 300],//裁剪框大小
                outputSize:[0,0],//打开图片大小，[0,0]表示原图大小
                ok:"#clipBtn",
                img: imgPath,
                // 图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象，并将正在加载的 file 对象作为参数传入。（如果是使用非 file 的方式加载图片，则该参数为图片的 url）
                loadStart:function(){},
                // 图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象，并将图片的 <img> 对象作为参数传入。
                loadComplete:function(){},
                // 裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入。
                done:function(dataURL){
                    // 在这里调用上传接口
                    // mui.ajax("图片上传接口",{
                    //     data:{},
                    //     dataType:'json',
                    //     type:'post',
                    //     timeout:10000,
                    //     success:function(data){console.log('上传成功');},
                    //     error:function(xhr, type, errorThrown){mui.toast("网络异常，请稍后重试！");}
                    // });
                }
            });
        }
    };
    //将图片压缩转成base64
    function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        var width = img.width;
        var height = img.height;
        // calculate the width and height, constraining the proportions
        if (width > height) {
            if (width > 100) {
                height = Math.round(height *= 100 / width);
                width = 100;
            }
        } else {
            if (height > 100) {
                width = Math.round(width *= 100 / height);
                height = 100;
            }
        }
        canvas.width = width;   /*设置新的图片的宽度*/
        canvas.height = height; /*设置新的图片的长度*/
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height); /*绘图*/
        var dataURL = canvas.toDataURL("image/png", 0.8);
        return dataURL.replace("data:image/png;base64,", "");
    };
},