js中ajax如何获取reponse中图片流
时间: 2024-03-10 12:45:13 浏览: 14
在JS中通过Ajax获取response中的图片流需要使用`XMLHttpRequest`对象以及`Blob`对象来处理。
1. 创建XMLHttpRequest对象:
```javascript
var xhr = new XMLHttpRequest();
```
2. 设置请求方式和请求地址:
```javascript
xhr.open("GET", "your_url", true);
```
3. 设置响应类型为`blob`:
```javascript
xhr.responseType = "blob";
```
4. 发送请求:
```javascript
xhr.send();
```
5. 在请求的回调函数中获取返回的图片流:
```javascript
xhr.onload = function () {
if (xhr.status === 200) {
var blob = xhr.response;
var img = document.createElement("img");
img.onload = function () {
// 在图片加载完成后,可以将其添加到DOM中
document.body.appendChild(img);
};
img.src = window.URL.createObjectURL(blob);
}
};
```
其中,`xhr.response`为返回的图片流,我们将其赋值给`Blob`对象。然后,通过`window.URL.createObjectURL`方法创建一个URL,将这个URL赋值给`img`标签的`src`属性即可在页面上显示图片。需要注意的是,一定要在图片加载完成后再将其添加到DOM中,否则可能会出现显示不正常的问题。