javascript - 我可以通过 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。以下链接中提到的解决方案似乎不适用于这种情况。 Uncaught Error: SECURITY_ERR: DOM Exception 18 when I try to set a cookie

IE9 是否支持 Image() 中的 cors 特性？

---

我遇到了一个小问题。

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

上图实际上是一个包含标准 png header 的文件，后跟从 255 到 0(两次)的 255 个字节。这个想法是为了了解 Internet Explorer 9 如何处理通过 AJAX 请求接收二进制数据。

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

需要注意的几点:

1) 我们不使用任何类型的 javascript 框架。要求我们仅使用基本的 javascript 来执行此操作。

2) 这个实验的目的是用一种干净的方式来获取图像，这样我就可以把它放在 Canvas 上而不会弄脏它。有时这些图像来 self 们外部托管的图像服务器，有时它会来 self 们无法控制的另一台主机。

下面附上我的测试脚本:

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();
}

Answer 1

不幸的是，在将 crossOrigin 属性设置为“Anonymous”的情况下使用 Image() 对象仍然会导致 IE 在将图像绘制到 Canvas 上后污染 Canvas 。

为了解决这个问题，我做了以下事情:

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

2. 由于 IE 不支持 atob，我使用了在这里找到的 base64 转换脚本:How can you encode a string to Base64 in JavaScript?我在 encode 函数中注释掉了 input = Base64._utf8_encode(input);，因为数据是二进制的，而不是实际的字符串。

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

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