Question

正在处理一个捕获图像并作为已成功上传的编码base64字符串发送到后端的应用程序。作为解码的base64字符串到达python后端的图像显示图像路径，例如image_1462390600_22.png。问题是打开时的图像路径没有显示任何显示的内容都是空白页面。有人可以帮忙解决这个问题

<!DOCTYPE HTML>

<html>
    <head>

                <script type="text/javascript" charset="utf-8">

   var pictureSource;   // picture source
var destinationType; // sets the format of returned value

// Wait for device API libraries to load
//
document.addEventListener("deviceready",onDeviceReady,false);

// device APIs are available
//
function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
}

// Called when a photo is successfully retrieved
//
 //navigator.camera.getPicture(
            //uploadPhoto,
           // function(message) { alert('get picture failed'); },
           // {
             //   quality         : 50,
               // destinationType : navigator.camera.DestinationType.FILE_URI,
                //sourceType      : navigator.camera.PictureSourceType.PHOTOLIBRARY
           // }
      //  );


    function uploadPhoto(imageURI) {
        var options = new FileUploadOptions();
        options.fileKey="file";
        options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
        options.mimeType="text/plain";

        var params = {};
        params.value1 = "test";
        params.value2 = "param";

        options.params = params;

        var ft = new FileTransfer();

         ft.upload(imageData, encodeURI("phonegapserver/index.php"), win, fail, options);
    }

    function win(r) {
        console.log("Code = " + r.responseCode);
        console.log("Response = " + r.response);
        console.log("Sent = " + r.bytesSent);
    }

    function fail(error) {
        alert("An error has occurred: Code = " + error.code);
        console.log("upload error source " + error.source);
        console.log("upload error target " + error.target);
    }


    //write down ajax code to send base64 string

    // Ajax file






function onPhotoDataSuccess(imageData) {
  // Uncomment to view the base64-encoded image data
   console.log(imageData);
  window.alert(imageData); 
  // Get image handle
  //
  var smallImage = document.getElementById('smallImage');

  // Unhide image elements
  //
  smallImage.style.display = 'block';

  // Show the captured photo
  // The inline CSS rules are used to resize the image
  //
  smallImage.src = imageData;
 // window.plugins.Base64.encodeFile(imageData, function(base64)

 var base64 = window.btoa(imageData);
 window.alert(base64);


 $.ajax({
                    url: "http://websys3.stern.nyu.edu:7004/upload/",
                    type: "POST",

                    data :{ image: base64},
                    crossDomain: true,
                    success: function(response){
                        alert ("GOOD");

                        if (response['error'] != null){
                             alert("Please check image");
                             return;
                        }
                        alert("Hello" + response['name']);


                    }
                });


}

// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
  // Uncomment to view the image file URI
   console.log(imageURI);

  // Get image handle
  //
  var largeImage = document.getElementById('largeImage');

  // Unhide image elements
  //
  largeImage.style.display = 'block';

  // Show the captured photo
  // The inline CSS rules are used to resize the image
  //
  largeImage.src = imageURI;
  upLoadImage(imageURI);


}

// A button will call this function
//
function capturePhoto() {
  // Take picture using device camera and retrieve image as base64-encoded string
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
    destinationType: destinationType.DATA_URL, correctOrientation : true, targetWidth: 512, targetHeight: 512,// saveToPhotoAlbum : true, sourceType: Camera.PictureSourceType.CAMERA,

})
}

    // A button will call this function
    //
    function capturePhotoEdit() {
      // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.FILE_URL, saveToPhotoAlbum : true,});
    }

    // A button will call this function
    //
    function getPhoto(source) {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: navigator.camera.PictureSourceType.Phonegapsever/image });
    }



    // Called if something bad happens.
    //
    function onFail(message) {
      alert('Failed because: ' + message);
    }

    </script>
  </head>
  <body>
   <a data-role="button" onClick="navigator.camera.getPicture();">Upload</a>
    <button onclick="capturePhoto();">Capture Photo</button> <br>
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
            </section>

        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/jquery.scrolly.min.js"></script>
            <script src="assets/js/skel.min.js"></script>
            <script src="assets/js/util.js"></script>
            <!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
            <script src="assets/js/main.js"></script>
             <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>

    </body>
</html>

（phonegap）上传到烧瓶后端的捕获图像不显示

0 个答案: