mui H5+ 調取 相冊 拍照 功能 上傳圖片 + 裁剪功能

H5+ 相冊拍照圖片上傳

　　點擊用戶頭像后，彈出actionSheet,選擇從相冊或是拍照；選取照片后調用上傳方法；

　　上傳圖片后調用PhotoClip.js  插件進行裁剪

具體流程

彈出actionSheet

/*點擊頭像觸發*/ 
        document.getElementById('headImage').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: 
                            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 s = entry.toLocalURL() + "?version=" + new Date().getTime(); 
                    uploadHead(s); /*上傳圖片*/ 
                }, function(e) { 
                    console.log("讀取拍照文件錯誤：" + e.message); 
                }); 
            }, function(s) { 
                console.log("error" + s); 
            }, { 
                filename: "_doc/head.png" 
            }) 
        } 

//本地相冊選擇 
        function galleryImg() { 
            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("file remove success"); 
                                entry.copyTo(root, 'head.png', function(e) { 
                                        var e = e.fullPath + "?version=" + new Date().getTime(); 
                                        uploadHead(e); /*上傳圖片*/ 
                                        //變更大圖預覽的src 
                                        //目前僅有一張圖片，暫時如此處理，后續需要通過標准組件實現 
                                    }, 
                                    function(e) { 
                                        console.log('copy image fail:' + e.message); 
                                    }); 
                            }, function() { 
                                console.log("delete image fail:" + 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 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) { 
            console.log("imgPath = " + imgPath); 
            mainImage.src = imgPath; 
            mainImage.style.width = "60px"; 
            mainImage.style.height = "60px"; 
 
            var image = new Image(); 
            image.src = imgPath; 
            image.onload = function() { 
                var imgData = getBase64Image(image); 

　　　　　　　　　　pc = new PhotoClip("#clipArea", {
　　　　　　　　　　　　　　　　　　　　　　　　size: [300, 300],//裁剪框大小
　　　　　　　　　　　　　　　　　　　　　　　　outputSize:[0,0],//打開圖片大小，[0,0]表示原圖大小
　　　　　　　　　　　　　　　　　　　　　　　　ok: "#clipBtn",
　　　　　　　　　　　　　　　　　　　　　　　　img: imgPath,
　　　　　　　　　　　　　　　　　　　　　　　　loadStart: function() { //圖片開始加載的回調函數。this 指向當前 PhotoClip 的實例對象，並將正在加載的 file 對象作為參數傳入。（如果是使用非 file 的方式加載圖片，則該參數為圖片的 url）
　　　　　　　　　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　　　　　　　　　　　loadComplete: function() {//圖片加載完成的回調函數。this 指向當前 PhotoClip 的實例對象，並將圖片的 <img> 對象作為參數傳入。
　　　　　　　　　　　　　　　　　　　　　　　　}, 　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　done: function(dataURL) { //裁剪完成的回調函數。this 指向當前 PhotoClip 的實例對象，會將裁剪出的圖像數據DataURL作為參數傳入。 　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　pc.destroy();銷毀裁剪，必須銷毀否則拍照和選取照片會沖突

 　　　　　　　　　　　　　　　　　　　　　　　　/*在這里調用上傳接口*/ 
　　　　　　　　　　　　　　　　　　　　　　　　　　//              mui.ajax("圖片上傳接口", { 
　　　　　　　　　　　　　　　　　　　　　　　　　　//                  data: { 
　　　　　　　　　　　　　　　　　　　　　　　　　　//                       
　　　　　　　　　　　　　　　　　　　　　　　　　　//                  }, 
　　　　　　　　　　　　　　　　　　　　　　　　　　//                  dataType: 'json', 
　　　　　　　　　　　　　　　　　　　　　　　　　　//                  type: 'post', 
　　　　　　　　　　　　　　　　　　　　　　　　　　//                  timeout: 10000, 
　　　　　　　　　　　　　　　　　　　　　　　　　　//                  success: function(data) { 
　　　　　　　　　　　　　　　　　　　　　　　　　　//                      console.log('上傳成功'); 
　　　　　　　　　　　　　　　　　　　　　　　　　　//                  }, 
　　　　　　　　　　　　　　　　　　　　　　　　　　//                  error: function(xhr, type, errorThrown) { 
　　　　　　　　　　　　　　　　　　　　　　　　　　//                      mui.toast('網絡異常，請稍后再試！'); 
　　　　　　　　　　　　　　　　　　　　　　　　　　//                  } 
　　　　　　　　　　　　　　　　　　　　　　　　　　//              }); 
 　　　　　　　　　　　　　　　　 } 

　　　　　　　　　　}
　　　　　　});

　　} 

//將圖片壓縮轉成base64 
 function getBase64Image(img) { var canvas = document.createElement("canvas"); var width = img.width; var height = img.height; // calculate the width and height, constraining the proportions 
            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,", ""); }