title: Get the Data URL from a local url
body: <p>I'm programming a Web App with Cordova, Ionic, Angular and Sqlite as client database. </p>
  
  <p>I'm doing a module for taking photos and trying to get and send the Base64 encode (Data URL) from the taken image.<br>
  The URL that my image returns is like this: <code>blob:http%3A//localhost%3A4400/705ade8b-5330-4aad-8afa-516d559211a2</code>, 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). </p>
  
  <p>I was thinking to take the src from <code>&lt;img&gt;</code> (that is the (local/temporal)) tag and extract the Base64 encode but I don't know how. Any help would be great, thank you.</p>
  
  <p>The Code:</p>
  
  <p>app.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>  .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 &lt;img/&gt; tag in tab-camera.html
        addImagenCamara(Camara.makeHashBase64ForId(), $scope.lastImage);
      };
      //makeHashBase64ForId is only for the _id field into database, this isn't the image
    });
  </code></pre>
  
  <p>service.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>  .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());
          }
        };
      }
    ]);;
  </code></pre>
  
  <p>tab-camera.html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ion-view view-title="Cámara"&gt;
    &lt;ion-content&gt;
      &lt;button ng-click="takePhoto()" class="button button-block button-primary"&gt;Take photo!&lt;/button&gt;
      &lt;button ng-click="savePhoto()" class="button button-block button-primary"&gt;Save&lt;/button&gt;
      &lt;img src="{{lastImage}}" id="myImage" /&gt;//Here goes the (local/temporal) url indeed
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>