从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

如果您不需要逐个字节的图像副本（例如，如果您不介意将jpg转换为png），那么您可以在{{1并使用<canvas>为它获取blob。

如果您需要将原始数据作为blob，或者图像是以不同的来源托管，那么您可以使用https://stackoverflow.com/a/21136980处的代码（对于同源请求，只需使用.toBlob() ）。

Answer 2

现在可以使用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...
});