h5+实现拍照并显示缩略图

var imgurl = [];//用于存放图片的url
        var photo = document.getElementById('photo')
        photo.addEventListener('tap', function() {
            fun_photo()
        }, false);
        //以下是拍照的弹出框　
        function fun_photo() {
            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;
                    }
                })
            }
        }
        //拍照
        function getImage() {
            var cmr = plus.camera.getCamera();
            var res = cmr.supportedImageResolutions[0];
            var fmt = cmr.supportedImageFormats[0];
            console.log(cmr)
            console.log(res)
            console.log(fmt)
            cmr.captureImage(function(path) {
                //plus.io.resolveLocalFileSystemURL(path, function(entry) {  
                plus.io.resolveLocalFileSystemURL(path, function(entry) {
                    console.log(entry)
                    console.log(path)
                    var imgname = path.substring(5);
                    console.log(imgname)
                    var localUrl = entry.toLocalURL();
                    console.log(localUrl)
                    var data_time = new Date().getTime()
                    uploadHead(localUrl + "?version=" + data_time);
                    imgurl.push(imgname)
                }, function(err) {
                    console.error("拍照失败：" + err.message);
                }, {
                    index: 1
                });
            });
        }
        //本地相册选择
        function galleryImg() {
            plus.gallery.pick(function(a) {
                plus.io.resolveLocalFileSystemURL(a, function(entry) {
                    plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
                        var data_time = new Date().getTime();
                        root.getFile("head" + data_time + ".png", {}, function(file) {
                            //文件已存在
                            file.remove(function() {
                                console.log("file remove success");
                                var imgname = 'head' + data_time + '.png';
                                imgurl.push(imgname)
                                entry.copyTo(root, imgname, function(e) {
                                    var e = e.fullPath + "?version=" + new Date().getTime();
                                    uploadHead(e); /*上传图片*/
                                }, function(e) {
                                    console.log('copy image fail:' + e.message);
                                });
                            }, function() {
                                console.log("delete image fail:" + e.message);
                            });
                        }, function() {
                            //文件不存在
                            var imgname = 'head' + data_time + '.png';
                            imgurl.push(imgname)
                            //imgurl = imgurl.split('');
                            console.log(imgurl)
                            entry.copyTo(root, 'head' + data_time + '.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) {
            var image = new Image();
            image.src = imgPath;
            image.onload = function() {
                Failure_upload(imgPath)
                //imgurl.push(imgname)
                var imgData = getBase64Image(image);
                console.log(imgData);
                var photobox = document.getElementById('photobox');
                var html1 = '<p><img src='+imgData+' width="73px" height = "72px" /><span id="dele" style="color:#fff;background-color:#f00;border-radius: 50%; position: relative; top: -88px; left: 67px;width:15px;height:15px;text-align:center;display:block;line-height: 15px;font-size: 12px;">x</span></p>'
//              var img = new Image(); //创建img容器
//              img.src = imgData; //给img容器引入base64的图片
//              img.style.width = 73 + 'px';
//              img.style.height = 72 + 'px';
//              img.style.marginRight = 15 + 'px';
//              p_box.innerHTML = img;
                photobox.innerHTML += html1;
                //photobox.insertBefore(html1, photobox.children[0])
                /*在这里调用上传接口*/
                //mui.ajax("图片上传接口", {
                //data: {
                //img: imgData
                //},
                //dataType: 'json',
                //type: 'post',
                //timeout: 10000,
                //success: function(data) {
                //mui.toast('上传成功',{
                //duration:'long',
                //type:'div'
                //});
                //document.getElementById('head-img').src = imgPath;
                //document.getElementById('head-img1').src = imgPath;
                //document.getElementById('head-img2').src=imgPath;
                //}, 
                //error: function(xhr, type, errorThrown) {
                //mui.toast('网络异常，请稍后再试！');
                //}
                //});
                var dele = getId("dele");
                console.log(dele)
                dele.addEventListener('tap', function() {
                    var btnArray = ['否', '是'];
                        mui.confirm('确认删除照片？', 'app', btnArray, function(e) {
                            if (e.index == 1) {
                                var html1 = '<img id="photo" src="../images/breakdown_icon3.png" width="73px" height="72px">'
                                photobox.innerHTML = html1;
                                imgurl = [];
                            } else {
                                
                            }
                        })
                })
            }
        }
        //将图片压缩转成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;
            //return dataURL.replace("data:image/png;base64,", "");
        }