H5拍照/图片上传js

var photo=document.getElementById('photo');
// 拍照
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();
console.log(s);
photo.src = s;
// photo.css({
// "transform": "rotate(90deg)",
// "-ms-transform": "rotate(90deg)", /* IE 9 */
// "-webkit-transform": "rotate(90deg)" /* Safari and Chrome */
// })
uploadHead(s);
//变更大图预览的src
//目前仅有一张图片,暂时如此处理,后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;
}, function(e) {
console.log("读取拍照文件错误:" + e.message);
});
}, function(s) {
console.log("error" + s);
}, {
filename: "_doc/head.jpg" 
})
}
// 从手机相册选择
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
root.getFile("head.jpg", {}, function(file) {
//文件已存在
file.remove(function() {
console.log("file remove success");
entry.copyTo(root, 'head.jpg', function(e) {
var e = e.fullPath + "?version=" + new Date().getTime();
$('#photo').attr('src',e);
uploadHead(e);
//变更大图预览的src
//目前仅有一张图片,暂时如此处理,后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
},
function(e) {
console.log('copy image fail:' + e.message);
});
}, function() {
console.log("delete image fail:" + e.message);
});
}, function() {
//文件不存在
entry.copyTo(root, 'head.jpg', function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
photo.src = path;
//变更大图预览的src
//目前仅有一张图片,暂时如此处理,后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = 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.style.width="100px";
image.style.height="100px";
image.src=imgPath;//传过来的图片的路径
image.οnlοad=function(){
//压缩图片
var imgData=getBase64Image(image);
tjtx(imgData);
}
}
// 压缩图片
function getBase64Image(img){
var canvas=document.createElement("canvas");//找到canvas元素
var width=img.width;
var height=img.height;
canvas.width=width;
canvas.height=height;
var ctx = canvas.getContext('2d');//创建canvas对象 
ctx.drawImage(img, 0, 0, width, height);//绘图
var dataURL = canvas.toDataURL("image/jpeg", 0.5);
// return dataURL.replace("data:image/jpeg;base64,", "");
return dataURL;
} 
// 手机拍照
mui(".mui-table-view-cell").on("tap", "#head", function(e) {
if(mui.os.plus){
var a = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];
plus.nativeUI.actionSheet({
title: "修改头像",
cancel: "取消",
buttons: a
}, function(b) {
switch (b.index) {
case 0:
break;
case 1:
getImage();
break;
case 2:
galleryImg();
break;
default:
break
}
}) 
}
});

(本博主只是一个初学的菜鸟--Anguler,希望能够帮助到需要的人,如果有不正确的地方希望多多包涵和欢迎随时提出来,一起进步)


你可能感兴趣的:(App)