1. 程式人生 > >mui上傳圖片

mui上傳圖片

            function plusReady(){  
                // 彈出系統選擇按鈕框  
                mui("body").on("tap","#cs1",function(){  
                    page.imgUp();  
                })  
                  
            }  
            var page=null;  
            page={  
                imgUp:function(){  
                    var m=this;  
                    plus.nativeUI.actionSheet({cancel:"取消",buttons:[  
                        {title:"拍照"},  
                        {title:"從相簿中選擇"}  
                    ]}, function(e){//1 是拍照  2 從相簿中選擇  
                        switch(e.index){  
                            case 1:appendByCamera();break;  
                            case 2:appendByGallery();break;  
                        }  
                    });  
                }  
                //攝像頭  
            }  
            
           
              
            // 拍照新增檔案           
            function appendByCamera(){
                plus.camera.getCamera().captureImage(function(e){
                   // console.log(e);
                    plus.io.resolveLocalFileSystemURL(e, function(entry) { 
                    var path = entry.toLocalURL(); 
                    document.getElementById('cs').src= path; 
                    diaoyongg();
                   // ImgSrc.push(path);
                    //就是這裡www.bcty365.com 
                    }, function(e) { 
                        mui.toast("讀取拍照檔案錯誤:" + e.message); 
                    }); 
    
                });   
                
            }
            //從相簿新增檔案
            function appendByGallery(){
                plus.gallery.pick(function(path){
                    //ImgSrc= path; 
                    document.getElementById('cs').src= path; 
                    diaoyongg();
                   // ImgSrc.push(path);
                });
            }
                                                
           
            //轉成base64 並壓縮
            function dealImage(path, callback){    
    var img = new Image();    
    img.src = path;    
    img.onload = function(){    
        //預設按比例壓縮    
        var w = this.width,    
            h = this.height;   
        var quality = 0.95; // 預設圖片質量為0.7    
            
        //生成canvas    
        var canvas = document.createElement('canvas');    
        var ctx = canvas.getContext('2d');    
            
        // 建立屬性節點    
        canvas.setAttribute("width", w);    
        canvas.setAttribute("height", h);  
                  
        ctx.drawImage(this, 0, 0, w, h);    
        // quality值越小,所繪製出的影象越模糊    
        var base64 = canvas.toDataURL('image/jpeg', quality);    
        // 回撥函式返回base64的值    
        callback(base64);    
    };    
};
//儲存地址
            var ImgSrc= new Array();
            
            // 呼叫函式處理圖片 
          function diaoyongg(){
            var im=document.getElementById('cs').src;//這個是獲取從相簿拍照傳過來的地址              
dealImage(im,function(base){  
//直接將獲取到的base64的字串,放到一個image標籤中就可看到測試後的壓縮之後的樣式圖了  
//document.getElementById("cs").src = base;  
console.log("壓縮後:" + base.length / 1024 + " " + base); 
var wt=plus.nativeUI.showWaiting();
  $.ajax({
            url:'http://pin.91dlg.com/api/index/upload',
            data:{
            image:base,
            token:tok
            },
            dataType:'json',
            type:'post',
            success:function (data) {
                console.log(data);
                console.log();
                 ImgSrc.push(data.data.data);
                //console.log(document.getElementById("cs1").src);
                 console.log(ImgSrc.length);
                 var s='';
                for(var i=0;i<ImgSrc.length;i++){
                s+="<img src='http://pin.91dlg.com/"+ImgSrc[i]+"' class='image-item' />"           
            }
                $('#cs').html(s);
                wt.close();//關閉等待提示按鈕
                
            },
            error:function () {
                console.log('error');
                wt.close();//關閉等待提示按鈕
            }
        })   
})  
           }