探索 Blob 对象的应用场景和实例分析

image.png

一. 引言

当我们在开发 Web 应用程序时，常常会遇到需要处理二进制数据的情况。这时，Blob（Binary Large Object）对象就成为了一个非常有用的工具。Blob 对象可以用来表示一段二进制数据，它可以存储和操作各种类型的数据，从图片、音频和视频，到文件等。

上一篇文章，我们学习了 Blob 的一些常见操作以及使用方式，详细查看请点击以下链接：

Blob 学习指南：从零开始学习 JavaScript Blob 对象的使用icon-default.png?t=O83Ahttps://blog.csdn.net/qq_24956515/article/details/142971006

在本篇文章中，我们将继续探讨 Blob 对象的应用场景和实例，帮助大家更好地理解和应用这一技术。

二. 文件上传和下载

当我们在网页应用程序中进行文件上传和下载时，Blob 对象是一个强大的工具。接下来，我们将学习如何使用 FormData 和 Blob 对象来实现文件上传和使用 Blob 对象来实现文件下载。

1. 文件上传：通过 FormData 和 Blob 对象实现

文件上传是指将本地计算机上的文件发送到服务器端。在 JavaScript 中，可以通过 FormData 和 Blob 对象来实现文件上传。

首先，让我们来看看如何使用 FormData 和 Blob 对象来进行文件上传的步骤：

  1. 获取文件输入框并监听选择事件：首先，我们需要获取用户选择的文件，同时对文件输入框进行监听，当用户选择文件时触发事件，可以通过以下方式获取文件输入框并添加事件监听器。

const fileInput = document.getElementById("file-input");
fileInput.addEventListener("change", function () {
  //这里处理文件上传逻辑
});

  1. 获取选择的文件：从文件输入框中获取用户选择的文件。

const file = fileInput.files[0];

  1. 创建 FormData 对象：创建一个 FormData 对象来存储文件数据。将文件添加到 FormData 对象中，可以使用 append() 方法将文件添加到 FormData 对象中。

const formData = new FormData();
formData.append("file", file);

  1. 发送文件数据到服务器：通过使用 fetch 等方法发送文件数据到服务器，并在 body 中包含 FormData 对象。

fetch("http://your-upload-api.com", {
  method: "POST",
  body: formData,
})
  .then((response) => {
    // 处理上传成功的逻辑
    console.log("文件上传成功");
  })
  .catch((error) => {
    // 处理上传失败的逻辑
    console.log("文件上传失败");
  });

通过以上步骤，我们可以使用 FormData 和 Blob 对象来实现文件上传功能。在这个示例中，我们将用户选择的文件添加到 FormData 对象中，并使用 fetch 方法将 FormData 对象发送到服务器。

2. 文件下载：使用 Blob 对象实现

文件下载是指从服务器端获取文件数据，并在客户端上将其保存为一个可下载的文件。在 JavaScript 中，同样可以使用 Blob 对象来实现文件下载。

以下是使用 Blob 对象实现文件下载的步骤：

  1. 发送请求获取文件数据：使用 fetch 方法发送请求到服务器以获取文件数据。

fetch("http://your-download-api.com")
  .then((response) => response.blob())
  .then((blob) => {
    // 在这里处理文件下载逻辑
  })
  .catch((error) => {
    console.log("文件下载失败");
  });

  1. 创建下载链接：使用 URL.createObjectURL() 方法将 Blob 对象转换为可下载的链接。

const downloadLink = document.createElement("a");
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = "file.txt"; // 设置下载的文件名

  1. 触发点击事件进行文件下载：模拟点击创建的下载链接，触发下载。

downloadLink.click();

通过以上步骤，我们可以使用 Blob 对象来实现文件下载功能。在这个示例中，我们使用 fetch 方法获取文件数据并将其转换为 Blob 对象，然后创建一个可下载链接，通过触发点击事件来实现文件下载。

如何使用 FormData 和 Blob 对象实现文件上传和使用 Blob 对象来实现文件下载。通过些方法，我们可以轻松地在网页用程序中处理文件上传和下载的功能，提供更好的用户体验。

三. Canvas 画布保存

当我们在 Canvas 进行创作时，可以使用 Blob 对象来进行处理，将整个 Canvas 保存为 Blob 格式的图片文件。

以下是保存画布为 Blob 格式的图片的步骤：

  1. 创建 Canvas 元素：首先，我们需要在 HTML 中创建一个 Canvas 元素，用于显示和编辑图片。

