从img标签（与URL.createObjectURL相反的方法）获取图像数据（blob）

Question

在我的 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

Answer 1

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...
});

Answer 2

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

如果您需要 blob 形式的原始数据，或者图像托管在不同的源，则可以使用/sf/answers/1479588631/中的代码（对于同源请求，只需使用x.open('GET', 'picture.png');）。