var imgurl = [];//用于存放图片的url
var photo = document.getElementById('photo')
photo.addEventListener('tap', function() {
fun_photo()
}, false);
//以下是拍照的弹出框
function fun_photo() {
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 cmr = plus.camera.getCamera();
var res = cmr.supportedImageResolutions[0];
var fmt = cmr.supportedImageFormats[0];
console.log(cmr)
console.log(res)
console.log(fmt)
cmr.captureImage(function(path) {
//plus.io.resolveLocalFileSystemURL(path, function(entry) {
plus.io.resolveLocalFileSystemURL(path, function(entry) {
console.log(entry)
console.log(path)
var imgname = path.substring(5);
console.log(imgname)
var localUrl = entry.toLocalURL();
console.log(localUrl)
var data_time = new Date().getTime()
uploadHead(localUrl + "?version=" + data_time);
imgurl.push(imgname)
}, function(err) {
console.error("拍照失败：" + err.message);
}, {
index: 1
});
});
}
//本地相册选择
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
var data_time = new Date().getTime();
root.getFile("head" + data_time + ".png", {}, function(file) {
//文件已存在
file.remove(function() {
console.log("file remove success");
var imgname = 'head' + data_time + '.png';
imgurl.push(imgname)
entry.copyTo(root, imgname, function(e) {
var e = e.fullPath + "?version=" + new Date().getTime();
uploadHead(e); /*上传图片*/
}, function(e) {
console.log('copy image fail:' + e.message);
});
}, function() {
console.log("delete image fail:" + e.message);
});
}, function() {
//文件不存在
var imgname = 'head' + data_time + '.png';
imgurl.push(imgname)
//imgurl = imgurl.split('');
console.log(imgurl)
entry.copyTo(root, 'head' + data_time + '.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) {
var image = new Image();
image.src = imgPath;
image.onload = function() {
Failure_upload(imgPath)
//imgurl.push(imgname)
var imgData = getBase64Image(image);
console.log(imgData);
var photobox = document.getElementById('photobox');
var html1 = '<p><img src='+imgData+' width="73px" height = "72px" /><span id="dele" style="color:#fff;background-color:#f00;border-radius: 50%; position: relative; top: -88px; left: 67px;width:15px;height:15px;text-align:center;display:block;line-height: 15px;font-size: 12px;">x</span></p>'
// var img = new Image(); //创建img容器
// img.src = imgData; //给img容器引入base64的图片
// img.style.width = 73 + 'px';
// img.style.height = 72 + 'px';
// img.style.marginRight = 15 + 'px';
// p_box.innerHTML = img;
photobox.innerHTML += html1;
//photobox.insertBefore(html1, photobox.children[0])
/*在这里调用上传接口*/
//mui.ajax("图片上传接口", {
//data: {
//img: imgData
//},
//dataType: 'json',
//type: 'post',
//timeout: 10000,
//success: function(data) {
//mui.toast('上传成功',{
//duration:'long',
//type:'div'
//});
//document.getElementById('head-img').src = imgPath;
//document.getElementById('head-img1').src = imgPath;
//document.getElementById('head-img2').src=imgPath;
//},
//error: function(xhr, type, errorThrown) {
//mui.toast('网络异常，请稍后再试！');
//}
//});
var dele = getId("dele");
console.log(dele)
dele.addEventListener('tap', function() {
var btnArray = ['否', '是'];
mui.confirm('确认删除照片？', 'app', btnArray, function(e) {
if (e.index == 1) {
var html1 = '<img id="photo" src="../images/breakdown_icon3.png" width="73px" height="72px">'
photobox.innerHTML = html1;
imgurl = [];
} else {
}
})
})
}
}
//将图片压缩转成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;
//return dataURL.replace("data:image/png;base64,", "");
}
网友评论