例項：

具體流程：點選觸發選擇拍照或相簿-->拍照或相簿選擇照片-->拿到圖片路徑進行壓縮-->讀取檔案並顯示在頁面上

1. 首先是html程式碼，很簡單，就是給一個新增按鈕，點選觸發事件，這裡我就不把css檔案放出來，大家知道是一個新增按鈕就行。

   <h2 class="title-detail">
                      	圖片描述
                   </h2>
                   <input type="hidden" id="picIndex" value="0">
                   <div id='image-list' class="row image-list">
                   	<!-- <input id="upload_image" type="file" name="image" accept="image/*" /> -->
                   	 <div class="image-item space" onclick="showActionSheet()">
                   		<div class="image-up"></div>
                   	</div>
                   </div>
    
   

2. 後面我們來看下具體的js程式碼，按照上面我們說的方法共分為5個方法，具體如下：

   //圖片顯示
          function showPics(url,name){    	   
       	 //根據路徑讀取到檔案 
              plus.io.resolveLocalFileSystemURL(url,function(entry){
           	   entry.file( function(file){
           		   var fileReader = new plus.io.FileReader();
           		   fileReader.readAsDataURL(file);
                      	   fileReader.onloadend = function(e) {
                   	       var picUrl = e.target.result.toString();
                   	       var picIndex = $("#picIndex").val();
   	               		var nowIndex = parseInt(picIndex)+1;
   	               		$("#picIndex").val(nowIndex);
   	               		var html = '';
   	               		html += '<div class="image-item " id="item'+nowIndex+'">';
   	               		html += '<div class="image-close" onclick="delPic('+nowIndex+')">X</div>';
   	               		html += '<div><img src="'+picUrl+'" class="upload_img" style="width:100%;height:100%;"/></div>';
   	               		html += '</div>';
   	               		html += $("#image-list").html();
   	               		$("#image-list").html(html); 
                      	}
           	   });
             }); 
          }
        	//壓縮圖片  
          function compressImage(url,filename){  
              var name="_doc/upload/"+filename;
              plus.zip.compressImage({  
                      src:url,//src: (String 型別 )壓縮轉換原始圖片的路徑  
                      dst:name,//壓縮轉換目標圖片的路徑  
                      quality:40,//quality: (Number 型別 )壓縮圖片的質量.取值範圍為1-100  
                      overwrite:true//overwrite: (Boolean 型別 )覆蓋生成新檔案  
                  },  
                  function(zip) {
               	   //頁面顯示圖片
               	   showPics(zip.target,name);
                  },function(error) {  
                      plus.nativeUI.toast("壓縮圖片失敗，請稍候再試");  
              });  
          } 
         
        	//呼叫手機攝像頭並拍照
          function getImage() {  
              var cmr = plus.camera.getCamera();  
              cmr.captureImage(function(p) {  
                  plus.io.resolveLocalFileSystemURL(p, function(entry) {  
                      compressImage(entry.toLocalURL(),entry.name);  
                  }, function(e) {  
                      plus.nativeUI.toast("讀取拍照檔案錯誤：" + e.message);  
                  });  
              }, function(e) {  
              }, {  
                  filter: 'image' 
              });  
          }
          //從相簿選擇照片（單張）
          function galleryImgs() {  
       	    plus.gallery.pick(function(e) {  
       	    	var name = e.substr(e.lastIndexOf('/') + 1);
       	       compressImage(e,name);
       	    }, function(e) {  
       	    }, {  
       	        filter: "image"  
       	    });  
       	}
            //從相簿選擇照片（多張）
          galleryImgs(){
           let _this = this;
           plus.gallery.pick(function(event) {
           var files = event.files;
               for(var i=0;i<files.length;++i){
                 var file = files[i];
                   plus.io.resolveLocalFileSystemURL(file,function(entry){
                      _this.showPics(entry.fullPath);
   
               });
             }
           }, function(e) {
           }, {
             filter: "image",
             multiple:true
           });
         }
          
          //點選事件，彈出選擇攝像頭和相簿的選項
       	function showActionSheet() {  
       	    var bts = [{  
       	        title: "拍照"  
       	    }, {  
       	        title: "從相簿選擇"  
       	    }];  
       	    plus.nativeUI.actionSheet({  
       	            cancel: "取消",  
       	            buttons: bts  
       	        },  
       	        function(e) {  
       	            if (e.index == 1) {  
       	                getImage();  
       	            } else if (e.index == 2) {  
       	                galleryImgs();  
       	            }  
       	        }  
       	    );  
       	}
    
   

3. 有幾點進行說明下：(1)：壓縮圖片方法，這裡我採用的是重新寫一個新檔案  (2)：圖片顯示方法，該方法很重要。因為我這邊坐的是WEB端APP，頁面都由伺服器返回，我們可以拿到的是手機本地的圖片，網上很多說法是直接拿檔案路徑就顯示了，但是我卻怎麼都沒顯示出來。所以才用了FileReader將本地檔案讀取過來，e.target.result.toString();這個方法返回的就是我們的圖片的base64編碼，所以你看到下面我是動態拼HTML頁面，直接將該內容賦值給img標籤的src就可以直接顯示圖片。【這裡曾經糾結很久】有了這個base64編碼的url，我們就可以直接上傳到後臺。

使用注意：

這裡主要講打包工具不同需要做的工作也不太一樣。我這邊是用的Hbuilder線上打包，當然外殼也可以是Android環境打包，下面具體講下要注意的地方。

1. Hbuilder：這個是一個很方便的web開發工具，可以線上打包APP。【由於網路問題，我上傳不了圖片，儘量文字描述】我們需要在Hbuilder裡面建一個APP專案，點開manifest.json檔案，這個檔案就是我們APP的配置資訊，下面導航欄分別為：應用資訊、圖示配置、啟動Flash配置、SDK配置、許可權模組配置等。一般我們需要配下應用資訊（APP的名字、入口），圖示，啟動flash(可以選擇啟動圖片)，SDK配置一般是一些地圖、支付、推送等。重點來了，我們如果使用HTML5+，需要在模組許可權配置裡面，選擇我們用到的功能，比如我們用到了plus.nativeUI.*，就需要選擇NativeUI(原生UI)模組，也就是說，我們用了plus.xx.*，就需要勾選相應的模組。【這個manifest.json是視覺化介面，大家下載安裝就能明白】
2. Android環境：相對Hbuilder，Android環境稍微複雜一點，由於我沒有在Android環境裡搞過這個，這裡只是介紹下Hbuilder官網的一些使用說明。

   舉例說明：例如我們需要使用Camera物件，需要做如下配置：

   2.1：新增camera.jar。

   2.2：AndroidManifest.xml permission節點中新增：

   <uses-permission android:name="android.permission.CAMERA"/>
              <uses-feature android:name="android.hardware.camera"/>

   2.3：properties.xml features節點中新增：

              <featurename="Camera" value="io.dcloud.js.camera.CameraFeatureImpl"/>

1. 這個配置方式在Hbuilder的官網上可以下載，裡面包含所有的jar包和不同的許可權所需的配置。
2. 感謝分享http://blog.csdn.net/u013185616/article/details/53195820