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

Question

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

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

原文由 Sebastian Sandqvist 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最新版本的 Firebase SDK 支持 base64 图片上传。只需使用来自 Firebase 存储的 putString 方法。

https://firebase.google.com/docs/reference/js/firebase.storage

一个小警告是，有时您会得到一个带有不必要空格的 base64 字符串。例如，我发现 cordova Camera 插件返回带有不必要空格的 base64。存储 SDK 将无法上传此文件，因为 JavaScript 无法执行它的原生 atob 功能 - Firebase JS 在幕后所做的事情。您必须去除空格 - 请参阅 DOM Exception 5 INVALID CHARACTER error on valid base64 image string in javascript

原文由 Anthony Chuinard 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您只需要使用 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;
});

然后，您可以使用 downloadURL 保存到 firebase.database() 和/或作为 src 放入 <img> 标签。

原文由 Niño Angelo Orlanes Lapura 发布，翻译遵循 CC BY-SA 3.0 许可协议