js 之图片流式转换及图片处理+createObjectURL+canvas+webgl+buffer

放逐者-保持本心，方可放逐2025-01-04 21:21

文章目录

    • [js 图片 文件流前端处理](#js 图片 文件流前端处理)
      • [使用 fetch API](#使用 fetch API)
      • [使用 XMLHttpRequest](#使用 XMLHttpRequest)
    • [js 对后端返回的图片处理和显示](#js 对后端返回的图片处理和显示)
      • [1. 使用fetch获取图片数据并转换为`Blob`对象](#1. 使用fetch获取图片数据并转换为Blob对象)
      • [2. 使用canvas进行复杂图像处理](#2. 使用canvas进行复杂图像处理)
      • [3. 使用WebGL进行高性能图像处理（适用于更复杂和大规模的处理）](#3. 使用WebGL进行高性能图像处理（适用于更复杂和大规模的处理）)
    • 框架应用之buffer处理

js 图片 文件流前端处理

在JavaScript中，要对后端返回的图片或文件进行流式转化显示，可以通过 XMLHttpRequest （或者更现代的 fetch API）获取数据，然后使用 Blob 对象和 URL.createObjectURL 来创建一个可用于显示的URL。以下是分别使用 fetch 和 XMLHttpRequest 的示例：

使用 fetch API

  1. 获取图片或文件数据 ：
    • 使用 fetch 发起请求获取数据。
    • 将响应数据转换为 Blob 对象。
    • 使用 URL.createObjectURL 创建一个URL，用于在页面上显示图片或提供文件下载链接。
html 复制代码 
<!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

  1. 创建 XMLHttpRequest 对象 ：
    • 初始化请求并设置响应类型为 blob。
    • 监听 readystatechange 事件，当状态为 4（完成）且状态码为 200（成功）时，处理响应数据。
    • 使用 URL.createObjectURL 创建URL用于显示图片或下载文件。
html 复制代码 
<!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对象进行后续处理。

html 复制代码 
<!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，可以进行更复杂的图像处理，如裁剪、像素操作等。以下是一个裁剪图片的示例：

html 复制代码 
<!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显示图片的示例框架（实际的图像处理需要编写着色器等更复杂的操作）：

html 复制代码 
<!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处理

  1. 使用 fetch 获取图片并显示 ：
    • 假设后端提供一个图片的API接口，前端通过 fetch 获取图片数据，将其转换为 Blob 对象，生成URL并显示在 img 标签中。
    • 以下是一个完整的HTML页面示例：
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>
  1. 在Vue.js中的使用示例 ：
    • 假设你有一个Vue组件，在组件中从后端获取图片并显示。
    • 首先确保你已经安装并引入了Vue.js。
html 复制代码 
<!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>
  1. 在React中的使用示例 ：
    • 创建一个React组件来从后端获取图片并显示。
    • 假设你已经设置好React开发环境（例如使用 create-react-app）。
jsx 复制代码 
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（跨域资源共享）头。

相关推荐
KeyPan16 分钟前
【数据结构与算法:五、树和二叉树】
java·开发语言·数据结构·人工智能·算法·机器学习·计算机视觉
工业甲酰苯胺17 分钟前
Java Web学生自习管理系统
java·开发语言·前端
Fre丸子_21 分钟前
ffmpeg之yuv格式转h264
开发语言·qt·ffmpeg
晚上睡不着！25 分钟前
Java程序命令行调用Python矩阵算法
java·开发语言·python·numpy
哥屋恩052827 分钟前
C#中鼠标点击获取Chart图形上的坐标值
开发语言·c#
_周游40 分钟前
【C语言】_野指针
c语言·开发语言
青木川崎41 分钟前
java进阶之maven
java·开发语言·maven
ghostwritten1 小时前
Conda 安装 Jupyter Notebook
开发语言·ide·python·jupyter·conda
蓝天星空2 小时前
html生成注册与登录代码
javascript·css·html
hakesashou2 小时前
Python中对象序列化以及反序列化的方法
linux·开发语言·python
热门推荐
01渗透测试之SQLMAP工具详解 kali自带SQLmap解释 重点sqlmap --tamper 使用方式详解 搞完你就很nice了02半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)03HCIA-datacom数通题库和录播视频资料04物联网中基于WiFi的室内温度检测系统设计05新手学习VR全景需要知道的几个问题06优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间07【bug记录】清除僵尸进程，释放GPU显存08【漏洞复现】CVE-2015-3337 Arbitrary File Reading09校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站10映美精黑白相机IFrameQueueBuffer转halcon的HObject