如何使用 Javascript 和 XMLHttpRequest 加载二进制图像数据?

IT技术 javascript image xmlhttprequest
2021-01-28 03:06:20

我试图加载一个图像客户端,并对服务器返回的字节进行 base64 编码,以便将其传递以执行一些处理。IE 有 XMLHttpRequest 对象的 RequestBody 属性,但我似乎无法使用它,并且 RequestText 被截断。在 Firefox 中,RequestText 存在,但似乎已损坏。

3个回答

这是我如何做到的。

此技术在另一个 SO 问题的答案中提供,但它也与此处相关。

我不想对任何东西进行 base64 编码。我想通过 Javascript 在浏览器中下载和解析二进制文件,而不需要修改服务器来对它们进行特殊编码。我发现在 Firefox 中,通过强制响应的 mimetype overrideMimeType(),我可以使用XMLHttpRequest.responseText. 在 IE 上,它是不同的,因为:

  • responseText在 IE 上截断第一个零。对于二进制流,这是一个大问题。

  • 没有XMLHttpRequest.overrideMimeType(), 强制 IE 将二进制流视为文本。

  • 虽然有一个XMLHttpRequest.responseBody(仅限 IE!)专门设计用于二进制数据流,但令人抓狂的是该属性无法从 Javascript 中使用。

因此,需要将IE的responseBody属性转换成类似于responseTextFireFox的东西,使用mime类型的强制转换。这可以使用注入的 VBScript 实现。

要使其跨浏览器,您只需要在条件中打包特定于浏览器的逻辑。这是我使用的:

// one-time code
if(/msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent)) {
    var IEBinaryToArray_ByteStr_Script =
    "<!-- IEBinaryToArray_ByteStr -->\r\n"+
    "<script type='text/vbscript'>\r\n"+
    "Function IEBinaryToArray_ByteStr(Binary)\r\n"+
    "   IEBinaryToArray_ByteStr = CStr(Binary)\r\n"+
    "End Function\r\n"+
    "Function IEBinaryToArray_ByteStr_Last(Binary)\r\n"+
    "   Dim lastIndex\r\n"+
    "   lastIndex = LenB(Binary)\r\n"+
    "   if lastIndex mod 2 Then\r\n"+
    "       IEBinaryToArray_ByteStr_Last = Chr( AscB( MidB( Binary, lastIndex, 1 ) ) )\r\n"+
    "   Else\r\n"+
    "       IEBinaryToArray_ByteStr_Last = "+'""'+"\r\n"+
    "   End If\r\n"+
    "End Function\r\n"+
    "</script>\r\n";

    // inject VBScript
    document.write(IEBinaryToArray_ByteStr_Script);
}


// each time you make a request for a binary resource:
var req = (function() {
    if (window.XMLHttpRequest) {
        return new window.XMLHttpRequest();
    }
    else {
        try {
            return new ActiveXObject("MSXML2.XMLHTTP");
        }
        catch(ex) {
            return null;
        }
    }
})();

var fileContents = "";
var filesize = -1;
var readByteAt = function(i){
    return fileContents.charCodeAt(i) & 0xff;
};

req.open("GET", url, true);

if(/msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent)) {
    // IE-specific logic here
    // helper to convert from responseBody to a "responseText" like thing
    var convertResponseBodyToText = function (binary) {
        var byteMapping = {};
        for ( var i = 0; i < 256; i++ ) {
            for ( var j = 0; j < 256; j++ ) {
                byteMapping[ String.fromCharCode( i + j * 256 ) ] =
                    String.fromCharCode(i) + String.fromCharCode(j);
            }
        }
        var rawBytes = IEBinaryToArray_ByteStr(binary);
        var lastChr = IEBinaryToArray_ByteStr_Last(binary);
        return rawBytes.replace(/[\s\S]/g,
                                function( match ) { return byteMapping[match]; }) + lastChr;
    };

    req.setRequestHeader("Accept-Charset", "x-user-defined");
    req.onreadystatechange = function(event){
        if (req.readyState == 4) {
            if (req.status == 200) {
                fileContents = convertResponseBodyToText(req.responseBody);
                fileSize = fileContents.length-1;
                // invoke a callback here, if you like...
            }
            else{
                alert("download failed, status " + req.status);
            }
        }
    };
    req.send();

} else {
    // ff/Gecko/Webkit specific stuff here
    req.onreadystatechange = function(aEvt) {
        if (req.readyState == 4) { // completed
            if(req.status == 200){ // status == OK
                fileContents = binStream.req.responseText;
                filesize = fileContents.length;
                // invoke a callback here, if you like...
            }
            else {
                alert("download failed, status " + req.status);
            }
        }
    };
    // coerce response type
    req.overrideMimeType('text/plain; charset=x-user-defined');
    req.send(null);
}

...然后调用readByte(i)以获取二进制文件中第 i 个位置的字节

祝你好运。

归功于 Miskun的 VBScript 转换逻辑。

如果您使用的是 COTS,您总是可以设置一个中间网关,在其中发出请求并将其转换(在这种情况下为 base64 编码)在返回给客户端之前更可口。

我实际上试过这个;然而,图像是特定于用户会话的,我无法伪造软件以为服务器是同一个用户会话的一部分。
2021-04-08 03:06:20

您可以让服务器返回 base64 文本,而不是在客户端进行编码。

例如,(在 ASP.NET 中)可以对 /ImageAsBase64.ashx?file=/images/myimage.png 的请求进行编码以读取文件,对其进行 base64encode,并将其作为响应进行流式传输。

在 PHP 或其他任何东西中,它真的几乎是一样的。

不幸的是,在这种情况下这是行不通的——我需要一些 COTS 软件的数据,但它没有 base64 选项。
2021-04-12 03:06:20