我正在使用此
$.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');
但现在,我如何将其添加到图像标记中并将其显示为图像。注意:我不希望将数据作为base64编码返回,它必须是二进制的。我很好,在客户端将二进制文件转换为base64。
当我将其传递给readAsDataURL
时,会显示TypeError
例外。
由于
修改
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,
开始,但不显示图像......
答案 0 :(得分:5)
jQuery Ajax不支持二进制响应(okay now it does),有一个技巧使用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();
答案 1 :(得分:2)
Musa的答案是一个很好的解决方案,我在角度上实现了类似的功能并且工作得很好,当你定义responseType = 'blob'
你的响应不再是一个字符串时,它将是一个blob类型的对象。
我只需要在header对象中添加一个额外的参数(不确定它是否在jQuery中是必要的)。 headers: {'Content-Type': "image/png"}
,
我的完整请求对象:
var request = {
url: "_/get_image_/get",
method:"GET",
headers: {'Content-Type': "image/png"},
responseType: 'blob'
}
答案 2 :(得分:1)
尝试使用new Blob(data, {type : 'image/png'})
代替new Blob([data])
这将确保blob的媒体类型为png。
答案 3 :(得分:0)
无论你使用什么框架/库:
File
)时,请求BLOB类型src
设置为该网址代码:
export function fileToImageBase64Url(file: File): string {
const blob = new Blob([file], { type: 'image/png' });
return URL.createObjectURL(blob);
}
如果在某些时候您认为图片不再有用,请不要忘记清理它:URL.revokeObjectURL(yourUrl)