从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 web活动中进一步使用它），它的uri（“picture.png”）。我想我需要的方法与URL.createObjectURL相反：

Answer 1

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

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

Answer 2

Fetch API现在适用于文档中使用的：

只是：

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