mui(".img ul").on("tap", "li.addImgge", 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;
}
})
}
})
//拍照
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
uploadHead(entry.toLocalURL(), entry.name); /*上傳圖檔*/
}, function(e) {
console.log("讀取拍照檔案錯誤:" + e.message);
});
}, function(s) {
console.log("error" + s);
})
}
//相冊
function galleryImg() {
plus.gallery.pick(function(paths) {
for (i in paths.files) {
uploadHead(paths.files[i], ""); /*上傳圖檔*/
}
}, function(e) {
mui.toast('取消了選擇');
}, {
multiple: true,
maximum: 9
})
}
這是調用本地的相冊和相機,下面就是上傳,在上傳之前先把圖檔壓縮為base64為編碼格式,在用blob轉化為arrayBuffer在上傳
var imgBase64=[];
var imgBaseUrl=[];
function uploadHead(imgPath, imgName) {
var image = new Image();
image.src = imgPath;
var li = document.createElement("li");
var img = document.createElement("img");
li.setAttribute("class","feedbackimg");
li.index=mui(".img ul li").length;
img.src = imgPath;
li.appendChild(img);
//alert(mui(".img ul")[0].innerHTML)
if(mui(".img ul li").length>="6"){
mui(".img ul li.addImgge")[0].style.display="none";
}else{
mui(".img ul")[0].appendChild(li);
if(mui(".img ul li").length>="6"){
mui(".img ul li.addImgge")[0].style.display="none";
}
}
image.onload = function() {
getCanvasBase64(imgPath).then(function(base640) {
imgBase64[imgBase64.length]=base640;
}, function(err) {
console.log(err);
});
}
}
var deleteImg = (t) => {
var index=t.index;
imgBase64.splice((index-1),1);
$($(".img ul li")[index]).remove();
}
mui(".button").on("tap", "button", function() {
mui(".mui-loading")[0].style.display="block";
for(let i=0;i<imgBase64.length;i++){
var urlData = imgBase64[i];
var base64 = urlData.split(',').pop();
var fileType = urlData.split(';').shift().split(':').pop();
blob = toBlob(base64, fileType);
// blob轉arrayBuffer
const reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = function(event) {
// 配置
var client = new OSS.Wrapper({
region: 'oss-cn-hangzhou', //你的oss位址
accessKeyId: '', //你的ak
accessKeySecret: '', //你的secret
secure: true,
//stsToken: '<Your securityToken(STS)>',//這裡我暫時沒用,登出掉
bucket: 'XXX' //你的oss名字
});
// 檔案名
var objectKey = `/AndroidApp/${new Date().getTime()}.${fileType.split('/').pop()}`;
// arrayBuffer轉Buffer
var buffer = new OSS.Buffer(event.target.result);
// 上傳
client.put(objectKey, buffer).then(function(result) {
imgBaseUrl[imgBaseUrl.length]=result.url;
/* e.g. result = {
name: "Uploads/file/20171125/1511601396119.png",
res: {status: 200, statusCode: 200, headers: {…}, size: 0, aborted: false, …},
url: "http://bucket.oss-cn-shenzhen.aliyuncs.com/Uploads/file/20171125/1511601396119.png"
} */
}).catch(function(err) {
console.log(err);
});
}
}
})
function getBase64Image(img, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width ? width : img.width;
canvas.height = height ? height : img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL();
return dataURL;
}
function getCanvasBase64(img) {
var image = new Image();
//至關重要
image.crossOrigin = '';
image.src = img;
//至關重要
var deferred = $.Deferred();
if (img) {
image.onload = function() {
deferred.resolve(getBase64Image(image)); //将base64傳給done上傳處理
//document.getElementById("container2").appendChild(image);
}
return deferred.promise(); //問題要讓onload完成後再return sessionStorage['imgTest']
}
}
function toBlob(urlData, fileType) {
let bytes = window.atob(urlData);
let n = bytes.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bytes.charCodeAt(n);
}
return new Blob([u8arr], {
type: fileType
});
}