muiに基づいてwebAppを開発し、ユーザーの顔写真をアップロードし、アルバムを選択してアップロードする.
jsキーコードセグメント:
/* */
document.getElementById('headImage').addEventListener('tap', function() {
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;
}
})
}
}, false);
//
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() {
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) {
var mainImage = document.getElementById("headImage");
console.log("imgPath = " + imgPath);
mainImage.src = imgPath;
mainImage.style.width = "90px";
mainImage.style.height = "90px";
var image = new Image();
image.src = imgPath;
image.onload = function() {
var imgData = getBase64Image(image);
/* */
var userId=plus.storage.getItem('userId');
mui.ajax(httpUrl+'appPath/appPath!ajaxUploadImg?userId='+userId,{
data:{imgData:imgData},
dataType:'json',// json
type:'post',//HTTP
timeout:10000,// 10 ;
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,", "");
}
function photoerror(img){
img.src="img/mryh.png";
img.null; //
}