<canvas id="canvas"></canvas>

  1. 获取 Canvas 上下文：使用 getContext() 方法获取 Canvas 的上下文。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

  1. 在 Canvas 上绘制内容：使用绘制 API 方法在 Canvas 上进行绘制，如绘制文本、图像等。

ctx.font = "30px Arial";
ctx.fillText("Hello, World!", 50, 50);

  1. 将 Canvas 保存为 Blob：使用 toBlob() 方法将 Canvas 保存为 Blob 对象。

canvas.toBlob(function (blob) {
  // 在这里处理 Blob 对象，保存为图片文件
}, "image/jpeg"); // 可以设置输出的图片格式，如 image/jpeg、image/png 等

通过以上的代码，我们可以将 Canvas 保存为 Blob 格式的图片文件。上述代码的实现是在 Canvas 上绘制了一段文本，并使用 toBlob() 方法将 Canvas 保存为 Blob 对象。

之后可以使用上面已经介绍过的文件下载的方式将图片进行下载到本地，运行代码如下图效果所示：

record.gif

record.gif

四. 音频处理

Blob 对象也可以用于处理音频数据，在前端开发中，常见的操作为音频数据转换为 Blob 对象并进行二次处理，下面我们看一下如何使用 Blob 对象处理音频数据，并将音频流转换为 Blob 对象进行处理的方法。

获取音频数据。音频数据可以来自不同的来源，例如麦克风录音、音频文件解码等。这里以获取麦克风录制的音频数据为例。

navigator.mediaDevices
  .getUserMedia({ audio: true })
  .then((stream) => {
    const mediaRecorder = new MediaRecorder(stream);
    const chunks = [];

    // 开始录制音频
    mediaRecorder.start();

    // 监听音频数据的录制
    mediaRecorder.addEventListener("dataavailable", (event) => {
      chunks.push(event.data);
    });

    // 停止录制音频
    setTimeout(() => {
      mediaRecorder.stop();

      // 将录制的音频数据转换为 Blob 对象
      const blob = new Blob(chunks, { type: "audio/wav" });

      // 接下来可以对获取到的 Blob 对象进行二次处理
      // 进行处理的代码写在这里
    }, 5000); // 录制 5 秒后停止
  })
  .catch((error) => {
    console.error("获取麦克风权限出错：", error);
  });

  1. 在上述代码中，我们使用了 navigator.mediaDevices.getUserMedia 方法获取了麦克风的音频数据流。然后通过 MediaRecorder 对象进行音频录制，并将录制的音频数据存储在 chunks 数组中。

  2. 在 dataavailable 事件监听器中，我们监听并收集音频数据的录制结果。

  3. 在适当的时机（例如录制了一段特定长度的音频后），我们停止录制，并将 chunks 数组中的音频数据转换为 Blob 对象。

  4. 接下来，你可以对获取到的 Blob 对象进行二次处理，例如保存到本地、上传到服务器、进行音频处理等。根据你的需求进行相应的处理操作。

record.gif

record.gif

请注意，在根据具体需求进行二次处理时，你可能需要使用适当的音频处理库或技术，例如 Web Audio API 进行音频解码、WebRTC 进行实时通信等。

五. 视频处理

Blob 不仅能处理音频数据，也能进行视频处理，Blob 对象一般可用于处理视频流和转换视频数据。下面我们看一下如何使用 Blob 对象处理视频流，并将视频数据转换为 Blob 对象进行二次处理。

1. 处理视频流

处理视频流通常涉及从摄像头或其他视频源中获取视频流，并对其进行处理、展示或传输等操作。在 JavaScript 中，我们可以使用 Blob 对象来处理视频流。

以下是使用 Blob 对象处理视频流的步骤：

  1. 获取视频流：首先，我们需要获取视频流。可以使用 getUserMedia() 方法获取摄像头视频流。

navigator.mediaDevices
  .getUserMedia({ video: true })
  .then((stream) => {
    // 在这里处理视频流逻辑
  })
  .catch((error) => {
    console.log("获取视频流失败");
  });

  1. 创建 MediaRecorder 对象：使用 MediaRecorder 对象来处理视频流。将视频流作为参数传递给 MediaRecorder 对象的构造函数。

const mediaRecorder = new MediaRecorder(stream);

  1. 监听录制事件：使用 ondataavailable 事件监听 MediaRecorder 对象的录制数据可用事件。在这个事件中，我们可以获取到 Blob 对象，表示录制的视频数据。

const chunks = [];

mediaRecorder.ondataavailable = function (e) {
  chunks.push(e.data);
};

  1. 停止录制并处理 Blob 对象：在停止录制时，我们可以将收集到的视频数据合并为一个 Blob 对象，并进行处理。

