點擊用戶頭像后，彈出actionSheet,選擇從相冊或是拍照；選取照片后調(diào)用上傳方法；
上傳圖片后調(diào)用PhotoClip.js 插件進(jìn)行裁剪
/*點擊頭像觸發(fā)*/ document.getElementById('headImage').addEventListener('tap', function() { if (mui.os.plus) { var a = [{ title: "拍照" }, { title: "從手機(jī)相冊選擇" }]; 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); /*上傳圖片*/ //變更大圖預(yù)覽的src //目前僅有一張圖片，暫時如此處理，后續(xù)需要通過標(biāo)準(zhǔn)組件實現(xiàn) }, 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,
loadStart: function() { //圖片開始加載的回調(diào)函數(shù)。this 指向當(dāng)前 PhotoClip 的實例對象，并將正在加載的 file 對象作為參數(shù)傳入。（如果是使用非 file 的方式加載圖片，則該參數(shù)為圖片的 url）
},
loadComplete: function() {//圖片加載完成的回調(diào)函數(shù)。this 指向當(dāng)前 PhotoClip 的實例對象，并將圖片的 <img> 對象作為參數(shù)傳入。
},
done: function(dataURL) { //裁剪完成的回調(diào)函數(shù)。this 指向當(dāng)前 PhotoClip 的實例對象，會將裁剪出的圖像數(shù)據(jù)DataURL作為參數(shù)傳入。
pc.destroy();銷毀裁剪，必須銷毀否則拍照和選取照片會沖突
/*在這里調(diào)用上傳接口*/ // mui.ajax("圖片上傳接口", { // data: { // // }, // dataType: 'json', // type: 'post', // timeout: 10000, // success: function(data) { // console.log('上傳成功'); // }, // error: function(xhr, type, errorThrown) { // mui.toast('網(wǎng)絡(luò)異常，請稍后再試！'); // } // }); } }
});
}
//將圖片壓縮轉(zhuǎn)成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; /*設(shè)置新的圖片的寬度*/ canvas.height = height; /*設(shè)置新的圖片的長度*/ 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,", ""); }
