Question

我正在开发一个与rails API通信的Ionic App。我有用户，用户有图片。我已经能够关注如何允许用户从手机图像中本地抓取图像this guide。

这允许用户从手机中抓取图像

$ionicPlatform.ready(function() {
 $scope.getImageSaveContact = function() {
 // Image picker will load images according to these settings
  var options = {
    maximumImagesCount: 1,
    width: 800,
    height: 800,
    quality: 80
  };

  $cordovaImagePicker.getPictures(options).then(function (results) {
    // Loop through acquired images
    for (var i = 0; i < results.length; i++) {
      $scope.collection.selectedImage = results[i];   // We loading only one image so we can use it like this

      window.plugins.Base64.encodeFile($scope.collection.selectedImage, function(base64){  // Encode URI to Base64 needed for contacts plugin
        $scope.collection.selectedImage = base64;
      });
    }
    console.log("results");
    console.log(results);
  }, function(error) {
    console.log('Error: ' + JSON.stringify(error));
  });
 };
});

问题是，它没有运行（或似乎没有运行）编码文件的window.plugins.Base64.encodeFile行。现在，它只是图像文件而不是Base64编码的字符串。

在我从设备相机中抓取文件后，如何运行此功能？

我能够弄明白，答案在下面

Answer 1

来自旧项目https://github.com/aaronksaunders/firebaseStorageApp/blob/master/www/js/app.js#L132

的

  return $cordovaFile.readAsArrayBuffer(path, fileName)
    .then(function (success) {
      // success - get blob data
      var imageBlob = new Blob([success], { type: "image/jpeg" });
   })

Answer 2

添加此相机插件

cordova plugin add cordova-plugin-camera

默认情况下返回基础64中的图像..

$scope.choosePhoto = function () {
            $scope.myPopup.close();
            var options = {
                quality: 75,
                destinationType: Camera.DestinationType.DATA_URL,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                allowEdit: true,
                encodingType: Camera.EncodingType.JPEG,
                targetWidth: 300,
                targetHeight: 300,
                popoverOptions: CameraPopoverOptions,
                saveToPhotoAlbum: false
            };
            $cordovaCamera.getPicture(options).then(function (imageData) {
                $scope.imgURI = "data:image/jpeg;base64," + imageData;

            }, function (err) {
                // An error occured. Show a message to the user
            });
        }

可在此处找到更多详细信息 http://ngcordova.com/docs/plugins/camera/

希望这会有所帮助...

Answer 3

我能够通过将一堆东西拼凑在一起来解决这个问题，特别是在导轨方面。我们的想法是单击一个按钮来获取图像，从相机胶卷中选择一个，将该图像转换为base64字符串，然后将该图像发送到服务器。

我当前的堆栈是rails 4，ionic / angular v1。希望这有助于其他人。

角度控制器

function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      var reader = new FileReader();
      reader.onloadend = function() {
        callback(reader.result);
      }
      reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
  }

  $scope.grabImage = function () {
    var options = {
      maximumImagesCount: 1,
      width: 800,
      height: 800,
      quality: 80
    };

    $cordovaImagePicker.getPictures(options).then(function (results) {
      $scope.dataImg = results;

      return toDataUrl($scope.dataImg, function(base64Img) {
        $scope.base64 = base64Img;
        $state.go($state.current, {}, {reload: false});
      })
    }, function(error) {
      $scope.message = "Error: Failed to Attach Image";

      var alertPopup = $ionicPopup.alert({
        title: 'User Photos',
        templateUrl: 'templates/modals/success_or_error.html',
        scope: $scope
      });
    });
  }

rails controller

  def create
    image = Paperclip.io_adapters.for(params[:image_file])
    image.class.class_eval { attr_accessor :original_filename, :content_type }
    image.original_filename = "mu_#{@current_mobile_user.id}_#{@current_mobile_user.pictures.count}.jpg"
    image.content_type = "image/jpeg"
    @picture = @current_mobile_user.pictures.create(image: image, imageable_id: @current_mobile_user.id)

    if @picture.save
      render json: ['Picture Uploaded!'], status: :created
    else
      render json: [@picture.errors.full_messages.to_sentence], status: :unprocessable_entity
    end
  end

离子照片上传 - 文件到Base64字符串

3 个答案: