javascript - Can I get the data of a cross-site <img/> tag as a blob? -

i trying save couple of images linked webpage offline storage. i'm using indexeddb on firefox , filesystem api on chrome. code extension, on firefox i'm running on greasemonkey, , on chrome content script. want automated.

i running problem when retrieve image file. i'm using example code article titled storing images , files in indexeddb, error: images i'm trying download on different subdomain , xhr fails.

xmlhttprequest cannot load http://...uxgk.jpg. origin http://subdomain.domain.com not allowed access-control-allow-origin. 

on firefox use gm_xmlhttprequest , it'd work (the code works on both browsers when i'm in same-origin urls), still need solve problem chrome, in other constraints (namely, needing interact frames on host page) require me incorporate script in page , forfeit privileges.

so comes i'm trying figure out way save images linked (and may appear in) page indexeddb and/or filesystem api. either need realize how solve cross-origin problem in chrome (and if requires privileges, need fix way i'm interacting jquery) or kind of reverse createobjecturl. @ end of day need blob (file object, far understand) put indexeddb (firefox) or write filesystem api (chrome)

help, anyone?

---

edit: question may come down how can use jquery way want without losing content script privileges on chrome. if do, i use cross-origin xhrs on chrome well. though i'd rather solution doesn't rely on that. since i'd solution if script incorporated webpage, , not require content script/userscript.

---

edit: realized question only cross-site requests. right have 1 of 3 ways image blob, of @chris-sobolewski, these questions , other pages (like this), can seen in this fiddle. however, of these require special privileges in order run. alas, since i'm running on page frames, because of a known defect in chrome, can't access frames. can load script each frame using all_frames: true, want avoid loading script every frame load. otherwise, according article, need escape sandbox, comes privileges.

since running on chrome , firefox, answer 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 return base64 encoded image.

from there call function along these lines:

image = document.getelementbyid('foo') imgblob = base64img(image); 

then go ahead , store imgblob.

edit: file size concern, can store data canvaspixelarray, width*height*4 bytes in size.

imagearray = context.getimagedata( 0, 0 ,context.canvas.width,canvascontext.canvas.height ); 

then jsonify array , save that?