1 调用手机相机的功能(可以查看官方API http://www.html5plus.org/doc/zh_cn/camera.html)
2 调用系统相册的功能(可以查看官方API http://www.html5plus.org/doc/zh_cn/gallery.html)
3 照片资源上传到服务(可以查看官方API http://www.html5plus.org/doc/zh_cn/uploader.html)
下面是我的使用例子:
一、调用 打开系统选择框按钮
document.getElementById('headImage').addEventListener('tap', function() { if (mui.os.plus) { var buttonTit = [{ title: "拍照" }, { title: "从手机相册选择" }]; plus.nativeUI.actionSheet({ title: "上传图片", cancel: "取消", buttons: buttonTit }, 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 imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径 setHtml(imgSrc); }, function(e) { console.log("读取拍照文件错误:" + e.message); }); }, function(s) { console.log("error" + s); }, { filename: "_doc/camera/" }) }三、打开手机相册
// 从相册中选择图片 function galleryImg(){ // 从相册中选择图片 plus.gallery.pick( function(e){ for(var i in e.files){ var fileSrc = e.files[i] setHtml(fileSrc); } }, function ( e ) { console.log( "取消选择图片" ); },{ filter: "image", multiple: true, maximum: 5, system: false, onmaxed: function() { plus.nativeUI.alert('最多只能选择5张图片'); } }); }四、上传到服务器
// 上传的方法 function upload(){ var files = document.getElementById('testImg'); MicroTaskGUID = common.guid(); var rul = "服务器地址" var imgsArr = mui(".task-img"); mui.each(imgsArr, function(index, item){ // console.log(index) // console.log(item.src) createUp(item) }) function createUp (files) { var task = plus.uploader.createUpload(url, {method:"POST"}, function(t,status){ //上传完成 if(status==200){ console.log("上传成功:"+t.responseText); }else{ console.log("上传失败:"+status); } } ); //添加其他参数 // task.addData("name","test"); task.addFile(files.src,{key:files.src}); task.start(); } }