如何将图像转换为 url？

Posted 2023-03-22

【中文标题】如何将图像转换为 url？

【英文标题】：How can a convert an image into a url?

【发布时间】：2021-07-27 10:11:33

【问题描述】：

我正在创建一个网络应用程序，在其中我从用户那里收到一个图像文件，然后必须将其存储在我的 Firebase 实时数据库中并以 html 显示。由于实时数据库不支持文件，我必须为我的图像创建一个 Url。

我想要的 URL 不是像 this 这样的下载链接，它是我从 Firebase Cloud Storage Url 创建工具中获得的，而是我需要一个像 this 这样的可见链接，我可以将它添加到我的 HTML 标签上的 src像这样：

<img src="The Url">

我曾尝试使用 Firebase 云存储，但在上传图像文件时，图像会作为应用程序/八进制流而不是图像上传。当我运行 geturl() 函数时，它给了我this link，这会导致一个下载页面，因此我不能将它指向标签的 src 属性。

文件上传代码是这样的：

var file_from_usr = document.getElementById('file_input')
var storageRef = firebase.storage().ref();
var thisRef = storageRef.child(filename);
thisRef.put(file_from_usr).then((snapshot) => 
    console.log('Uploaded a blob or file!');
);

【问题讨论】：

将你的图片二进制数据转换成base64字符串

我该怎么做？

【参考方案1】：

这对我来说似乎是一个元数据问题。您的代码无法推断文件的类型，因此默认情况下，它将假定它是 Application/octet-stream 内容类型。

如果由于某种原因您的文件名没有扩展名或其他一些问题，那么您可以手动指定该内容类型元数据。

var metadata = 
  contentType: 'image/jpeg',
;

// Upload the file and metadata
var uploadTask = storageRef.child('images/mountains.jpg').put(file, metadata);

https://firebase.google.com/docs/storage/web/upload-files

或者，尝试为您的文件名添加扩展名。例如。文件名=“myimage.jpg”

【讨论】：

使用此文件作为图像上传，但我认为它已损坏。 This 是我得到的链接

尝试上传其他图片。此外，将图像转换为 base64 编码（文本格式不是上传文件的有效方式。

【参考方案2】：

使用 fetch api 下载图像数据并将其转换为可以设置为图像 src 属性的 url； Added the code snippet for the same below。 这段代码是为了下载图片并跳过上传任务，看起来就像上面帖子中提到的那样。

getImageURL(url) 
  const options = 
    method: 'GET',
    mode: 'no-cors',
    cache: 'default'
  ;
  return fetch(url, options).then((response) => 
    return response.blob();
  ).then(blob => 
    return URL.createObjectURL(blob);
  );


document.getElementById("myImg").src = getImageURL("https://your_url_path");

【讨论】：

对不起，我无法理解你想说什么。我是 javascript 的新手。如何使用 fetch api 下载图像数据并将其转换为 url？

你需要通过传递url来调用getImageURL()方法，它会以blob形式获取响应并转换为url。

哦，好的。现在我懂了。我会尽力回应

这给了我这个错误：从原点 '127.0.0.1:5500' 获取在 'firebasestorage.googleapis.com/v0/b/…' 的访问权限已被 CORS 策略阻止：没有 'Access-Control-Allow-Origin' 标头出现在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

你需要禁用 cors 才能在本地机器上工作