mediaRecorder.onstop = function () {
  const videoBlob = new Blob(chunks, { type: "video/webm" }); // 可设置输出的视频格式

  // 在这里处理 Blob 对象，进行进一步的视频处理
};

在上面的示例中，首先获取了摄像头的视频流，并使用 MediaRecorder 对象进行录制。在录制过程中，监听了 ondataavailable 事件，收集录制的视频数据，然后在停止录制时将这些数据合并为 Blob 对象。

2. 将视频数据转为 Blob 对象并进行二次处理

除了处理视频流，我们还可以将现有的视频数据转换为 Blob 对象，并进行二次处理。

以下是将视频数据转为 Blob 对象并进行二次处理的步骤：

  1. 加载视频数据：使用 XMLHttpRequest 或 fetch 方法加载视频数据，得到视频数据的 ArrayBuffer 或 Blob 对象。

const url = "video.mp4"; // 替换为你自己的视频路径

fetch(url)
  .then((response) => response.blob())
  .then((blob) => {
    // 在这里处理视频数据逻辑
  })
  .catch((error) => {
    console.log("加载视频数据失败");
  });

  1. 进行二次处理：获得视频数据的 Blob 对象后，我们可以进行二次处理，如截取指定时间段的视频、添加水印、转换格式等操作。

// 假设我们要将视频数据转为 base64 格式
const reader = new FileReader();

reader.onloadend = function () {
  const base64Data = reader.result.split(",")[1];

  // 在这里处理 base64 数据，进行进一步的二次处理
};

reader.readAsDataURL(blob);

通过以上步骤，我们可以将现有的视频数据转换为 Blob 对象，并进行二次处理。这将帮助我们方便地在网页应用程序中进行视频处理，并实现各种需要的功能。

在以上的示例代码中，加载视频数据得到 Blob 对象后，可以使用 FileReader 对象将 Blob 对象转换为 base64 格式的数据。

六. 注意事项

处理大型 Blob 对象时，有一些注意事项需要考虑：

  1. 内存消耗：将大型 Blob 对象读入内存可能会消耗大量的内存资源，特别是在移动设备上。这可能会影响应用程序的性能和稳定性。因此，在操作大型 Blob 对象时，要特别注意内存消耗，并及时释放不再需要的资源。

  2. 分块处理：如果可能，可以考虑将大型 Blob 对象分成多个较小的块进行处理。这样可以降低单个操作的内存消耗，并且可以更好地控制整个处理过程。

  3. 异步处理：在处理大型 Blob 对象时，建议使用异步方式进行处理。这样可以避免阻塞主线程，提高用户体验，并且可以更好地管理资源和进度。

  4. 流式处理：对于较大的 Blob 对象，可以考虑使用流式处理的方式，逐步读取和处理数据，而不是一次性读取整个 Blob 对象。这样可以减少内存消耗，并且适用于边读取边处理的场景。

处理大型 Blob 对象时，要注意通过合理的处理策略，可以更好地管理资源、提高性能，并确保应用程序的稳定性和可靠性。

七. 总结

在本篇文章中，我们探讨了 Blob 对象的应用场景和实例。Blob 对象作为一种表示二进制数据的工具，可以被用于进行文件上传、图片和音视频处理等操作，在 Web 开发中具有广泛的应用。

通过本文，我们主要学习到了 Blob 对象用于在前端实现文件上传功能，通过将文件转换为 Blob 对象，可以更加灵活地进行文件处理和传输。同时，Blob 对象也可以用于实现图片的下载功能，通过将 Canvas 中的图像转换为 Blob 对象，并提供下载链接，用户可以方便地将图片保存到本地。另外，Blob 对象还可以在音视频处理中起到重要作用，如音频录制、视频剪辑等。

Blob 对象作为一种处理二进制数据的工具，在 Web 开发中具有广泛的应用场景。它可以帮助开发者更加灵活地处理和操作各种二进制数据，为用户提供更好的使用体验。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/891834.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

FPAG学习(5)-三种方法实现LED流水灯

FPAG学习(5)-三种方法实现LED流水灯

目录 1.移位实现LED流水灯 1.1创建工程及源文件代码 1.1.1源代码 1.1.2仿真代码 1.1.3仿真 1.2实验结果 1.2.1总结 2.循环移位实现LED流水灯 3.38译码器实现LED流水灯 3.1原理 3.2源程序 1.移位实现LED流水灯 1.1创建工程及源文件代码 1.1.1源代码 利用计数器计数到…
阅读更多...
Python网络爬虫从入门到实战

