使用jQuery的ajax方法作为blob检索图像

Question

我最近问了另一个（相关的）问题，这导致了后续问题：

通读jQuery.ajax（）文档（http://api.jquery.com/jQuery.ajax/），似乎可接受的dataTypes列表不包含图像。

我正在尝试使用jQuery.get（如果需要的话，也可以使用jQuery.ajax）来检索图像，将此图像存储在Blob中，然后在POST请求中将其上传到另一台服务器。当前，由于数据类型不匹配，我的图像最终被损坏（字节大小不匹配等）。

执行此操作的代码如下（它在coffeescript中，但应该不难解析）：

handler = (data,status) ->
  fd = new FormData
  fd.append("file", new Blob([data], { "type" : "image/png" }))
  jQuery.ajax {
    url: target_url,
    data: fd,
    processData: false,
    contentType: "multipart/form-data",
    type: "POST",
    complete: (xhr,status) ->
      console.log xhr.status
      console.log xhr.statusCode
      console.log xhr.responseText

  }
jQuery.get(image_source_url, null, handler)

我如何检索此图像作为blob？

Answer 1

您不能使用jQuery ajax来执行此操作，而是使用本机XMLHttpRequest来执行此操作。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        //this.response is what you're looking for
        handler(this.response);
        console.log(this.response, typeof this.response);
        var img = document.getElementById('img');
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response);
    }
}
xhr.open('GET', 'http://jsfiddle.net/img/logo.png');
xhr.responseType = 'blob';
xhr.send();

编辑

因此，回顾这个​​主题，似乎确实有可能使用jQuery 3做到这一点。

jQuery.ajax({

        url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',

        cache:false,

        xhr:function(){// Seems like the only way to get access to the xhr object

            var xhr = new XMLHttpRequest();

            xhr.responseType= 'blob'

            return xhr;

        },

        success: function(data){

            var img = document.getElementById('img');

            var url = window.URL || window.webkitURL;

            img.src = url.createObjectURL(data);

        },

        error:function(){



        }

    });


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<img id="img" width=100%>

要么

使用xhrFields设置responseType

    jQuery.ajax({

            url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',

            cache:false,

            xhrFields:{

                responseType: 'blob'

            },

            success: function(data){

                var img = document.getElementById('img');

                var url = window.URL || window.webkitURL;

                img.src = url.createObjectURL(data);

            },

            error:function(){



            }

        });


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

    <img id="img" width=100%>