Javascript 将base64编码图像保存到Firebase存储

使用firebase 3.0.x，是否可以将base64编码的图像保存到新的firebase存储服务

---

在上传图像之前，我使用canvas在浏览器中调整图像大小，并将其输出为base64 jpeg。我知道存储api可以接受BLOB，但我当前的项目需要IE9支持。

如果使用

canvas.toBlob（）

您将获得需要传递到Firebase存储中的

字节[]

快速示例：

function save() {
    var canvas = document.getElementById("canvas");
    canvas.toBlob(blob => {
      var storage = firebase.app().storage().ref();
      var name = id + "/" + (new Date()).getTime() + ".png";
      var f = storage.child("drawings/" + name);
      var task = f.put(blob);
      task.on('state_changed', function(snapshot) {
      }, function(error) {
        console.error("Unable to save image.");
        console.error(error);
      }, function() {
        var url = task.snapshot.downloadURL;
        console.log("Saved to " + url);

        var db = firebase.database();
        var chats = db.ref().child("chats");
        chats.child(id).child("drawingURL").set(url);
      });
    });
  };

---

否则，您必须自己转换base64，例如使用。

这里有两个值，我用来帮助您获得

上的支持。toBlob（）

它的性能较差，但是，它完成了任务

此方法接受base64字符串、内容类型

（即：image/png）

以及使用

atob（）构建blob时的回调

下面是将信息添加到firebase存储时的外观

$fileService.image_link_to_b64(facebook_info.photoURL + '?width=512&height=512', 'image/png', function(b64) {
     $fileService.b64_to_blob(b64, 'image/png', function(blob) {
        $fileService.upload_user_photo(blob, 'image/png', function(url) {
            // Firebase storage download url here
        }
     }
  }

如果您想上传用户照片，只需上传到firebase存储：

var upload_user_photo = function(data, blob, callback) {
        var upload_task = user_photo_reference.child('user_photo').put(data);
        upload_task.on('state_changed', function(snapshot) {

        }, function(error) {
            alert('error: ', error);
        }, function() {
            callback(upload_task.snapshot.downloadURL);
        });
    };]

有关IE9，请参阅此polyfill:
Firebase SDK的最新版本支持base64映像上载。只需使用Firebase存储中的
putString
方法即可


一个小警告是，有时您会有一个带有不必要空格的base64字符串。例如，我发现cordova Camera插件返回的base64带有不必要的空格。存储SDK将无法上传此内容，因为JavaScript无法执行其本机的
atob
功能，这是Firebase JS在引擎盖下所做的。您必须去掉空白-请参见
是的，现在可以了。您应该使用名为
putString
的Firebase存储新方法。你可以阅读说明书

因此，Firebase规范指出，现在有两种方法来存储Base64字符串和Base64url字符串：

// Base64 formatted string
var message = '5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
ref.putString(message, 'base64').then(function(snapshot) {
  console.log('Uploaded a base64 string!');
});

// Base64url formatted string
var message = '5b6p5Y-344GX44G-44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
ref.putString(message, 'base64url').then(function(snapshot) {
  console.log('Uploaded a base64url string!');
})

根据我的经验，使用
putString（message，'base64url'）
不断返回有关格式错误的Base64字符串代码的错误：“存储/无效格式”，消息：“Firebase存储：字符串与格式'Base64'不匹配：找到无效字符”。解决方法是切断字符串
数据的开头：image/jpeg；base64，
并改用第一个方法
putString（消息'base64'）
。然后它就起作用了
 只需使用putString函数，而无需将BASE64转换为blob

firebase.storage().ref('/your/path/here').child('file_name')
.putString(your_base64_image, ‘base64’, {contentType:’image/jpg’});

确保将元数据{contentType:'image/jpg'}作为第三个参数传递给函数putString（可选），以便以图像格式检索数据

或者简单地说：

uploadTask = firebase.storage().ref('/your/path/here').child('file_name').putString(image, 'base64', {contentType:'image/jpg'});
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
  function(snapshot) {
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case firebase.storage.TaskState.PAUSED: // or 'paused'
        console.log('Upload is paused');
        break;
      case firebase.storage.TaskState.RUNNING: // or 'running'
        console.log('Upload is running');
        break;
    }
  }, function(error) {
    console.log(error);
}, function() {
  // Upload completed successfully, now we can get the download URL
  var downloadURL = uploadTask.snapshot.downloadURL;
});

然后，您可以使用下载URL保存到firebase.database（）和/或作为src放入
标记。
此解决方案适用于我使用谷歌云存储API的情况。

但它也应该通过使用ref-put方法替换file.save来与Firebase one配合使用

const file = storage.file(file_path_in_gs)
const contents = new Uint8Array(Buffer.from(base64ImgStr, 'base64'))
  file.save(contents,
    {
      contentType: img_type,
      metadata: {
        metadata: {
          contentType: img_type,
          firebaseStorageDownloadTokens: uuid()
        }
      }
    }
    , () => { })

我希望我可以使用.toBlob，但Safari或IEB根本不支持它。您也可以手动将b64转换为blob，请参见我的答案。我通过addin:let file=image.split（'，'）[1]storeRef（file，'base64'，{contentType:'image/png'）解决了这个问题//仅获取图像数据从何处获取第一个对象“ref”？这个对象是什么？在您从哪里获得第一个对象“firebase”中提供了一个对我有效的解决方案？这个对象是什么？我应该在哪里使用putString方法？firebase管理员没有它，但是你如何获得这个的“ref”？我为此奋斗了很长时间
uploadTask = firebase.storage().ref('/your/path/here').child('file_name').putString(image, 'base64', {contentType:'image/jpg'});
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
  function(snapshot) {
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case firebase.storage.TaskState.PAUSED: // or 'paused'
        console.log('Upload is paused');
        break;
      case firebase.storage.TaskState.RUNNING: // or 'running'
        console.log('Upload is running');
        break;
    }
  }, function(error) {
    console.log(error);
}, function() {
  // Upload completed successfully, now we can get the download URL
  var downloadURL = uploadTask.snapshot.downloadURL;
});

const file = storage.file(file_path_in_gs)
const contents = new Uint8Array(Buffer.from(base64ImgStr, 'base64'))
  file.save(contents,
    {
      contentType: img_type,
      metadata: {
        metadata: {
          contentType: img_type,
          firebaseStorageDownloadTokens: uuid()
        }
      }
    }
    , () => { })