mercredi 17 février 2016

Get the Data URL from a local url

I'm programming a Web App with Cordova, Ionic, Angular and Sqlite as client database.

I'm doing a module for taking photos and trying to get and send the Base64 encode (Data URL) from the taken image. The URL that my image returns is like this: blob:http%3A//localhost%3A4400/705ade8b-5330-4aad-8afa-516d559211a2, this url is local, therefore when refreshing the browser, url dies. I just want to extract the Base64 encode from the image that is referenced by that url, so having that encode I will can INSERT it to my Sqlite database (I'm using the camera plugin from Cordova).

I was thinking to take the src from (that is the (local/temporal)) tag and extract the Base64 encode but I don't know how. Any help would be great, thank you.

The Code:

  app.js:

  .controller('cameraCtrl', function($scope, Camera) {

    $scope.takePhoto = function() {
      Camera.takePhoto().then(function(urlImage) {

        $scope.lastImage = urlImage;
        //console.log($scope.lastImage);            
      }, function(err) {
        console.err(err);
      }, {
        quality: 50,
        targetWidth: 50,
        targetHeight: 50,
        destinationType: Camera.DestinationType.DATA_URL,
        saveToPhotoAlbum: false
      });
    };
    $scope.savePhoto = function() {
      //This function should get the Base64 encode (Data URL) from the <img/> tag in tab-camera.html
      addImagenCamara(Camara.makeHashBase64ForId(), $scope.lastImage);
    };
    //makeHashBase64ForId is only for the _id field into database, this isn't the image
  });

service.js:

  .factory('Camera', ['$q',
    function($q) {
      return {
        takePhoto: function(options) {
          var q = $q.defer();
          navigator.camera.getPicture(function(result) {
            q.resolve(result);
          }, function(err) {
            q.reject(err);
          }, options);

          return q.promise;
        },
        makeHashBase64ForId: function() {
          var date = new Date();
          return btoa(date.getTime());
        }
      };
    }
  ]);;
tab-camera.html:

<ion-view view-title="Cámara">
  <ion-content>
    <button ng-click="takePhoto()" class="button button-block button-primary">Take photo!</button>
    <button ng-click="savePhoto()" class="button button-block button-primary">Save</button>
    <img src="{{lastImage}}" id="myImage" />//Here goes the (local/temporal) url indeed
  </ion-content>
</ion-view>

Aucun commentaire:

Enregistrer un commentaire