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

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