这里使用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,", "");
};
},

MUI---上传头像功能实现的更多相关文章

  1. 完美实现类似QQ的自拍头像、上传头像功能!(Demo 源码)

    现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像. 一.相关技术 若要实现上述的自拍头像和上传头像的功能,会碰到 ...

  2. php实现手机拍照上传头像功能

    现在手机拍照很火,那么如何使用手机拍照并上传头像呢?原因很简单,就是数据传递,首先手机传递照片信息,这个就不是post传递 也不是get函数传递, 这个另外一种数据格式传递,使用的是$GLOBALS ...

  3. php实现视频拍照上传头像功能实例代码

    如果要在php中实现视频拍照我们需要借助于flash插件了,由flash拍出的确照片我们再通过php的$GLOBALS ['HTTP_RAW_POST_DATA']接受数据,然后保存成图片就可以了,下 ...

  4. (GoRails) 使用ActiveStorage给user添加上传头像功能。

    对activestorage的简单使用: 头像库:uifaces.co. 可以使用大量设置好的头像图片. 1.安装avatar rails active_storage:install 2.user ...

  5. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  6. asp.net mvc上传头像加剪裁功能介绍

    正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery.Jcrop 后台是asp.net mvc ...

  7. asp.net mvc上传头像加剪裁功能

    原文:asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jqu ...

  8. mvc上传头像加剪裁功能

    asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery ...

  9. web实现QQ头像上传截取功能

    由于最近一段时间比较忙,发现好久没写博客了,给大家分享下最近搞的logo上传截取功能.在实现这个功能之前找了一些jq的插件,最后选定了cropper在github中可以找到. 具体的思路是1:选择上传 ...

随机推荐

  1. 2 BeeGo 参数配置与路由配置

    beeGo 的参数配置 beeGo默认会解析当前应用下的conf/app.conf文件 默认的配置如下: appname = WEB httpport = 8080 runmode = dev run ...

  2. win8.1的ie11无法打开127.0.0.1和本机IP访问

    解决方法:把ie11安全选项里的启动保护模式对勾去掉!

  3. window 平台上面解决不能动态php_mysqli.dll

    今天在新服务器部署PHP+APACHE环境,启动的时候报错: PHP Startup: Unable to load dynamic library :php_mysqli.dll 解决办法: 把PH ...

  4. mysql5.7系列修改root默认密码

    操作系统为centos7 64 1.修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2. ...

  5. MongoDB 连接池

    http://www.cnblogs.com/huangfox/archive/2012/04/01/2428947.html http://www.iteye.com/problems/97350

  6. yum和apt-get用法及区别

    https://www.cnblogs.com/garinzhang/p/diff_between_yum_apt-get_in_linux.html

  7. wcf中的使用全双工通信(转)

    wcf中的使用全双工通信   wcf中的契约通信默认是请求恢复的方式,当客户端发出请求后,一直到服务端回复时,才可以继续执行下面的代码. 除了使用请求应答方式的通信外,还可以使用全双工.下面给出例子: ...

  8. cocos2dx 3.0 scrollview 在android下面背景變綠色了

    在windows上面跑的是OK的,  在android下面跑的時候就變成這樣子了:

  9. MySQL复制搭建

    1. 原理 参考<涂抹MySQL  跟着三思一步一步学MySQL >这本书. 2.环境背景 操作系统 :CentOS 6.5 数据库版本:MySQL 5.6 主库A:192.168.1.2 ...

  10. CentOS7--su和sudo

    在某些情况下, 以root用户身份访问系统有潜在危险,并可能导致系统和数据损害.我们可以用setuid程序,例如su和sudo解决. su命令 [app01rot@app-01 ~]$ su - ro ...