2 Replies Latest reply on May 8, 2016 7:28 PM by oluwafemiaremu Branched from an earlier discussion.

    image path when open doesn't display anything [after uploading base64 image]

    oluwafemiaremu Level 1

      [Mod note: branched from Phone gap Build  3.5.0 Issues ]

       

      I have moved above that stage now. Am working on an app that captures an image and sends to the backend as an encoded base64 strings which are uploaded successfully. The image getting to the python backend as a decoded base64 string displays the image path e.g image_1462390600_22.png. The problem is the image path when open doesn't display anything all it shows is a blank page. the code is below ,Can someone please help resolve this

       

       

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