将图像从Cordonic摄像头插件上的图像存储到Ionic [英] Store image to Firebase storage from cordova camera plugins on Ionic

问题描述

我已经在这个主题上发表了一些主题（例如：上传图像到Firebase存储从科尔多瓦应用程序），但没有找到我的答案...

我正在一个IONIC项目的实施ngCordova相机插件拍照并从图书馆获取图片。

因此，我将结果作为图像URI获得，并且希望将其上传到Firebase存储（作为文件或Blob）。
这是我的代码：

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $离子平台（function（）{

var options = {
quality：75，
destinationType：Camera.DestinationType.FILE_URI，
sourceType：Camera.PictureSourceType.CAMERA，
allowEdit：true，
encodingType：Camera.EncodingType.JPEG，
targetWidth：300，
targetHeight：300，
saveToPhotoAlbum：true e
};

$ cordovaCamera.getPicture（options）.then（function（imageURI）{
window.resolveLocalFileSystemURL（imageURI，function（fileEntry）{$ b $ fileEntry.file（function（file）{
var reader = new FileReader（）;
reader.onloadend = function（）{
//这个blob对象可以保存到firebase
var blob = new Blob（[new Uint8Array（this.result）]，{type：image / jpeg}）;

//创建存储ref
var ref = storageRef .child（图像/测试）;
//上传文件
uploadPhoto（blob，ref）;

};
reader.readAsArrayBuffer（file）;
}）;
}，函数（错误）{
console.log（error）
}）;
}）;

}）;

};

并在将其上传到Firebase之前将其转换为Blob。我得到了一个编码错误，告诉我提供给API的URI格式不正确，或者生成的数据URL超出了URL的URL长度限制。

我正在使用Cordova Mocks扩展程序运行Chrome浏览器。

欢迎任何帮助！
谢谢

解决方案

尝试更改...

 [new Uint8Array（this.result）] 
  

  [this.result] 
  

使用 $ cordovaFile

$ b

  var fileName = imageURI.replace（/^.* [\\\ / /] /，''）; 
 $ b $ cordovaFile.readAsArrayBuffer（cordova.file.tempDirectory，fileName）
 .then（function（success）{
 //成功 - 获取blob数据
 var imageBlob = new Blob（[success]，{type：image / jpeg}）; 
 
 //创建存储ref 
 var ref = storageRef.child（'images / test'） ; 
 //上传文件
 uploadPhoto（imageBlob，ref）; 
 
，function（error）{
 // error 
}）; 
  

而不是从代码中获取URI的路径，我假定以下...

  //在Android 
上修改图片路径if（$ ionicPlatform.is（android））{
 path = cordova.file.cacheDirectory 
} else {
 path = cordova.file.tempDirectory 
} 
  

随时解析获取目录的路径

I've red some topics on the subject (e.g: Uploading image to Firebase Storage from Cordova app) but didn't find my answer...

I'm working on a IONIC project with the implementation of the ngCordova camera plugin to take picture and get pic from the librairy.

So I got the result as a image URI and I want to upload it in Firebase storage (as file or Blob). Here is my code :

$scope.fromCamera = function() {
 $ionicPlatform.ready(function() {

  var options = {
    quality: 75, 
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType: Camera.PictureSourceType.CAMERA,
    allowEdit: true,
    encodingType: Camera.EncodingType.JPEG, 
    targetWidth: 300, 
    targetHeight: 300, 
    saveToPhotoAlbum: true e
  };

  $cordovaCamera.getPicture(options).then(function(imageURI) { 
    window.resolveLocalFileSystemURL(imageURI, function (fileEntry) {
      fileEntry.file(function (file) {
        var reader = new FileReader();
        reader.onloadend = function () {
          // This blob object can be saved to firebase
          var blob = new Blob([new Uint8Array(this.result)], { type: "image/jpeg" });                  

          // Create the storage ref
          var ref = storageRef.child('images/test');
          // Upload the file
          uploadPhoto(blob, ref);

        };
        reader.readAsArrayBuffer(file);
      });
    }, function (error) {
      console.log(error)
    });
  });

});

};

I read the file and convert it into a Blob before uploading it into firebase. And I got an 'Encoding error' telling me "A URI supplied to the API was malformed, or the resulting Data URL has exceeded the URL length limitations for Data URLs."

I'm running it an chrome browser with the Cordova Mocks extension.

Any help is welcome! Thanks

解决方案

try changing...

[new Uint8Array(this.result)]

to just this

[this.result]

alternate approach using $cordovaFile

var fileName = imageURI.replace(/^.*[\\\/]/, '');

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

      // Create the storage ref
      var ref = storageRef.child('images/test');
      // Upload the file
      uploadPhoto(imageBlob, ref);

  }, function (error) {
    // error
  });

Instead of getting the path from the URI, in the code, I assume the following...

  // modify the image path when on Android
  if ($ionicPlatform.is("android")) {
    path = cordova.file.cacheDirectory
  } else {
    path = cordova.file.tempDirectory
  }

feel free to parse the path to get the directory

这篇关于将图像从Cordonic摄像头插件上的图像存储到Ionic的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！