从本地 url 获取数据 URL

Question

我正在编写一个使用 Cordova、Ionic、Angular 和 Sqlite 作为客户端数据库的 Web 应用程序。

我正在制作一个用于拍照的模块，并尝试从拍摄的图像中获取和发送 Base64 编码（数据 URL）。
我的图片返回的 URL 是这样的：blob:http%3A//localhost%3A4400/705ade8b-5330-4aad-8afa-516d559211a2，这个 url 是本地的，因此刷新浏览器时，url 会死掉。我只想从该 url 引用的图像中提取 Base64 编码，因此有了该编码，我可以将其插入到我的 Sqlite 数据库中（我使用的是 Cordova 的相机插件）。

我想从<img>（即（本地/临时））标签中获取 src 并提取 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());
        }
      };
    }
  ]);;

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>

Answer 1

您可以使用 Canvas 元素的toDataURL API 来获取图像的 Data URI (base64)，如以下 sn-p：

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) {
    ...
});

P.S.：如果您的应用中已经有 <image>，您可以编辑函数以直接接收图像对象而不是 URL。