Получить URL-адрес данных с локального url

Question

Я программирую веб-приложение с помощью Кордовой, Ионной, Угловой и Sqlite в качестве базы данных клиентов.

Я делаю модуль для фотографирования и пытаюсь получить и отправить код Base64 (URL-адрес данных) из полученного изображения.
URL-адрес, который возвращает мое изображение: blob:http%3A//localhost%3A4400/705ade8b-5330-4aad-8afa-516d559211a2, этот URL-адрес является локальным, поэтому при обновлении браузера URL-адрес умирает. Я просто хочу извлечь кодировку Base64 из изображения, на которое ссылается этот URL-адрес, поэтому, имея этот код, я могу ВСТАВИТЬ его в мою базу данных Sqlite (я использую плагин камеры из Кордовы).

Я думал взять src от <img> (то есть (локальный/временный)) тег и извлечь кодировку Base64, но я не знаю, как это сделать. Любая помощь будет отличной, спасибо.

Код:

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()); 
     } 
     }; 
    } 
    ]);; 

закладками 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> 

Answer 1

Вы можете использовать toDataURL API элемента Canvas для ob Тайны в URI данных (base64) образом, так как в этом фрагменте:

function getDataUri(url, cb) { 
    var img = new Image(); 
    img.onload = function() { 
     var canvas = document.createElement('canvas'); 
     canvas.width = this.naturalWidth; // or simply .width 
     canvas.height = this.naturalHeight; // or simply .height 
     canvas.getContext('2d').drawImage(this, 0, 0); 
     cb(canvas.toDataURL()); 
    }; 
    img.src = url; 
} 

// example of usage 
getDataUri('/test.png', function(dataUri) { 
    ... 
}); 

PS: если у вас уже есть <image> на вашем приложении вы можете изменить функцию таким образом, чтобы получить непосредственно объект изображения вместо URL.