从img标记(与URL.createObjectURL相反的方法）获取来自(blob）的图像数据

Get image data from (blob) from the img tag (opposite method to URL.createObjectURL)

本文关键字：获取 blob 数据 图像 方法 标记 img URL createObjectURL      更新时间：2023-09-26

在我的HTML代码中，我有以下IMG标记：

<img src="picture.png"  id="picture" />

我想在图像中创建Blob对象(https://developer.mozilla.org/en-US/docs/Web/API/Blob)（在FirefoxOS网络活动中进一步使用它）具有uri（"picture.png"）。我想我需要与URL.createObjectURL:相反的方法

https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL

Fetch API现在是合适的，如文档中所使用的：

Using_Fetch#Checking_that_the_Fetch_was_successful

https://developer.mozilla.org/en-US/docs/Web/API/Body/blob

简单地说：

fetch("picture.png")
.then(res => res.blob())
.then(blob => {
    // use blob...
});

如果您不需要图像的逐字节副本（例如，如果您不介意jpg转换为png），那么您可以在<canvas>上绘制图像，并使用.toBlob()为其获取blob。

如果需要将原始数据作为blob，或者图像位于不同的原点，则可以使用https://stackoverflow.com/a/21136980（对于同源请求，只需使用x.open('GET', 'picture.png');）。

相关文章：