这里使用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,", "");
};
},
原文地址：https://www.cnblogs.com/e0yu/p/10300135.html
时间： 2024-10-17 13:57:58