Python网络爬虫从入门到实战

目录 引言 一、网络爬虫的概念 二、 网络爬虫的基本工作流程 &#xff08;一&#xff09;过程&#xff1a; &#xff08;二&#xff09;安装requests模块和beautifulsoup4模块 &#xff08;三&#xff09;requests库的使用 1、requests库的基本介绍 2、导入requests库的…
阅读更多...
IO作业代码

IO作业代码

问题 通过 fwrite和 fread去拷贝 文件到另外一个文件上 #include<myhead.h> #include <stdio.h> #include <string.h> #include <stdlib.h> #include<errno.h> #include<time.h> int main(int argc, const char *argv[]) { FILE *fp fo…
阅读更多...
新款任天堂switch游戏机方案，支持4K60HZ投屏方案，显示器，手柄方案

新款任天堂switch游戏机方案，支持4K60HZ投屏方案，显示器，手柄方案

据传任天堂将推出新的一代的switch掌机&#xff0c;而新款掌机将支持4K60HZ投屏 都2402年了再做1080P确实有点不太象话了 4K60HZ相较于1080P能够提升很多游戏体验&#xff0c;这时不管是HDMI显示器或者是VR眼睛清晰度都会让人舒服很多。 不过新一代的任天堂似乎也在PD协议上…
阅读更多...
答题pk小程序的技术特点和性能优势分析

答题pk小程序的技术特点和性能优势分析

答题小程序是一种在移动设备上运行的应用程序&#xff0c;旨在提供各种类型的答题体验。以下是答题小程序的一些特点和优势&#xff1a; 一、特点 多样化的题目类型&#xff1a; 包括选择题、填空题、判断题等常见题型&#xff0c;还可能有简答题、论述题等更具挑战性的题型。…
阅读更多...
qt+opengl 实现纹理贴图，平移旋转，绘制三角形，方形

qt+opengl 实现纹理贴图，平移旋转，绘制三角形，方形

1 首先qt 已经封装了opengl&#xff0c;那么我们就可以直接用了&#xff0c;这里面有三个函数需要继承 virtual void initializeGL() override; virtual void resizeGL(int w,int h) override; virtual void paintGL() override; 这三个函数是实现opengl的重要函数。 2 我们…
阅读更多...
arp欺骗及其实验

arp欺骗及其实验

ARP欺骗&#xff08;ARP Spoofing&#xff09;是一种网络攻击技术&#xff0c;攻击者通过伪造ARP&#xff08;地址解析协议&#xff09;消息&#xff0c;将其MAC地址与目标IP地址关联&#xff0c;从而实现对网络流量的截获、篡改或重定向。以下是ARP欺骗的详细信息&#xff1a;…
阅读更多...
【JVM】—Java内存区域详解

【JVM】—Java内存区域详解

Java内存区域详解 ⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记链接&#x1f449;https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ 如果可以&#xff0c;麻烦各位看官顺手点个star~&#x1f60a; 文章目录 Java内存区域详解1 线程私有1…
阅读更多...
Linux系统：Ubuntu上安装Chrome浏览器

Linux系统：Ubuntu上安装Chrome浏览器

Ubuntu系统版本&#xff1a;23.04 在Ubuntu系统上安装Google Chrome浏览器&#xff0c;可以通过以下步骤进行&#xff1a; 终端输入以下命令&#xff0c;先更新软件源&#xff1a; sudo apt update 或 sudo apt upgrade终端输入以下命令&#xff0c;下载最新的Google Chrome .…
阅读更多...
瑞芯微RK3566/RK3568 Android11使用OTA升级固件方法，深圳触觉智能鸿蒙开发板演示，备战第九届华为ICT大赛

瑞芯微RK3566/RK3568 Android11使用OTA升级固件方法，深圳触觉智能鸿蒙开发板演示，备战第九届华为ICT大赛

本文介绍瑞芯微RK3566/RK3568在Android11系统OTA升级固件方法&#xff0c;使用触觉智能的Purple Pi OH鸿蒙开发板演示&#xff0c;搭载了瑞芯微RK3566&#xff0c;Laval官方社区主荐&#xff01; 1、OTA包生成 在源码根目录上执行以下命令编译OTA包 # make installclean # …
阅读更多...
Docker实践与应用举例

Docker实践与应用举例

