我可以获取跨网站的数据< img />标记为blob？ [英] Can I get the data of a cross-site <img/> tag as a blob?

问题描述

我试图保存一些网页链接到脱机存储的图像。我在Chrome上使用Firefox上的IndexedDB和FileSystem API。我的代码实际上是一个扩展，所以在Firefox上我运行Greasemonkey，并在Chrome上作为内容脚本运行。我希望这是自动化的。

当我检索图像文件时，我遇到了问题。我正在使用标题为 Storing图像和文件在IndexedDB中，但我得到一个错误：我试图下载的图像位于不同的子域，并且XHR失败。

  XMLHttpRequest无法加载http：//...uxgk.JPG。 Access-Control-Allow-Origin不允许Origin http://subdomain.domain.com。 
  

在Firefox上，我可以使用 GM_xmlhttpRequest 和它可以工作（当我处于同源URL时，代码可以在两个浏览器上运行），但我仍然需要解决Chrome的问题，其中还有其他限制（即需要与主机页面上的框架进行交互）要求我将我的脚本合并到页面中，并放弃我的权限。

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

帮助，任何人？

---

编辑：实际上真正归结为如何以我想要的方式使用jQuery，而不会丢失Chrome上的内容脚本权限。如果是这样，我也可以在Chrome上使用跨网站XHR 。虽然我宁愿得到一个不依赖于此的解决方案。具体而言，因为如果我将脚本合并到网页中，并且不要求它是内容脚本/用户脚本，我希望使用此解决方案。

---

编辑：我意识到这个问题只是关于跨站点请求。现在我有三种方法之一获取图像blob，在@ chris-sobolewski的帮助下，这些 问题和其他一些页面（如这），这可以在这个小提琴中看到。但是，所有这些都需要特殊权限才能运行。唉，因为我在带有框架的页面上运行，因为 a已知的Chrome 缺陷，我无法访问这些框架。所以我可以通过使用 all_frames：true 来将脚本加载到每个框架中，但是我真的希望避免在每次加载帧时加载脚本。否则，根据这篇文章，我需要转义沙箱，但它会回到特权。

由于您使用的是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）; 
返回blob.replace（/ ^ data：image\ /（png | jpg）; base64，/，）; 
} 
  

这将返回base64编码图像。

从这里开始你只需要调用函数就可以了：

  image = document.getElementById（' foo'）
 imgBlob = base64img（image）; 
  

然后继续存储 imgBlob 。

编辑：由于文件大小是一个问题，您还可以将数据存储为canvasPixelArray，它的宽度*高度* 4个字节大小。

  imageArray = context.getImageData（0，0，context.canvas.width，canvasContext.canvas.height）; 
  

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

I am trying to save a couple of images that are linked to by a webpage to offline storage. I'm using IndexedDB on Firefox and FileSystem API on Chrome. My code is actually an extension, so on Firefox I'm running on Greasemonkey, and on Chrome as a content script. I want this to be automated.

I am running into problem when I retrieve the image file. I'm using example code from the article titled Storing images and files in IndexedDB, but I get an error: the images I'm trying to download are on a different subdomain and the XHR fails.

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

On Firefox I could probably use GM_xmlhttpRequest and it'd work (the code works on both browsers when I'm in same-origin URLs), but I still need to solve the problem for Chrome, in which other constraints (namely, needing to interact with frames on the host page) require me to incorporate my script in the page and forfeit my privileges.

So it comes back to that I'm trying to figure out a way to save images that are linked to (and may appear in) the page to IndexedDB and/or FileSystem API. I either need to realize how to solve the cross-origin problem in Chrome (and if it requires privileges, then I need to fix the way I'm interacting with jQuery) or some kind of reverse createObjectURL. At the end of the day I need a blob (File object, as far as I understand) to put into the IndexedDB (Firefox) or to write to FileSystem API (Chrome)

Help, anyone?

---

Edit: my question may actually really come down to how I can use jQuery the way I want without losing my content script privileges on Chrome. If I do, I could use cross-origin XHRs on Chrome as well. Though I'd much rather get a solution that doesn't rely on that. Specifically since I'd like this solution if I get the script incorporated into the webpage, and not require it to be a content script/userscript.

---

Edit: I realized that the question is only about cross-site requests. Right now I have one of three ways to get the image blob, with the help of @chris-sobolewski, these questions and some other pages (like this), which can be seen in this fiddle. However, all of these require special privileges in order to run. Alas, since I'm running on a page with frames, because of a known defect in Chrome, I can't access the frames. So I can load a script into each frame by using all_frames: true, but I really want to avoid loading the script with every frame load. Otherwise, according to this article, I need to escape the sandbox, but then it comes back to privileges.

解决方案

Since you are running on Chrome and Firefox, your answer is fortunately, yes (kind of).

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,/, "");
}

this will return the base64 encoded image.

from there you just call the function something along these lines:

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

Then go ahead and store imgBlob.

Edit: As file size is a concern, you can also store the data as a canvasPixelArray, which is width*height*4 bytes in size.

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

Then JSONify the array and save that?

这篇关于我可以获取跨网站的数据< img />标记为blob？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！