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

最新推荐文章于 2023-05-05 12:05:58 发布
weixin_33881140
最新推荐文章于 2023-05-05 12:05:58 发布
阅读量369
点赞数
文章标签： ui java 移动开发
原文链接：http://www.cnblogs.com/e0yu/p/10300135.html
版权
这里使用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,", ""); 
    };
},