Javascript 我可以通过XDomainRequest正确读取二进制数据吗？

编辑： 考虑到dennmat的建议，我使用

image（）

，将图像获取脚本简化为几行：

虽然这适用于Chrome和Firefox，但并不适用于IE9。下面链接中提到的解决方案似乎不适用于这种情况

IE9是否支持

Image（）

中的cors功能

---

我遇到了一个小问题

上面的图像实际上是一个包含标准png头的文件，后面是255个字节，从255到0（两次）。这个想法是为了了解InternetExplorer9如何通过AJAX请求处理二进制数据的接收

所以，我的问题是：我注意到当我在客户端上收到大于127的字节时，该值默认为253。有没有办法让IE读取具有正确值的扩展字节

需要注意的几件事：

1） 我们不使用任何类型的javascript框架。这是一项要求，我们只需要使用基本的javascript就可以做到这一点

2） 这个实验的目的是为了制作一个干净的方法来获得一个图像，这样我就可以把它放在画布上而不会污染它。有时这些映像来自外部托管的映像服务器，有时则来自我们无法控制的另一个主机

以下是我的测试脚本：

var request;
window.onload = function(){
    request = new XMLHttpRequest();
    if (window.XDomainRequest) {
        request = new XDomainRequest();
    }
    request.open('GET', 
        "http://www.shangalulu.com/get_resource_no_64.php?url=
         http://www.shangalulu.com/resources/images/sample/sample.png", true);
    request.onload  = function()
    {
        var binary, i, response;
        response = this.responseText;
        binary = "";
        if (this.contentType)
        {
            document.documentElement.appendChild(
                document.createTextNode(this.contentType));
            document.documentElement.appendChild(document.createElement('br'));
        }
        for( i=0; i < response.length; i++) {
            binary = "Line " + (i) + " --> " + ((response.charCodeAt(i)) & 0xff);
            document.documentElement.appendChild(document.createTextNode(binary));
            document.documentElement.appendChild(document.createElement('br'));
        }
    };
    request.send();
}

var请求；
window.onload=函数（）{
请求=新的XMLHttpRequest（）；
if（window.XDomainRequest）{
请求=新的XDomainRequest（）；
}
request.open（'GET'，
"http://www.shangalulu.com/get_resource_no_64.php?url=
http://www.shangalulu.com/resources/images/sample/sample.png“，对）；
request.onload=函数（）
{
var二进制，i，响应；
response=this.responseText；
二进制=”；
if（this.contentType）
{
document.documentElement.appendChild(
document.createTextNode（this.contentType））；
document.documentElement.appendChild（document.createElement（'br'））；
}
对于（i=0；i”+（（response.charCodeAt（i））&0xff）；
document.documentElement.appendChild（document.createTextNode（二进制））；
document.documentElement.appendChild（document.createElement（'br'））；
}
};
request.send（）；
}

不幸的是，使用crossOrigin属性设置为“Anonymous”的Image（）对象仍然会导致IE在将图像绘制到画布上时污染画布

为了解决这个问题，我做了以下工作：

我在服务器上创建了一个接受url的小脚本，然后使用给定的url调用file_get_contents（）。为了防止这个脚本被误用，我添加了一个“可接受”域列表，并定制了结果URL，使其仅指向它应该请求的内容。这使我能够在本地发出请求，这意味着我可以使用XMLHttpRequest对象而不是XDomainRequest对象。（这也为支持IE7打开了大门）

由于IE不支持atob，因此我使用了以下base64转换脚本： 我注释掉了

input=Base64.\u utf8\u encode（输入）

在

encode

函数中，因为数据是二进制的，而不是实际的字符串

这个解决方案有点像“最后手段”。它可以工作，但是速度非常慢（需要3分钟而不是通常的3秒）。最糟糕的是需要添加一个计时器，让IE有机会正确呈现自定义对话框及其进度条。计时器强制IE暂停片刻，然后再发出下一个请求。这是。。。考虑到我将其设置为异步发出请求，这相当奇怪

---

这是我目前能想到的最好的了。如果其他人有更好的方法完成这项工作，请随时发布您的答案。

Image（）有什么问题。？请参阅示例：在不使用浏览器内置实用程序的情况下，试图在JS中操作、管理和绘制图像数据，实际上是自讨苦吃。这将非常缓慢，您可能会遇到无数问题，尤其是当您进入透明度和旋转时。上次查看Image（）时，我一定错过了交叉原点支持。谢谢你的提示！至于让我大吃一惊，我不完全确定你所说的浏览器内置实用程序是什么意思。这里我只想在画布上渲染一个简单的图像，然后发送到服务器。啊，是的，现在我想起来了。Image（）的问题在于，当我第一次开始使用这个脚本时，浏览器中缺少cors支持。当时，唯一有效的解决办法似乎是一种邪恶的黑魔法。这涉及到从ajax请求中的responseText字段获取二进制数据。

var request;
window.onload = function(){
    request = new XMLHttpRequest();
    if (window.XDomainRequest) {
        request = new XDomainRequest();
    }
    request.open('GET', 
        "http://www.shangalulu.com/get_resource_no_64.php?url=
         http://www.shangalulu.com/resources/images/sample/sample.png", true);
    request.onload  = function()
    {
        var binary, i, response;
        response = this.responseText;
        binary = "";
        if (this.contentType)
        {
            document.documentElement.appendChild(
                document.createTextNode(this.contentType));
            document.documentElement.appendChild(document.createElement('br'));
        }
        for( i=0; i < response.length; i++) {
            binary = "Line " + (i) + " --> " + ((response.charCodeAt(i)) & 0xff);
            document.documentElement.appendChild(document.createTextNode(binary));
            document.documentElement.appendChild(document.createElement('br'));
        }
    };
    request.send();
}