使用 jQuery 的 ajax 方法将图像检索为 blob
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17657184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery's ajax method to retrieve images as a blob
提问by jabalsad
I recently asked another (related) question, which lead to this follow up question: Submitting data instead of a file for an input form
我最近问了另一个（相关的）问题，这导致了这个后续问题： 提交数据而不是输入表单的文件
Reading through the jQuery.ajax() documentation (http://api.jquery.com/jQuery.ajax/), it seems the list of accepted dataTypes doesn't include images.
阅读 jQuery.ajax() 文档（http://api.jquery.com/jQuery.ajax/），似乎接受的数据类型列表不包括图像。
I'm trying to retrieve an image using jQuery.get (or jQuery.ajax if I have to), store this image in a Blob and upload it to another server in a POST request. Currently, it looks like due to the mismatch in datatypes, my images end up being corrupt (size in bytes mismatch, etc.).
我正在尝试使用 jQuery.get（或 jQuery.ajax，如果必须的话）检索图像，将此图像存储在 Blob 中并在 POST 请求中将其上传到另一台服务器。目前，看起来由于数据类型不匹配，我的图像最终被损坏（以字节为单位的大小不匹配等）。
The code to perform this is as follows (it is in coffeescript but shouldn't be difficult to parse):
执行此操作的代码如下（它是在 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)
How can I retrieve this image as a blob instead?
如何将该图像作为 blob 检索？
回答by Musa
You can't do this with jQuery ajax, but with native XMLHttpRequest.
使用 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();
EDIT
编辑
So revisiting this topic, it seems it is indeed possible to do this with jQuery 3
所以重新讨论这个话题，似乎确实可以用 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%>or
或者
use xhrFields to set the responseType
使用 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%>回答by Alberto
If you need to handle error messagesusing jQuery.AJAXyou will need to modify the xhrfunctionso the responseTypeis not being modified when an error happens.
如果您需要使用jQuery.AJAX处理错误消息，您将需要修改该函数，以便在发生错误时不会修改该函数。xhrresponseType
So you will have to modify the responseTypeto "blob" only if it is a successful call:
因此，仅当调用成功时，您才必须将其修改responseType为“ blob”：
$.ajax({
...
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 2) {
if (xhr.status == 200) {
xhr.responseType = "blob";
} else {
xhr.responseType = "text";
}
}
};
return xhr;
},
...
error: function(xhr, textStatus, errorThrown) {
// Here you are able now to access to the property "responseText"
// as you have the type set to "text" instead of "blob".
console.error(xhr.responseText);
},
success: function(data) {
console.log(data); // Here is "blob" type
}
});
Note
笔记
If you debug and place a breakpoint at the point right after setting the xhr.responseTypeto "blob" you can note that if you try to get the value for responseTextyou will get the following message:
如果您在设置xhr.responseType为“ blob”后立即调试并在该点放置断点，您会注意到，如果您尝试获取该值，responseText您将收到以下消息：
The value is only accessible if the object's 'responseType' is '' or 'text' (was 'blob').
仅当对象的“responseType”为“”或“text”（为“blob”）时才可访问该值。
回答by mxl
A big thank you to @Musa and here is a neat function that converts the data to a base64 string. This may come handy to you when handling a binary file (pdf, png, jpeg, docx, ...) file in a WebView that gets the binary file but you need to transfer the file's data safely into your app.
非常感谢@Musa，这是一个将数据转换为 base64 字符串的简洁函数。在获取二进制文件的 WebView 中处理二进制文件（pdf、png、jpeg、docx 等）文件时，这可能对您很方便，但您需要将文件的数据安全地传输到您的应用程序中。
// runs a get/post on url with post variables, where:
// url ... your url
// post ... {'key1':'value1', 'key2':'value2', ...}
// set to null if you need a GET instead of POST req
// done ... function(t) called when request returns
function getFile(url, post, done)
{
var postEnc, method;
if (post == null)
{
postEnc = '';
method = 'GET';
}
else
{
method = 'POST';
postEnc = new FormData();
for(var i in post)
postEnc.append(i, post[i]);
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200)
{
var res = this.response;
var reader = new window.FileReader();
reader.readAsDataURL(res);
reader.onloadend = function() { done(reader.result.split('base64,')[1]); }
}
}
xhr.open(method, url);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('fname=Henry&lname=Ford');
xhr.responseType = 'blob';
xhr.send(postEnc);
}
