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

【问题标题】：Extract binary or base64 from <img>从 <img> 中提取二进制或 base64
【发布时间】：2013-07-09 10:10:21
【问题描述】：

在 jQuery / javascript 中显示 img 时，有什么方法可以访问完整的二进制表示（或其 base64 编码）？比如

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

Javascript

$('#myImage).getBuffer()

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

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

【问题讨论】：

标签： jquery canvas same-origin-policy

【解决方案1】：

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

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

如果图像参数是 HTMLImageElement 或来源与入口脚本不同的 HTMLVideoElement origin，或者如果它是一个 HTMLCanvasElement，其位图的 origin-clean flag 为 false，或者如果它是 CanvasRenderingContext2D 对象，其暂存位图的 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 />，默认状态是anonymous - 它只是一个请求并由服务器接受。
使用您自己的服务器作为代理从源服务器获取图像并将其提供给同一来源的客户端（例如http://mysite/getImage.cgi|.aspx|.php|..?src=other-site/img）。
修改浏览器...等:-P

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

【讨论】：

感谢您的帮助，我想 [1] 是我们要走的路。

【解决方案2】：

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

【讨论】：

这受同源策略的约束，使用画布
谢谢，但如问题所示，我正在寻找没有服务器端 CORS 的跨域解决方案