mui調用本地相冊和拍照功能

圖例

只用更改上傳圖片ajax部分代碼即可

1、html

<div class="headdiv">
    <img src="" id="userImg"/>
</div>

2、js

<script>
    /*調相機本地相抵上傳圖片*/
    mui.plusReady(function(){
        document.getElementById(‘userImg‘).addEventListener(‘tap‘,function(){
            if(mui.os.plus){
                
 
var a=[{
                    title:‘拍照‘
                },{
                    title:‘從手機相冊選擇‘
                }];
                plus.nativeUI.actionSheet({
//                  title:‘修改頭像‘,
                    cancel:‘取消‘,
                    buttons:a
                },function(b){
                    
 
switch(b.index){
                        case 0:
                            break;
                        case 1:
                            //拍照
                            getImages();
                            break;
                        case 2:
                            //打開相冊
                            galleryImages();
                            
 
break;
                        default:
                            break;
                    }
                },false);
            }
        });

        //拍照
        function getImages(){
            var mobileCamera=plus.camera.getCamera();
            mobileCamera.captureImage(function(e){
                plus.io.resolveLocalFileSystemURL(e,function(entry){
                    var path=entry.toLocalURL()+‘?version=‘+new Date().getTime();
                    uploadHeadImg(path);
                    console.log(path);
                },function(err){
                    console.log("讀取拍照文件錯誤");
                });
            },function(e){
                console.log("er",err);
            },function(){
                filename:‘_doc/head.png‘;
            });
        }

        //本地相冊選擇 
        function galleryImages() { 
            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(); 
                                        uploadHeadImg(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(); 
                                    uploadHeadImg(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 uploadHeadImg(imgPath){
            //選中圖片之後，頭像當前的照片變為選擇的照片
            var mainImg=document.getElementById(‘userImg‘);
            mainImg.src=imgPath;
            
            var images=new Image();
            images.src=imgPath;
            var imgData=getBase64Image(images);
            mui.ajax(‘‘,{  //第一個參數是接口名
                data:{
                    ‘imgDatas‘:imgData
                },
                dataType:‘json‘,//服務器返回json格式數據
                type:‘post‘,//HTTP請求類型
                timeout:10000,//超時時間設置為10秒；
                success:function(data){
                    if(data.status==‘1‘){
                        mui.alert(‘上傳成功！‘);
                    }
                },
                error:function(xhr,type,errorThrown){
                    if(type==‘timeout‘){
                        mui.alert(‘服務器連接超時，請稍後再試‘);
                    }
                }
            });
        }


        //壓縮圖片轉成base64
        function getBase64Image(img){
            var canvas=document.createElement("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,‘,‘‘);
        }
    });
</script>

mui調本地相冊上傳圖片