将base64图像发送到Firebase Storage phonegap

时间:2016-07-24 09:49:05

标签: javascript cordova firebase firebase-storage

我在将base64图像从phonegap(ios)发送到firebase存储时遇到问题。主要问题是firebase存储只接受BLOB或File作为附件。

这是我的相机功能代码。科尔多瓦-插件相机

function GetCamera(){
navigator.camera.getPicture( cameraSuccess, cameraError, {quality :50,
    destinationType: Camera.DestinationType.DATA_URL,
    encodingType: Camera.EncodingType.JPEG,
    saveToPhotoAlbum: true});}

将base 64转换为blob的功能

function b64toblob(b64_data, content_type) {
    content_type = content_type || '';
    var slice_size = 512;

    var byte_characters = atob(b64_data);
    var byte_arrays = [];

    for(var offset = 0; offset < byte_characters.length; offset += slice_size) {
        var slice = byte_characters.slice(offset, offset + slice_size);

        var byte_numbers = new Array(slice.length);
        for(var i = 0; i < slice.length; i++) {
            byte_numbers[i] = slice.charCodeAt(i);
        }

        var byte_array = new Uint8Array(byte_numbers);

        byte_arrays.push(byte_array);
    }

    var blob = new Blob(byte_arrays, {type: content_type});
    return blob;};

相机成功功能。请注意,imageblob是一个全局变量

function cameraSuccess(imageData){
document.getElementById('Attachment1').innerHTML = "Attachment: True";
var image = imageData;
imageblob = b64toblob(image,"image/jpeg");}

将blob放入firebase存储

try{
var storageRef = storage.ref().child('fire');
var uploadTask = storageRef.put(imageblob);
uploadTask.on('state_changed',null, null, function(){
var downloadURL = uploadTask.snapshot.downloadURL;
console.log("downloadURL :"+downloadURL);
});

我尝试过每一件事,但它不起作用。真的需要你的帮助..我没有想法

1 个答案:

答案 0 :(得分:1)

Cordova相机插件不会返回文件对象。这是插件的问题。 但它返回有关图像的所有细节。通过使用它,您可以创建一个blob或文件对象。

Reference for creating blob from file url

var getFileBlob = function (url, cb) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "blob";
    xhr.addEventListener('load', function() {
        cb(xhr.response);
    });
    xhr.send();
};

var blobToFile = function (blob, name) {
    blob.lastModifiedDate = new Date();
    blob.name = name;
    return blob;
};

var getFileObject = function(filePathOrUrl, cb) {
   getFileBlob(filePathOrUrl, function (blob) {
      cb(blobToFile(blob, 'test.jpg')); // Second argument is name of the image
   });
};

调用get file blob的函数

getFileObject('img/test.jpg', function (fileObject) { // First argument is path of the file
   console.log(fileObject);
}); 

在相机成功功能中尝试此操作。

function cameraSuccess(imageData){
  document.getElementById('Attachment1').innerHTML = "Attachment: True";
  getFileObject(imageData.nativeURL, function(fileObject) {
            console.log(fileObject);
            var imgName = fileObject.name;
            var metadata = { contentType: fileObject.type };
            var uploadFile = storageRef.child("images/" + imgName).put(fileObject, metadata);

            uploadFile.on(firebase.storage.TaskEvent.STATE_CHANGED, function(snapshot) {
                var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                console.log(progress);
            }, function(error) {
                console.log(error);
            }, function() {
                var imgFirebaseURL = uploadFile.snapshot.downloadURL;
                console.log(imgFirebaseURL);
            });
        });
     }