Question

在jQuery / javascript中显示img时，有没有办法访问完整的二进制表示（或其base64编码）？如

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

的Javascript

$('#myImage).getBuffer()

原因：我想将另一个来源的图像放入画布并进行修改。将源直接放在画布中（参见this），我什么都得不到（Same-Origin-Policy违规？）。 AJAX请求也有同样的问题。

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

Answer 1

没有一个。您无法在客户端执行任何操作来覆盖同源策略（除非您破解浏览器或自行阻止浏览器设置污点标记（或者更确切地说）画布上的origin-clean旗帜:-)）。

只要源图像的来源！==页面原点，标准要求浏览器设置画布污染，除非源服务器接受来自其他来源的使用。客户端没有解决方案（出于“安全原因”）。

如果图像参数是HTMLImageElement，则它不是origin-clean HTMLVideoElement，其来源与条目脚本不同 origin，或者它是一个HTMLCanvasElement，其位图的origin-clean flag为false，或者它是CanvasRenderingContext2D对象的 scratch bitmap的origin-clean标志是false。

来源：WhatWG 4.8.11.2.9 (last paragraph)

如果是这样（4.8.11.2.16）：

...如果临时位图的origin-clean标志设置为false，则为必须抛出SecurityError异常; ...

您获得的选项是：

修改源服务器以提供Access-Control-Allow-Origin（最小）标头（如您所做），然后使用图片标记中的crossOrigin属性（<img src="other-site" crossOrigin />，默认状态为{{1 - 它只是一个请求，直到服务器接受它。
使用您自己的服务器作为代理从源服务器获取图像，并将其提供给同一来源的客户端（例如anonymous）。
修改浏览器...等:-P

您可以自己低级解析图像，但是您需要通过File API将图像“上传”到客户端并从那里解析它会更加不方便恕我直言（通过您自己的服务器代理）作为代理更简单一点。）

Answer 2

您可以在此处查看图像https://gist.github.com/leotsem/960542

中的二进制数据

从<img/>中提取二进制或base64

2 个答案: