我能否通过XDomainRequest正确读取二进制数据？

Question

编辑： 考虑到dennmat的建议，我使用Image()将我的图像获取脚本简化为几行：

window.onload = function(){
    var img;
    capture_canvas          = document.createElement('canvas');
    capture_canvas.width    = 1000;
    capture_canvas.height   = 1000;
    document.documentElement.appendChild(capture_canvas);
    img = new Image();
    img.crossOrigin = "Anonymous";        
    img.src = "http://www.shangalulu.com/get_resource_no_64.php?url=http://www.shangalulu.com/users/1196739508/post/41-1330377498/41-1330377498_thumb.jpg";
    img.onload = function() {
        var context, canvas_img;
        context = capture_canvas.getContext('2d');
        context.drawImage(img, 0, 0, 255, 255);
        canvas_img = context.getImageData(0, 0, capture_canvas.width, capture_canvas.height);
    }
}

虽然这适用于Chrome和Firefox，但不适用于IE9。以下链接中提到的解决方案似乎不适用于此情况。 尝试设置cookie时出现Uncaught Error: SECURITY_ERR: DOM Exception 18

Image()中的cors功能是否受IE9支持？

---

我遇到了一个小小的问题。

http://www.shangalulu.com/get_resource_no_64.php?url=http://www.shangalulu.com/resources/images/sample/sample.png

上面的图片实际上是一个文件，包含标准png头部，接着是255个字节，从255递减到0（两次）。这个想法是看看Internet Explorer 9如何处理通过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();
}

- Axle

---

Image() 函数有什么问题吗？请参考以下示例：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images - dennmat

如果不使用浏览器内置的工具，试图在JS中操纵、管理和绘制图像数据，你基本上会自掘坟墓。这将非常缓慢，而且一旦涉及透明度和旋转等问题，你可能会遇到无数问题。 - dennmat

我上次查看Image()时可能错过了跨域支持。感谢您的提示！至于“开枪打脚”，我不太确定您所说的浏览器内置工具是什么意思。我在这里想做的就是将一个简单的图像渲染到画布上，然后将其发送到服务器。 - Axle

啊，我记起来了。Image()的问题在于当我第一次尝试使用这个脚本时，浏览器缺乏cors支持。当时唯一看起来可行的解决方案是某种邪恶的黑魔法。这涉及到从我的ajax请求中的responseText字段获取二进制数据。 - Axle

Answer 1

很不幸地，即使将crossOrigin属性设置为“Anonymous”，使用Image()对象仍会导致IE在将图像绘制到画布上后使其变脏。为了解决这个问题，我做了以下几步：

1. 我在我的服务器上创建了一个小脚本，该脚本接受一个url，然后使用给定的url调用file_get_contents()。为了防止滥用这个脚本，我添加了一个“可接受”的域名列表，并将结果URL定制为只指向应请求的内容。这让我可以在本地进行请求，这意味着我可以使用XMLHttpRequest对象而不是XDomainRequest对象。(这也为支持IE7打开了大门)。

2. 由于IE不支持atob，我使用了在此处找到的base64转换脚本：如何使用JavaScript对字符串进行Base64编码？我在encode函数中注释掉了，因为数据是二进制的，而不是字符字符串。

这种解决方案有点“最后的手段”。它可以工作，但是非常慢(需要3分钟，而不是通常的3秒)。最糟糕的部分是需要添加计时器来给IE一个机会正确地渲染自定义对话框和进度条。计时器强制IE在进行下一个请求之前暂停一会儿。这...相当奇怪，因为我将其设置为异步请求。

这是我现在能想到的最好的办法。如果有人有更好的方法来完成这项工作，请随时发布您的答案。

- Axle