如何将png二进制数据放入img标签中并将其显示为图像？

我正在用这个

        $.ajax({
            type: "GET",
            url: 'template/bump1/purse.png',
            datatype:"image/png",
            success: function (data) {


                var reader = new FileReader();

                reader.onload = function (e) {
                  var img = document.getElementById("CaptchaImg");
                  img.src = e.target.result;
                };
                reader.readAsDataURL(data);


                //$('#CaptchaImg').attr('src', data);
            }
         });

下载图像，它以二进制形式出现，如下所示

node.js 将其返回为

                        WriteHeaderMode('image/png', res, 200);
                        res.end(data, 'binary');

但现在，我如何将其放入图像标签并将其显示为图像。注：我do not想要以 Base64 编码返回数据，它必须是二进制的。不过，我可以在客户端将二进制文件转换为 base64。

当我将它传递给readAsDataURL， 它说TypeError例外。

Thanks

EDIT

                var img = document.getElementById("CaptchaImg");

                  var reader = new FileReader();

                  reader.onload = function(e) {
                      //img.src = e.target.result;
                      $("body").html(e.target.result);
                    };

                  reader.readAsDataURL(new Blob([data]));

这似乎将其转换为 base64 编码，其开头为data:application/octet-stream;base64,但不显示图像...

jQuery Ajax 不支持二进制响应（好吧，现在可以了 https://stackoverflow.com/questions/17657184/using-jquerys-ajax-method-to-retrieve-images-as-a-blob/17682424#17682424），有一个技巧，使用 overrideMimeType('text/plain; charset=x-user-defined') 将每个字节作为响应字符串中的字符返回，然后循环响应以创建数据的字节数组。

然而，对于裸露的 XMLHttpRequest，这可以通过使用 responseType 属性轻松完成。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        var img = document.getElementById("CaptchaImg");
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response);
    }
}
xhr.open('GET', 'template/bump1/purse.png');
xhr.responseType = 'blob';
xhr.send();