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