MUI如何调取相册的方法

第一种是HTML方法

　

　<label>

　　　　<input style="opacity: 0;" type="file" accept="image/*" id="head_img_change"/>

　　　　<img id="headimg" src="img/erma_search_goods_detail.png">

　　</label>　　

 $(function(){

 　　　　$("#head_img_change").change(function() {
 　　　　　　var $file = $(this);
 　　　　　　var fileObj = $file[0];
 　　　　　　var windowURL = window.URL || window.webkitURL;
 　　　　　　var dataURL;
 　　　　　　var $img = $("#headimg");
 　　　　　　if(fileObj && fileObj.files && fileObj.files[0]){
 　　　　　　　　dataURL = windowURL.createObjectURL(fileObj.files[0]);
 　　　　　　　　$img.attr('src',dataURL);
 　　　　　　}else{
 　　　　　　　　dataURL = $file.val();
 　　　　　　　　var imgObj = document.getElementById("headimg");
 　　　　　　　　// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性再加入，无效；
 　　　　　　　　// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
 　　　　　　　　imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
 　　　　　　　　imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
 　　　　　　}
 　　　　});

 　　})

　　说明：1）外部加个label是为了把让用户点击的时候在范围内的都会触发input

　　　　　  2）H5  input file上传图片，调用API:<input type="file" accept="image/*;capture=camera">直接调用相机
　　　　　　　　　　　　　　　　　　　　　　 <input type="file" accept="image/*" />调用相机、图片或者相册

　　　　　　　注：部分android机只能调用本地相册，相机调用不了或者只能调用相机，不能调用相册。

　　　　　  3）此方法是网上的一种方法，做了兼容的，IE6以上都能正常运行。

第二种为MUI方法

　1）内容链接：http://www.bcty365.com/content-146-3648-1.html

　2）需要改一下  点击头像触发   里的

　　拍照触发的对象的ID名改成自己的就行了。

　　还需要修改一下   上传图片  里的一点代码就可以用了：

　　var mainImage= document.getElementById("headimg");

　　mainImage.src = imgPath;

　　　　说明：这一部分改成上面的那两句就可以了，因为我原来放图片的地方设置有宽高，mainImage给它一个装图片的对象就行了。

 //拍照触发监听
 document.getElementById("changeimg").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 0:
                     break;
                 case 1:
                     getpic();
                     break;
                 case 2:
                     getimg();
                     break;
                 default:
                     break;
             }
         })
     }
 })
 //拍照
 function getpic() {
     var c = plus.camera.getCamera();
     c.captrueImage(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);
     }, {
         filname: "_doc/head.png"
     })
 }

 //获取相册
 function getimg() {
     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("删除成功");
                         entry.copyTo(root, "head.png", function(e) {
                             var e = e.fullPath + "?version=" + new Date().getTime();
                             uploadHead(e); /*上传图片*/
                             //变更大的图预览的src
                             //目前只有一张图暂且这样处理，后续需要用标准组件实现
                         }, function(e) {
                             console.log("copy img file:" + e.message);
                         });
                     }, function() {
                         console.log("删除" + 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 img file:" + e.message);
                     });
                 });
             }, function(e) {
                 console.log("get _www folder fail");
             })
         }, function(e) {
             console.log("读取拍照文件错误" + e.message);
         })
     }, function(a) {}, {
         filter: "image"
     })
 }
 //上传头像图片
 function uploadHead(imgPath) {
     var mainImage = document.getElementById("headimg");
     mainImage.src = imgPath;

     var image = new Image();
     image.src = imgPath;
     image.onload = function() {
         var imgData = getBase64Image(image);

         $.ajax({
             type: "post",
             data: imgData,
             url: "http://10.8.165.31/ceshi/reuserimg.php",
             success: function(data) {
                 console.log("ajax成功")
                 console.log(data);
             },
             error: function() {
                 console.log("ajax失败")
             }
         });
     }
 }

 //转换64
 function getBase64Image(img) {
     var canvas = document.createDocument("canvas");
     var width = img.width;
     var height = img.height;

     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;
     canvas.height = height;

     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,", "");

 }