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 :
                            break;
                        case :
                            getImage(); /*拍照*/
                            break;
                        case :
                            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 > ) {
                    height = Math.round(height *=  / width);
                    width = ;
                }
            } else {
                if (height > ) {
                    width = Math.round(width *=  / height);
                    height = ;
                }
            }
            canvas.width = width;   /*设置新的图片的宽度*/
            canvas.height = height; /*设置新的图片的长度*/
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, , , width, height); /*绘图*/
            var dataURL = canvas.toDataURL("image/png", 0.8);
            return dataURL.replace("data:image/png;base64,", "");
        }