javascript - 我可以将跨站点 <img/> 标记的数据作为 blob 获取吗？

Question

我正在尝试将网页链接到的几张图片保存到离线存储中。我在 Firefox 上使用 IndexedDB，在 Chrome 上使用 FileSystem API。我的代码实际上是一个扩展，所以在 Firefox 上我在 Greasemonkey 上运行，在 Chrome 上作为内容脚本运行。我希望这是自动化的。

我在检索图像文件时遇到问题。我正在使用标题为 Storing images and files in IndexedDB 的文章中的示例代码，但出现错误:我尝试下载的图像位于不同的子域中，XHR 失败。

XMLHttpRequest cannot load http://...uxgk.JPG. Origin http://subdomain.domain.com is not allowed by Access-Control-Allow-Origin.

在 Firefox 上我可能会使用 GM_xmlhttpRequest 并且它可以工作(当我在同源 URL 中时代码在两个浏览器上工作)，但我仍然需要解决 Chrome 的问题，其中其他约束(即需要与主机页面上的框架交互)要求我将我的脚本合并到页面中并放弃我的特权。

所以它又回到了我试图找出一种方法来将链接到(并且可能出现在)页面中的图像保存到 IndexedDB 和/或 FileSystem API。我要么需要意识到如何解决 Chrome 中的跨源问题(如果它需要特权，那么我需要修复我与 jQuery 交互的方式)或某种反向 createObjectURL .在一天结束时，我需要一个 blob(据我所知，File 对象)放入 IndexedDB (Firefox) 或写入 FileSystem API (Chrome)

有人帮忙吗？

---

编辑:我的问题实际上可能真正归结为如何以我想要的方式使用 jQuery 而不会失去我在 Chrome 上的内容脚本权限。如果我这样做，I could use cross-origin XHRs on Chrome以及。虽然我更愿意得到一个不依赖于它的解决方案。特别是因为如果我将脚本合并到网页中并且不要求它是内容脚本/用户脚本，我会喜欢这个解决方案。

---

编辑:我意识到问题是仅关于跨站点请求。现在，在@chris-sobolewski 的帮助下，我有三种方法之一来获取图像 blob，these questions和一些其他页面(如 this )，可以在 this fiddle 中看到.但是，所有这些都需要特殊权限才能运行。 las，由于 a known defect in Chrome，我在带有框架的页面上运行，我无法访问框架。因此，我可以使用 all_frames: true 将脚本加载到每个帧中，但我真的想避免在每次加载帧时都加载脚本。否则，according to this article ，我需要逃离沙箱，但随后又回到了特权。

Answer 1

由于您在 Chrome 和 Firefox 上运行，幸运的是您的答案是肯定的(有点)。

function base64img(i){
    var canvas = document.createElement('canvas');
    canvas.width = i.width;
    canvas.height = i.height;
    var context = canvas.getContext("2d");
    context.drawImage(i, 0, 0);
    var blob = canvas.toDataURL("image/png");
    return blob.replace(/^data:image\/(png|jpg);base64,/, "");
}

这将返回 base64 编码的图像。

从那里你只需按照这些行调用函数:

image = document.getElementById('foo')
imgBlob = base64img(image);

然后继续存储imgBlob。

编辑:由于文件大小是一个问题，您还可以将数据存储为 canvasPixelArray，大小为 width*height*4 字节。

imageArray = context.getImageData( 0, 0 ,context.canvas.width,canvasContext.canvas.height );

然后对数组进行 JSON 化并保存？