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

编辑：考虑到denmat的建议，我已经设法使用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。下面链接中提到的解决方案似乎不适用于这种情况。未捕获错误：SECURITY_ERR:DOM异常18，当我尝试设置cookie 时

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

我遇到了一个小问题。

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

上面的图片实际上是一个包含标准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();
}

不幸的是，使用crossOrigin属性设置为"Anonymous"的Image（）对象仍然会导致IE在绘制图像后污染画布。

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

我在服务器上创建了一个接受url的小脚本，然后使用给它的url调用file_get_contents（）。为了防止滥用这个脚本，我添加了一个"可接受"域的列表，并定制了生成的url，使其只指向它应该请求的内容。这使我可以在本地发出请求，这意味着我可以使用XMLHttpRequest对象而不是XDomainRequest对象。（这也为支持IE7打开了大门）。
由于IE不支持atob，我使用了这里的base64转换脚本：如何在JavaScript中将字符串编码为base64？我在encode函数中注释掉了input = Base64._utf8_encode(input);，因为数据是二进制的，而不是实际的字符串。

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

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

相关内容

最新更新

热门标签：