1

在 jQuery / javascript 中显示 img 时,有什么方法可以访问完整的二进制表示(或其 base64 编码)?如

<img id="myImage" src="http://someURL/someImage.png" />

Javascript

$('#myImage).getBuffer()

原因:我想将来自另一个来源的图像放在画布中并对其进行修改。将源直接放在画布中(参见this),我什么也得不到(Same-Origin-Policy 违规?)。AJAX 请求也有同样的问题。

我可以(并且已经做过)修改服务器以允许新的外部来源(CORS)。它可以工作,但这样的来源是一个动态的本地 IP,如果有一些纯粹的客户端会更好。

4

2 回答 2

2

没有一个。您不能在客户端做任何事情来覆盖同源策略(除非您破解浏览器或制作自己的浏览器以防止浏览器在画布上设置受污染的标志(或者更确切地说是来源清洁标志):-))。

只要源图像的来源!== 页面来源,标准要求浏览器设置画布污染,除非源服务器接受来自其他来源的使用。客户端没有解决方案来解决这个问题(出于“安全原因”)。

如果 image 参数是一个 HTMLImageElement 或 HTMLVideoElement,其来源与入口脚本的来源不同,或者它是一个位图的 origin-clean 标志为 false 的 HTMLCanvasElement,或者它是一个 CanvasRenderingContext2D 对象,其暂存位图的 origin-clean 标志为 false。

资料来源:WhatWG 4.8.11.2.9(最后一段)

如果是这样(4.8.11.2.16):

... 如果暂存位图的 origin-clean 标志设置为 false,它必须抛出 SecurityError 异常;...

你得到的选项是:

  1. 修改源服务器以提供Access-Control-Allow-Origin(最小)标头(就像您已经做过的那样),然后使用crossOrigin图像标签中的属性(<img src="other-site" crossOrigin />,默认状态是anonymous- 它只是一个请求,由服务器来接受它。
  2. 使用您自己的服务器作为代理从源服务器获取图像并将其提供给同一来源的客户端(例如http://mysite/getImage.cgi|.aspx|.php|..?src=other-site/img)。
  3. 修改浏览器...等:-P

您可以自己对图像进行低级解析,但无论如何您都需要通过 File API 将图像“上传”到客户端并从那里解析它,恕我直言(通过您自己的服务器充当代理)有点简单)。

于 2013-07-11T10:59:09.877 回答
0

您可以在此处查看以从图像https://gist.github.com/leotsem/960542获取二进制数据

于 2013-07-11T08:16:00.387 回答