我能以blob的形式获得跨站点<img/>标记的数据吗？
我试图保存几张图片，这些图片是通过网页链接到离线存储的。我在火狐上使用IndexedDB，在Chrome上使用FileSystem API。我的代码实际上是一个扩展，所以在Firefox上，我运行在Greasemonkey上，在Chrome上作为内容脚本运行。我希望这是自动化的。
当检索图像文件时，我遇到了问题。我正在使用题为在IndexedDB中存储图像和文件的文章中的示例代码，但我得到了一个错误:我试图下载的图像位于不同的子域中，XHR失败。
XMLHttpRequest cannot load http://...uxgk.JPG. Origin http://subdomain.domain.com is not allowed by Access-Control-Allow-Origin.在火狐上，我可能会使用GM_xmlhttpRequest，它可以工作(当我使用相同的原点URL时，代码在两个浏览器上都能工作)，但我仍然需要解决Chrome的问题，在这个问题中，其他约束(即需要与主页上的框架交互)要求我在页面中合并我的脚本，并丧失我的特权。
因此，回到我正在试图找到一种方法来保存链接到IndexedDB和/或FileSystem API的页面(并且可能出现在)的图像。我要么需要意识到如何解决Chrome中的跨源问题(如果它需要特权，那么我需要修复与jQuery交互的方式)或某种反向createObjectURL。最后，我需要一个blob (据我所知，File对象)放入IndexedDB (火狐)或写入FileSystem API (Chrome)。
有人帮忙吗？
编辑:我的问题可能真的归结于我如何在不失去Chrome上的内容脚本特权的情况下以我想要的方式使用jQuery。如果是的话，我可以在Chrome上使用异源XHR。也是。虽然我更愿意得到一个不依赖于此的解决方案。特别是，如果我将脚本合并到网页中，并且不要求它是一个内容脚本/用户脚本，我想要这个解决方案。
编辑:我意识到这个问题只是关于跨站点的请求。现在，我有三种方法获得图像blob，在@chris、这些 问题和其他一些页面(如这)的帮助下，可以在这把小提琴中看到。但是，所有这些都需要特殊特权才能运行。唉，因为我在一个有框架的页面上运行，因为有了铬中已知的缺陷，我无法访问这些帧。因此，我可以使用all_frames: true将脚本加载到每个帧中，但我确实希望避免在每次加载框架时加载脚本。否则，根据这篇文章，我需要摆脱沙箱，但它会返回到特权。
回答 1
Stack Overflow用户
发布于 2012-03-07 18:53:07
因为你在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，其宽度*高度*大小为4字节。
imageArray = context.getImageData( 0, 0 ,context.canvas.width,canvasContext.canvas.height );然后JSONify数组并保存它？
https://stackoverflow.com/questions/9612229
复制
腾讯云开发者