目录 1. 引言 2. Docker的基本概念 2.1 什么是Docker容器 2.2 Docker镜像 2.3 Docker架构 3. Docker的应用场景 3.1 开发与测试环境的隔离 3.2 持续集成与持续交付&#xff08;CI/CD&#xff09; 3.3 微服务架构 4. Docker的实践案例 4.1 部署Nginx反向代理 4.2 使用…
阅读更多...
端到端的开源OCR模型：GOT-OCR-2.0，支持场景文本、文档、乐谱、图表、数学公式等内容识别！

端到端的开源OCR模型：GOT-OCR-2.0，支持场景文本、文档、乐谱、图表、数学公式等内容识别！

今天给大家分享一个端到端的开源 OCR 模型&#xff0c;号称 OCR 2.0&#xff01; 支持场景文本、文档、乐谱、图表、数学公式等内容识别&#xff0c;拿到了 BLEU 0.972 高分。 从给出的演示图来看&#xff0c;一些非常复杂的数学公式都能正确的识别&#xff0c;颇为强大。模型…
阅读更多...
文件IO（Linux文件IO）

文件IO（Linux文件IO）

前言 本文介绍Linux系统下自带的文件IO的函数。 Linux文件IO相关函数 open函数 #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> int open(const char *pathname, int flags); int open(const char *pathname, int flags, mode_t mode)…
阅读更多...
JAVA就业笔记8——第二阶段（5）

JAVA就业笔记8——第二阶段（5）

课程须知 A类知识&#xff1a;工作和面试常用&#xff0c;代码必须要手敲&#xff0c;需要掌握。 B类知识&#xff1a;面试会问道&#xff0c;工作不常用&#xff0c;代码不需要手敲&#xff0c;理解能正确表达即可。 C类知识&#xff1a;工作和面试不常用&#xff0c;代码不…
阅读更多...
Spire.PDF for .NET【页面设置】演示：在 C#/VB.NET 中创建 PDF 小册子

Spire.PDF for .NET【页面设置】演示：在 C#/VB.NET 中创建 PDF 小册子

当人们打印大型 PDF 文档时&#xff0c;PDF 小册子非常有用。它在书籍、报纸和杂志编辑中特别受欢迎。本节将介绍一种通过C#、VB.NET 中的.NET PDF组件创建 PDF 小册子的非常简单的方法。 Spire.PDF for .NET 是一款独立 PDF 控件&#xff0c;用于 .NET 程序中创建、编辑和操作…
阅读更多...
进程和作业管理

进程和作业管理

1.概念 &#xff08;1&#xff09;进程 进程是指一个具有独立功能的程序的一次运行过程&#xff0c;也是系统进行资源分配和调度的基本单位&#xff0c;即每个程序模块和它执行时所处理的数据组成了进程。进程虽不是程序&#xff0c;但由程序产生。进程与程序的区别在于&#…
阅读更多...
中国联通目前规模最大的境外综合性通信枢纽大楼

中国联通目前规模最大的境外综合性通信枢纽大楼

中国联通&#xff08;香港&#xff09;将军澳智 云数据中心&#xff1a;打造境外通信服务新标杆 在数字化浪潮席卷全球的今天&#xff0c;数据中心作为信息社会的基石&#xff0c;其重要性日益凸显。中国联通&#xff08;香港&#xff09;将军澳智 云数据中心&#xff0c;作…
阅读更多...
基于django的代理商订单管理系统

基于django的代理商订单管理系统

基于Django的代理商订单管理系统——高效助力代理商管理 在如今企业业务日益复杂的环境下&#xff0c;如何高效地管理代理商订单成为不可或缺的环节。我们推出了一款基于Django框架的代理商订单管理系统&#xff0c;专为企业的订单管理及返利控制设计&#xff0c;为企业与代理…
阅读更多...
uniapp-uniapp + vue3 + pinia 搭建uniapp模板

uniapp-uniapp + vue3 + pinia 搭建uniapp模板

使用技术 ⚡️uni-app, Vue3, Vite, pnpm &#x1f4e6; 组件自动化引入 &#x1f34d; 使用 Pinia 的状态管理 &#x1f3a8; tailwindcss - 高性能且极具灵活性的即时原子化 CSS 引擎 &#x1f603; 各种图标集为你所用 &#x1f525; 使用 新的 <script setup> …
阅读更多...
LLM - 配置 ModelScope SWIFT 测试 Qwen2-VL 图像微调(LoRA) 教程(2)

LLM - 配置 ModelScope SWIFT 测试 Qwen2-VL 图像微调(LoRA) 教程(2)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/142882496 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 SWIFT …
阅读更多...
最新文章

Copyright @ 2022~2023