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

}