使用PhoneGap裁剪和壓縮圖片並上傳（安卓版）

標籤：des   android   style   http   io   ar   使用   sp   java   

安裝phonegap的camera外掛程式後，可以對從圖片庫選擇圖片進行裁剪或壓縮操作，但外掛程式本身有些問題，經過改進，現在可以順利完成上述功能。

安裝方法

1 首先使用命令列安裝camera外掛程式:

phonegap plugin add org.apache.cordova.camera

2 安裝成功後，下載下面的CameraLauncher.java檔案，將外掛程式包中的同名檔案替換掉：

http://phonegap.jiusem.net/camera/src/android/CameraLauncher.java

使用方法

1 裁剪圖片。下面的代碼示範了完整的將圖片裁剪為100*100並上傳到服務端的過程，請注意高亮的部分：

$(function(){$(‘#b1‘).click(function(){navigator.camera.getPicture(function(imgData){$(‘#pInfo‘).html(imgData);//$(‘#img‘).attr(‘src‘,imgData);var options = new FileUploadOptions();options.fileKey="file";options.fileName="test.jpg";options.mimeType="image/jpeg";var ft = new FileTransfer();ft.upload(imgData, encodeURI("http://...test.php"), win, fail, options);}, function(){}, { quality:50,    destinationType: Camera.DestinationType.FILE_URL ,    sourceType : 0,

                    //====關鍵設定=======================================    allowEdit:true, //出現裁剪框    targetWidth:100,//圖片裁剪高度    targetHeight:100 });//圖片裁剪高度

//======關鍵設定=========================================});//上傳成功的回調var win = function(r) {             console.log(r);}//上傳失敗的回調var fail = function(error) {    alert("上傳失敗");}});

2 壓縮圖片。下面的代碼示範了將圖片大小限制在768*1280以內並上傳的過程，最後圖片不一定都是768*1280，但寬高都不會超過設定的值，請注意高亮部分：

$(function(){$(‘#b1‘).click(function(){navigator.camera.getPicture(function(imgData){$(‘#pInfo‘).html(imgData);//$(‘#img‘).attr(‘src‘,imgData);var options = new FileUploadOptions();options.fileKey="file";options.fileName="test.jpg";options.mimeType="image/jpeg";var ft = new FileTransfer();ft.upload(imgData, encodeURI("http://...test.php"), win, fail, options);}, function(){}, {      quality:50,    destinationType: Camera.DestinationType.FILE_URL ,    sourceType : 0,    //=====關鍵區段=========================================    targetWidth:768, //圖片輸出寬度    targetHeight:1280 //圖片輸出高度

//======關鍵區段========================================== });});//上傳成功的回調var win = function(r) {           console.log(r);}//上傳失敗的回調var fail = function(error) {    alert("上傳失敗");}});

上面的例子含有檔案上傳，如果需要測試完整的例子，你還需要安裝File Transfer外掛程式，檔案上傳的服務端代碼和普通的表單上傳沒有分別。

歡迎和我交流，任何問題或改進建議請留言或加我QQ：291445576（說明來意） ~

使用PhoneGap裁剪和壓縮圖片並上傳（安卓版）