Javascript 我可以获得跨站点的数据吗<；img/>；标记为一个斑点？

我正在尝试将网页链接到的两幅图像保存到脱机存储中。我在Firefox上使用IndexedDB，在Chrome上使用文件系统API。我的代码实际上是一个扩展，所以我在Firefox上运行Greasemonkey，在Chrome上运行内容脚本。我希望这是自动化的

检索图像文件时遇到问题。我正在使用标题为的文章中的示例代码，但我得到一个错误：我试图下载的图像位于不同的子域上，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和/或文件系统API。我要么需要了解如何解决Chrome中的跨源问题（如果它需要特权，那么我需要修复与jQuery交互的方式），要么采取某种相反的方式。在一天结束时，我需要一个blob（

文件

对象，据我所知）放入IndexedDB（Firefox）或写入文件系统API（Chrome）

有人帮忙吗

---

编辑：我的问题实际上可以归结为如何以我想要的方式使用jQuery，而不丢失我在Chrome上的内容脚本权限。如果我这样做了，也一样。尽管我更希望得到一个不依赖于此的解决方案。特别是因为如果我将脚本合并到网页中，并且不要求它是内容脚本/用户脚本，我希望使用此解决方案

---

---

编辑：我意识到这个问题只是关于跨站点的请求。现在，在@chris sobolewski和其他一些页面（如）的帮助下，我有三种获取图像斑点的方法之一，可以在中看到。但是，所有这些都需要特殊权限才能运行。唉，因为我在一个有框架的页面上运行，所以我无法访问框架。因此，我可以使用

all_frames:true

将脚本加载到每个帧中，但我确实希望避免在每次加载帧时加载脚本。否则，我需要逃离沙箱，但它又回到了特权上。

由于您运行的是Chrome和Firefox，幸运的是，您的答案是肯定的（有点）

这将返回base64编码的图像

从这里，您只需按照以下方式调用函数：

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

然后继续并存储

imgBlob

编辑：考虑到文件大小，您还可以将数据存储为canvasPixelArray，其大小为宽度*高度*4字节

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

---

然后对数组进行JSONify并保存？

这会立即使我的数据库膨胀。这就是为什么我想按原样保存这些文件（除非我可以动态地将它们转换为JPG；不过不用说这不是我所希望的）。仔细想想，这就是为什么我不喜欢XHR解决方案的原因——如果用户碰巧看到了这些图片，我没有理由强制下载它们。我不确定“原样”是什么意思？如果你想在数据库中存储图像，你必须用一种或另一种格式，并且你必须把数据放在某个地方。如果你找到了一种不用数据显示图像的方法，你可以做任何你想要的工作。我的意思是你的解决方案给了我base-64 PNG数据，它比原始的JPG二进制数据大得多。我想保存JPG二进制数据。答案实际上可能只是简单地使用toDataUrl（'image/jpeg'）！它似乎起作用了。对于40Kb的jpeg文件，png base64字符串的长度为460Kb（假设我们存储的是UTF-8），这意味着png的长度约为340Kb。太大了。然而，用jpeg替换，我得到了一个67Kb字节长的JPEGBase64字符串。我留下这个问题，希望找到一个不会重新渲染和编码图像的解决方案。否则，答案是肯定的。更新：canvas.toDataURL（）遵守同源策略（），因此我不能在我的案例中使用它，尽管如果我让FF和Chrome在这种情况下放松，它可能会很好地工作。对于跨源代码的内容，您是否尝试过将权限设置为“”？我根本不明白你的jquery有什么问题，你需要再解释一下……你是用内容脚本清单的js参数将它注入到内容脚本中吗<代码>“js”：[“jquery.js”，“myscript.js”]好的，所以将

jquery.js

添加到

js

数组中，它被加载了，但另一个问题出现了：我正在使用框架，现在我面临着这里提到的bug（），我能找到的唯一解决方案是走出沙箱（）

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