如何使用 JS 将 blob 对象显示为图像

Posted 2023-02-18

【中文标题】如何使用 JS 将 blob 对象显示为图像

【英文标题】：How I display as image a blob object with JS

【发布时间】：2019-01-16 06:25:52

【问题描述】：

当我在控制台中登录时，我的函数返回一个 blob 对象：

Blob(623853) name: "profile.jpg", size: 623853, type: "image/jpeg"

我想用 javascript 向用户显示这张图片，我该怎么做？

【问题讨论】：

你大概可以在页面上创建一个img元素，并将src属性设为图片路径。那应该显示图像。但是你需要完整的路径，不确定'profile.jpg'是否足够。另请参阅此答案，因为它有更多详细信息：***.com/questions/7650587/…

我不知道图片的完整路径，图片是用js使用canvas创建的，并转换为blob

Using Javascript to Display Blob的可能重复

【参考方案1】：

您可以使用URL.createObjectURL生成一个blob URL并将其设置为图像源。

const blobUrl = URL.createObjectURL(blob) // blob is the Blob object
image.src = blobUrl // image is the image element from the DOM

【讨论】：

我得到：errorReporting：unhandledrejection：TypeError：无法在“URL”上执行“createObjectURL”：重载解析失败。

@YTG 传递给URL.createObjectURL 方法的参数应该是Blob、File 或MediaSource。你能分享你的代码吗？