Question

我已经在这方面苦苦挣扎了一段时间。

当我使用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完整上传图片文件，包括文件扩展名＆amp;元数据头，而不仅仅是一种缓存的文件条目。

Answer 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);
    }

Answer 2

您好，这是一个完整的示例，它正在为我拍摄照片并设置图像标记并在服务器上上传照片。你仍然面对任何问题给我留言。

<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>

Phonegap camera.getPicture（）缺少文件扩展名和标题数据

2 个答案: