js 之图片流式转换及图片处置惩罚+createObjectURL+canvas+webgl+buffer ...

铁佛 · 2025-3-24 00:02:29

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页面示例：

<!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（跨域资源共享）头。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

js 之图片流式转换及图片处置惩罚+createObjectURL+canvas+webgl+buffer ...

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块