如何使用Javascript将图像副本(位于URL)保存到Firebase Storage(网络)? [英] How to save a copy of an image (located at a URL) to Firebase Storage (web) using Javascript?

问题描述

我正在尝试创建图像的副本(位于url)，并将其保存到Firebase的存储设施中.我想存储实际的图像文件，而不仅仅是URL.如果我理解正确，我首先需要将url上的图像转换为blob或文件，然后将数据上传到Firebase存储.

I'm trying to create a copy of an image (which is located at a url), and save it to Firebase's storage facility. I want to store the actual image file and not just the url. If I understand correctly, I first need to convert the image at the url to a blob or file and then upload the data to the Firebase storage.

这是我目前使用Javascript的尝试:

This is my current attempt with Javascript:

function savePicture(){
    var url = ["http://carltonvet.com.au/sites/default/files/styles/large/public/images/article/cats.jpg"];
    var blobpic = new Blob(url, {type: 'file'}); 
    console.log(blobpic);

    var user = firebase.auth().currentUser;
        if (user != null) {
            var userid = user.uid; 

            var ref = firebase.storage().ref(userid + "profilePhoto");
            ref.put(blobpic).then(function(snapshot) {
                console.log('Picture is uploaded!');
                console.log(snapshot);

                var filePath = snapshot.metadata.fullPath;
                document.getElementById('picTestAddress').innerHTML = ""+filePath;
                document.getElementById('picTestImage').src = ""+filePath;
        });
        }else{
                console.log("Something went wrong, user is null.");
        }
}

我有两个这样的HTML标记:

I have two HTML tags like this:

<div id="picTestAddress"></div>
<img id="picTestImage" />

我很确定这只是保存网址，而不是物理图像.

I'm pretty sure this is only saving the url and not the physical image.

在"picTestAddress"中填充"" qAjnfi387DHhd389D9j3r/profilePhoto" ，并且控制台显示"picTestImage"的以下错误: GET file:///android_asset/www/qAjnfi387DHhd389D9j3r/profilePhoto net :: ERR_FILE_NOT_FOUND

The "picTestAddress" gets filled in with "qAjnfi387DHhd389D9j3r/profilePhoto", and the console shows the following error for "picTestImage": GET file:///android_asset/www/qAjnfi387DHhd389D9j3r/profilePhoto net::ERR_FILE_NOT_FOUND

我正在将Firebase用于Web和Cordova.而且我正在我的Android手机上测试该应用.

I'm using Firebase for Web and Cordova. And I'm testing the app on my android phone.

我知道该错误是因为它正在手机的本地文件系统上查找图像.这对我来说很有意义，因此我认为可以通过将应用程序的地址附加到 filePath 的开头来解决此问题(例如: document.getElementById('picTestImage').src ="https://firebasestorage.googleapis.com/v0/b/MY_APP.appspot.com/o/"+ filePath; ).

I understand that the error is because it's looking for the image on my phone's local file system. This makes sense to me, so I thought I could fix this by appending my app's address to the beginning of the filePath (eg: document.getElementById('picTestImage').src = "https://firebasestorage.googleapis.com/v0/b/MY_APP.appspot.com/o/"+filePath;).

要找到正确的路径，我在Firebase控制台中导航到文件的位置，并复制了下载URL"地址-但是，当我选中此地址(通过将其输入到我的网络浏览器中)时，它加载了包含该地址的白页一行文字，即原始网址:"

To find the correct path, I navigated to the file's location in the Firebase console and copied the "Download url" address - but when I checked this (by entering it into my web browser) it loaded a white page which contained one line of text, which was the original url: "http://carltonvet.com.au/sites/default/files/styles/large/public/images/article/cats.jpg"

因此，现在我想我已经将网址保存到了存储设备中，而不是实际的图像文件中了.

So now I think I've just saved the url to the storage instead of the actual image file.

我一直在关注Firebase文档，并且我认为上载部分工作正常，但是在使用Javascript将url转换为blob/文件时，我认为我失败了.

I've been following the Firebase docs, and I think I have the uploading part working correctly, but I think I'm failing when it comes to converting the url to the blob/file with Javascript.

我已经浏览了其他一些问题，例如这个问题: https://github.com/firebase/firepano ，但它说这现在是一个遗留示例，在Firebase的示例部分中似乎找不到更新的版本.

I've looked through some other questions, such as this one: How to store and view images on firebase? and was going to follow the example here: https://github.com/firebase/firepano but it says that it's now a legacy example and I can't seem to find an updated version in Firebase's samples section.

我们将非常感谢您提供任何有关此操作的建议或帮助.先感谢您！

Any advice or help with how to do this would be really appreciated. Thank you in advance!

推荐答案

看起来不错，尽管我也考虑使用承诺版本:

Looks good, though I'd also consider a promisified version:

function getBlob(url) {
  return new Promise(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function(event){
      var blob = xhr.response;
      resolve(blob);
    };
    xhr.onerror = reject();
    xhr.open('GET', url);
    xhr.send();
  }
}

function storageURLForPhoto(oldURL, newName) {
  getBlob(oldURL)
  .then(function(blob) {
    var picRef = firebase.storage().ref().child(newName);
    return picRef.put(blob)
  })
  .then(function(snapshot) {
    return snapshot.downloadURL;
  });
  .catch(function() {
    // handle any errors
  })
}

关于:)

这篇关于如何使用Javascript将图像副本(位于URL)保存到Firebase Storage(网络)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！