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

【问题标题】：Get image data from (blob) from the img tag (opposite method to URL.createObjectURL)从img标签（与URL.createObjectURL相反的方法）获取图像数据（blob）
【发布时间】：2014-04-14 19:38:18
【问题描述】：

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

【问题讨论】：

标签： javascript html image dom fileapi

【解决方案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...
});

【讨论】：

由于 CORS 政策，这不适用于不同的来源请求

【解决方案2】：

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

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

【讨论】：