文章目录
- js 图片 文件流前端处理
- 使用 fetch API
- 使用 XMLHttpRequest
- js 对后端返回的图片处理和显示
- 1. 使用fetch获取图片数据并转换为`Blob`对象
- 2. 使用canvas进行复杂图像处理
- 3. 使用WebGL进行高性能图像处理（适用于更复杂和大规模的处理）
- 框架应用之buffer处理
js 图片 文件流前端处理
在JavaScript中，要对后端返回的图片或文件进行流式转化显示，可以通过 XMLHttpRequest （或者更现代的 fetch API）获取数据，然后使用 Blob 对象和 URL.createObjectURL 来创建一个可用于显示的URL。以下是分别使用 fetch 和 XMLHttpRequest 的示例：
使用 fetch API
- 获取图片或文件数据：
- 使用
fetch发起请求获取数据。 - 将响应数据转换为
Blob对象。 - 使用
URL.createObjectURL创建一个URL，用于在页面上显示图片或提供文件下载链接。
- 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Streaming Image/File</title>
</head>
<body>
<img id="image-display" alt="Loaded Image">
<a id="file-download" download="downloaded_file">Download File</a>
<script>
const imageDisplay = document.getElementById('image-display');
const fileDownload = document.getElementById('file-download');
// 假设后端返回图片或文件的URL
const apiUrl = 'your-api-url';
fetch(apiUrl)
.then(response => response.blob())
.then(blob => {
// 显示图片
const imageUrl = URL.createObjectURL(blob);
imageDisplay.src = imageUrl;
// 设置文件下载链接
fileDownload.href = imageUrl;
fileDownload.textContent = 'Download File';
})
.catch(error => {
console.error('Error fetching data:', error);
});
</script>
</body>
</html>
使用 XMLHttpRequest
- 创建
XMLHttpRequest对象：- 初始化请求并设置响应类型为
blob。 - 监听
readystatechange事件，当状态为4（完成）且状态码为200（成功）时，处理响应数据。 - 使用
URL.createObjectURL创建URL用于显示图片或下载文件。
- 初始化请求并设置响应类型为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Streaming Image/File with XHR</title>
</head>
<body>
<img id="image-display-xhr" alt="Loaded Image">
<a id="file-download-xhr" download="downloaded_file">Download File</a>
<script>
const imageDisplayXHR = document.getElementById('image-display-xhr');
const fileDownloadXHR = document.getElementById('file-download-xhr');
const xhr = new XMLHttpRequest();
const apiUrl = 'your-api-url';
xhr.open('GET', apiUrl, true);
xhr.responseType = 'blob';
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
const blob = xhr.response;
// 显示图片
const imageUrl = URL.createObjectURL(blob);
imageDisplayXHR.src = imageUrl;
// 设置文件下载链接
fileDownloadXHR.href = imageUrl;
fileDownloadXHR.textContent = 'Download File';
}
};
xhr.send();
</script>
</body>
</html>
在上述代码中：
- 对于图片，通过设置
img元素的src属性来显示。 - 对于文件下载，通过设置
a元素的href和download属性来提供下载链接。
请将 'your-api-url' 替换为实际后端返回图片或文件的API地址。同时，确保后端设置了正确的响应头，允许前端访问返回的数据。例如，对于跨域请求，后端可能需要设置 Access - Control - Allow - Origin 头。
js 对后端返回的图片处理和显示
在JavaScript中处理后端返回的图片并在前端显示，常见的操作包括调整图片大小、添加滤镜、裁剪等。以下以调整图片大小和添加高斯模糊滤镜为例，展示如何对后端返回的图片进行处理并显示。
1. 使用fetch获取图片数据并转换为Blob对象
首先，使用fetch API从后端获取图片数据，并将响应转换为Blob对象。之后可以基于这个Blob对象创建Image对象进行后续处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Process Image</title>
</head>
<body>
<canvas id="processed-canvas"></canvas>
<script>
const canvas = document.getElementById('processed-canvas');
const ctx = canvas.getContext('2d');
// 假设后端返回图片的URL
const apiUrl = 'your-api-url';
fetch(apiUrl)
.then(response => response.blob())
.then(blob => {
const img = new Image();
img.src = URL.createObjectURL(blob);
img.onload = function () {
// 在这里进行图片处理
// 例如调整大小
const newWidth = 200;
const newHeight = 200;
canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, newWidth, newHeight);
// 例如添加高斯模糊滤镜（通过应用CSS滤镜模拟，实际高斯模糊更复杂，
// 这里简单示意）
canvas.style.filter = 'blur(5px)';
};
})
.catch(error => {
console.error('Error fetching data:', error);
});
</script>
</body>
</html>
2. 使用canvas进行复杂图像处理
canvas提供了强大的2D绘图API，可以进行更复杂的图像处理，如裁剪、像素操作等。以下是一个裁剪图片的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Process Image - Crop</title>
</head>
<body>
<canvas id="cropped-canvas"></canvas>
<script>
const canvas = document.getElementById('cropped-canvas');
const ctx = canvas.getContext('2d');
const apiUrl = 'your-api-url';
fetch(apiUrl)
.then(response => response.blob())
.then(blob => {
const img = new Image();
img.src = URL.createObjectURL(blob);
img.onload = function () {
// 裁剪图片
const cropX = 50;
const cropY = 50;
const cropWidth = 100;
const cropHeight = 100;
canvas.width = cropWidth;
canvas.height = cropHeight;
ctx.drawImage(img, cropX, cropY, cropWidth, cropHeight,
0, 0, cropWidth, cropHeight);
};
})
.catch(error => {
console.error('Error fetching data:', error);
});
</script>
</body>
</html>
3. 使用WebGL进行高性能图像处理（适用于更复杂和大规模的处理）
WebGL是基于OpenGL ES 2.0的JavaScript API，用于在网页上进行硬件加速的3D图形渲染，也可用于高性能的2D图像处理。以下是一个简单的使用WebGL显示图片的示例框架（实际的图像处理需要编写着色器等更复杂的操作）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL Image</title>
</head>
<body>
<canvas id="webgl-canvas"></canvas>
<script>
const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');
const apiUrl = 'your-api-url';
fetch(apiUrl)
.then(response => response.blob())
.then(blob => {
const img = new Image();
img.src = URL.createObjectURL(blob);
img.onload = function () {
// 设置WebGL视口
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// 这里省略创建着色器、缓冲区等复杂步骤
// 简单来说，后续需要将图片数据传递给WebGL并进行渲染
};
})
.catch(error => {
console.error('Error fetching data:', error);
});
</script>
</body>
</html>
在上述示例中，将'your-api-url'替换为实际的后端返回图片的API地址。这些示例展示了从获取图片到在前端进行不同程度处理并显示的过程。根据具体需求，可以选择合适的处理方式和技术。
框架应用之buffer处理
- 使用
fetch获取图片并显示：- 假设后端提供一个图片的API接口，前端通过
fetch获取图片数据，将其转换为Blob对象，生成URL并显示在img标签中。 - 以下是一个完整的HTML页面示例：
- 假设后端提供一个图片的API接口，前端通过
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Blob Example</title>
</head>
<body>
<img id="displayed-image" alt="Loaded Image">
<script>
const displayedImage = document.getElementById('displayed-image');
const apiUrl = 'your - api - url';// 替换为实际的API地址
fetch(apiUrl)
.then(response => response.arrayBuffer())
.then(buffer => {
const blob = new Blob([buffer], { type: 'image/png' });
let src = window.URL.createObjectURL(blob);
displayedImage.src = src;
})
.catch(error => {
console.error('Error fetching data:', error);
});
</script>
</body>
</html>
- 在Vue.js中的使用示例：
- 假设你有一个Vue组件，在组件中从后端获取图片并显示。
- 首先确保你已经安装并引入了Vue.js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Image Blob Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<img :src="imgUrl" alt="Loaded Image">
</div>
<script>
new Vue({
el: '#app',
data() {
return {
imgUrl: ''
};
},
mounted() {
const apiUrl = 'your-api-url';// 替换为实际的API地址
fetch(apiUrl)
.then(response => response.arrayBuffer())
.then(buffer => {
const blob = new Blob([buffer], { type: 'image/png' });
this.imgUrl = window.URL.createObjectURL(blob);
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
});
</script>
</body>
</html>
- 在React中的使用示例：
- 创建一个React组件来从后端获取图片并显示。
- 假设你已经设置好React开发环境（例如使用
create-react-app）。
import React, { useEffect, useState } from'react';
function ImageComponent() {
const [imgUrl, setImgUrl] = useState('');
const apiUrl = 'your - api - url';// 替换为实际的API地址
useEffect(() => {
fetch(apiUrl)
.then(response => response.arrayBuffer())
.then(buffer => {
const blob = new Blob([buffer], { type: 'image/png' });
setImgUrl(window.URL.createObjectURL(blob));
})
.catch(error => {
console.error('Error fetching data:', error);
});
}, []);
return <img src={imgUrl} alt="Loaded Image" />;
}
export default ImageComponent;
在上述示例中，your - api - url 都需要替换为实际返回图片数据的后端API地址。在实际应用中，你可能需要处理不同的图片格式（如 image/jpeg 等），并且根据具体情况调整 Blob 的 type 参数。同时，要注意处理可能出现的跨域问题，后端可能需要设置适当的CORS（跨域资源共享）头。
