在做項目的過程中,需要從相冊或是拍照,然後上傳,比如修改使用者頭像或是上傳項目圖檔。
效果圖
點選使用者頭像後,彈出actionSheet,選着從相冊或是拍照;選着圖檔後就調用上傳方法,上傳圖檔;在上傳之前先壓縮了一下圖檔。
使用流程
彈出actionSheet
/*點選頭像觸發*/
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 :
break;
case :
getImage(); /*拍照*/
break;
case :
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) {
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);
/*在這裡調用上傳接口*/
// 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 > ) {
height = Math.round(height *= / width);
width = ;
}
} else {
if (height > ) {
width = Math.round(width *= / height);
height = ;
}
}
canvas.width = width; /*設定新的圖檔的寬度*/
canvas.height = height; /*設定新的圖檔的長度*/
var ctx = canvas.getContext("2d");
ctx.drawImage(img, , , width, height); /*繪圖*/
var dataURL = canvas.toDataURL("image/png", );
return dataURL.replace("data:image/png;base64,", "");
}
總結
在使用中,我們可以發現,使用流程是非常清晰的;某種程度來說比原生iOS的使用還要簡單一些。
代碼下載下傳位址:請點選我!