2015-10-06 69 views
0

我一直在這方面努力了一段時間。Phonegap camera.getPicture()缺少文件擴展名和標題數據

當我用camera.getPicture()和ft.upload()在phonegap應用程序中上傳圖像時,圖像上傳時沒有文件擴展名。我讀它是因爲緩存的事情,提供了一個鏈接到實際的文件入口什麼的。

這是令人討厭的,但我繼續前進,因爲該圖像在我的服務器上正常上傳,即使沒有文件擴展名也可以很好地顯示。

但今天,我們認爲圖像有時會旋轉90°。

我立即在圖像數據的缺失部分和這個問題之間建立了聯繫,我猜(我不確定)在這一點上我是對的。

我讀旋轉90°,可以通過缺少的頭元數據引起的圖像,所以我想不僅是文件擴展名失蹤畢竟..

有人能解釋我什麼我在代碼中失蹤,該做什麼或朝哪個方向看?那將是真棒。

這裏是我的代碼部分(我可以給你更多的如果需要的話)

navigator.camera.getPicture(function(uri) { 
    try { 
    var imageURI = uri; 
    ... 
    var ft = new FileTransfer(); 
    ft.upload(imageURI, "some_script.php", function(r) { 
     ... 

注:存儲在數據庫中的圖像似乎罰款,當顯示在標籤圖像的問題發生。

這裏有一個文件獲取旋轉一次上傳的例子(我手動添加了.jpg擴展名,所以我可以上傳它在noelshack否則不能)。正如你所看到的,鏈接圖像是確定的,但一旦在標記它被旋轉

TL;博士

如何上傳圖片文件完全與phonegap包括文件擴展名&元數據標題,而不僅僅是一種緩存的文件條目。

回答

1

的iOS代碼

function capturePhoto() { 
    navigator.camera.getPicture(uploadPhoto, onFail, { 
        quality: 50, 
        // allowEdit: true, 
        correctOrientation: true, 
        destinationType: Camera.DestinationType.FILE_URL, 
        // destinationType: Camera.DestinationType.DATA_URL 
        sourceType: Camera.PictureSourceType.CAMERA 
        } 
              ); 
    } 

    // function onPhotoDataSuccess(imageData) { 
    // localStorage.setItem("ImageData",imageData); 
    // localStorage.setItem("captureImgFlag",captureImgFlag); 
    // window.location = 'profileUserImgUploadInGallary.html'; 
    // } 

    function onFail(message) { 
    // alert('Failed because: ' + message); 
    } 

    function uploadPhoto(imageURI){ 
     console.log(imageURI); 
    spinnerplugin.show(); 
    var UserId = localStorage.getItem('UserId'); 
    // imgPostGallary 
    // var img = document.getElementById('imgPostGallary'); 
       // var imageURI = img.src; 
       // var imageURI = imageData; 
       // img.src = imageURI; 
    // var ImageDataUp = localStorage.getItem('ImageDataUp'); 
    // var imageURI = ImageDataUp; 
    var options = new FileUploadOptions(); 
    options.fileKey="file"; 
    options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1); 
    options.mimeType="image/jpeg"; 

    var ft = new FileTransfer(); 
    ft.upload(imageURI, encodeURI("http://XYZ/uploadimg?user_id="+UserId+""), winGallary, fail, options); 
    console.log(ft.upload); 
    } 

    function winGallary(rGallary) { 
     console.log("Code = " + rGallary.responseCode); 
     console.log("Response = " + rGallary.response); 
     console.log("Sent = " + rGallary.bytesSent); 
     spinnerplugin.hide(); 
     window.location = 'profileUserImgUploadInGallary.html'; 
    } 

    function fail(error) { 
    console.log("upload error source " + error.source); 
    console.log("upload error target " + error.target); 
    } 
+0

謝謝,這段代碼在android和ios上都工作正常。也許窗口我會嘗試,但我想它會 – BelgianR

+0

亞代碼工作在幾乎所有的平臺,沒有任何錯誤。 &Thank你BelgianR。 –

0

你好,這裏是完整的例子它爲我拍攝照片和設置圖像標記和上傳服務器上的照片。你仍然面臨着任何問題。

<img id="profileImageId"> 
    <script type="text/javascript"> 
       var profileImage = ''; 
       function profileCapturePhotoEdit() { 
        navigator.camera.getPicture(profileonPhotoDataSuccess, onFail, { 
        quality: 50, 
        // allowEdit: true, 
        correctOrientation: true, // using this your image not roted 90 degree 
        destinationType: Camera.DestinationType.DATA_URL, 
        sourceType: Camera.PictureSourceType.CAMERA } 
              ); 
       } 

       function profileonPhotoDataSuccess(imageData) { 
        localStorage.setItem("imageDataProfile","data:image/jpeg;base64," + imageData); 
        var imageDataProfile = localStorage.getItem("imageDataProfile"); 
        document.getElementById('profileImageId').src = imageDataProfile; 
       } 

       function onFail(message) { 
        // alert('Failed because: ' + message); 
       } 

       </script> 

       <!-- uploadProfileImage --> 
      <button onclick="uploadProfileImage();"> 
       Upload Profile Image 
      </button> 

       <script type="text/javascript"> 
       function uploadProfileImage() { 
       var UserId = localStorage.getItem('UserId'); 
       var img = document.getElementById('profileImageId'); 
       var imageURI = img.src; 
       var options = new FileUploadOptions(); 
       options.fileKey="file"; // your file key in your .php file change here 
       options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1); 
       options.mimeType="image/jpeg"; // your extension 

       var ft = new FileTransfer(); 
       ft.upload(imageURI, encodeURI("http://XYZ?user_id="+UserId+""), winProfile, failProfile, options); 
       } 

       function winProfile(r) { 
       console.log("Code = " + r.responseCode); 
       console.log("Response = " + r.response); 
       console.log("Sent = " + r.bytesSent); 
       // alert('Send success'); 
       } 

       function failProfile(error) { 
       console.log("upload error source " + error.source); 
       console.log("upload error target " + error.target); 
       } 

      </script> 
+0

感謝你的代碼,我想出如何讓正確的元數據。我需要的所有代碼都是將Camera.DestinationType.FILE_URI更改爲Camera.DestinationType.DATA_URL,並在成功回調中向imageUri變量添加「data:image/jpeg; base64」。 但它仍然給我一個沒有擴展名的文件,但無論什麼,因爲圖像現在正確顯示 – BelgianR

+0

但是,根據phonegap doc:在較新的設備上使用相機拍攝的照片的圖像質量相當不錯,來自相冊即使指定了質量參數,也不會縮減到較低質量。使用Base64對這些圖像進行編碼已導致許多較新設備出現內存問題。 **因此,強烈建議將FILE_URI用作'Camera.destinationType'。** – BelgianR

+0

它不適用於IOS。我一直得到錯誤代碼1文件沒有發現,即使圖像顯示在元素 – BelgianR