Question

我使用Cordova，Ionic，Angular和Sqlite编写Web应用程序作为客户端数据库。

我正在制作一个模块，用于拍摄照片并尝试从拍摄的图像中获取并发送Base64编码（数据URL）。
我的图片返回的URL如下：blob:http%3A//localhost%3A4400/705ade8b-5330-4aad-8afa-516d559211a2，此网址是本地的，因此刷新浏览器时，网址会消失。我只想从该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());
        }
      };
    }
  ]);;

制表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获取图片的数据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) {
    ...
});

P.S。：如果你的应用程序已经有<image>，你可以编辑该功能，直接接收图像对象而不是URL。

从本地网址获取数据网址

1 个答案: