javascript里面的blob和worker

news2024/11/24 19:35:17

目录

Blob

1. Blob的基本概念

2. 创建Blob

3. Blob的属性和方法

示例：

3.1. Blob 的方法

4. 使用Blob

4.1 创建对象URL

4.2 使用FileReader读取Blob

4.3 上传Blob

5. Blob与其他对象的关系

6. 释放Blob对象

7. Blob的应用场景

8. 总结

Web Worker

1. Web Worker的基本概念

2. 创建Web Worker

worker.js 示例

3. 与Worker的通信

主线程发送消息

主线程接收消息

4. Worker的生命周期

5. 错误处理

6. Worker的限制

7. 共享工作者（Shared Worker）

创建共享工作者

8. 例子：使用Web Worker进行计算

main.js

worker.js

9. 总结

worker+blob

1. 使用Blob创建Web Worker

示例代码

2. 代码解析

3. 释放Blob URL

4. 注意事项

示例错误处理

5. 总结

知识星球 | 深度连接铁杆粉丝，运营高品质社群，知识变现的工具

Blob

在Web开发中，Blob（Binary Large Object）是一个表示二进制数据的对象。Blob通常用于处理文件和数据流，例如图像、音频、视频等。它允许你在JavaScript中以一种简单的方式来处理和操作二进制数据。

1. Blob的基本概念

  • Blob对象：Blob对象表示不可变的原始数据的类文件对象。它可以包含文本、图像、音频、视频等多种类型的数据。

  • 类型：Blob可以包含不同类型的数据，类型通过MIME类型来表示，例如image/png、audio/mp3等。

2. 创建Blob

你可以使用Blob构造函数来创建一个Blob对象。构造函数接受一个数组作为参数，数组中的每个元素都将成为Blob的一部分。

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

在这个例子中，创建了一个包含文本的Blob对象，MIME类型为text/plain。

3. Blob的属性和方法

  • size：返回Blob对象的字节长度。

  • type：返回Blob对象的MIME类型。

示例：
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
console.log(blob.size); // 输出：13
console.log(blob.type); // 输出：text/plain

3.1. Blob 的方法

  • slice()：可以从Blob对象中提取一个子集，并返回一个新的Blob对象。

    blob.slice(start, end, type);

    • start：开始位置（包含）。

    • end：结束位置（不包含），如果省略，则截取到Blob的末尾。

    • type：可选的MIME类型，用于指定返回的Blob对象的类型。

4. 使用Blob

Blob对象可以用于多种场景，包括：

4.1 创建对象URL

使用URL.createObjectURL()方法可以创建一个指向Blob对象的URL。这个URL可以用于在网页中显示图像或下载文件。

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

// 创建下载链接
const a = document.createElement('a');
a.href = url;
a.download = 'hello.txt';
a.textContent = 'Download Hello.txt';
document.body.appendChild(a);
4.2 使用FileReader读取Blob

FileReader API可以用来读取Blob对象的内容。例如，可以将Blob读取为文本或数据URL。

var blob = new Blob(['Hello, world!'], {type: 'text/plain'});
var url = URL.createObjectURL(blob);

var a = document.createElement('a');
a.href = url;
a.download = 'example.txt';
document.body.appendChild(a);
a.click();

document.body.removeChild(a);
URL.revokeObjectURL(url);
const reader = new FileReader();
reader.onload = function(event) {
    console.log(event.target.result); // 输出：Hello, world!
};
reader.readAsText(blob);

image.png

4.3 上传Blob

Blob可以直接通过XMLHttpRequest或fetch API上传到服务器。

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
const formData = new FormData();
formData.append('file', blob, 'hello.txt');

fetch('/upload', {
    method: 'POST',
    body: formData
}).then(response => {
    console.log('Upload successful:', response);
}).catch(error => {
    console.error('Upload failed:', error);
});

5. Blob与其他对象的关系

  • File：File对象是Blob对象的子类，表示用户通过文件输入选择的文件。File对象也包含了文件的额外信息，如文件名和文件路径。

  • ArrayBuffer：Blob可以从ArrayBuffer或TypedArray中创建，允许你处理更复杂的二进制数据。

6. 释放Blob对象

如果不再需要Blob对象，可以使用URL.revokeObjectURL()来释放与Blob对象关联的URL，帮助释放内存。

URL.revokeObjectURL(url);

7. Blob的应用场景

  • 文件上传：将用户选定的文件作为Blob上传到服务器。

  • 图像处理：在Canvas中绘制图像后，将其转换为Blob以进行保存或上传。

  • 音频和视频处理：处理音频或视频数据流，并将其转换为Blob以进行播放或下载。

var b = new Blob(["debugger;"]);
var objurl = URL.createObjectURL(b);
var script_ = document.createElement("script");
script_.src = objurl;
document.body.appendChild(script_);
debugger;

image.png

image.png

8. 总结

Blob是JavaScript中处理二进制数据的重要工具，广泛应用于文件处理、图像处理和网络请求等场景。通过Blob，开发者可以轻松地创建、读取和上传二进制数据，从而增强Web应用的功能和用户体验。

Web Worker

在Web开发中，Web Worker 是一种允许在后台线程中执行JavaScript代码的技术。它使得Web应用能够进行多线程处理，从而避免在主线程中执行耗时的操作，保持用户界面的响应性。

1. Web Worker的基本概念

  • 主线程：浏览器的主线程负责处理用户界面、事件和其他大多数任务。

  • Worker线程：Web Worker运行在独立的线程中，能够执行长时间运行的任务，而不会阻塞主线程。

2. 创建Web Worker

要创建一个Web Worker，你需要使用Worker构造函数，并传入一个JavaScript文件的URL，该文件包含Worker要执行的代码。

// main.js
const worker = new Worker('worker.js');
worker.js 示例
// worker.js
self.onmessage = function(event) {
    const result = event.data * 2; // 例如，将接收到的数据乘以2
    self.postMessage(result); // 将结果发送回主线程
};

3. 与Worker的通信

主线程和Worker之间通过消息传递进行通信。可以使用postMessage()方法发送消息，并使用onmessage事件接收消息。

主线程发送消息
worker.postMessage(10); // 发送数据到Worker
主线程接收消息
worker.onmessage = function(event) {
    console.log('Received from worker:', event.data); // 输出Worker返回的数据
};

4. Worker的生命周期

  • 创建：通过new Worker()创建Worker。

  • 运行：Worker开始执行指定的JavaScript代码。

  • 通信：主线程和Worker通过postMessage()和onmessage进行通信。

  • 终止：可以通过worker.terminate()方法终止Worker。

5. 错误处理

可以使用onerror事件处理Worker中的错误。

worker.onerror = function(event) {
    console.error('Error in worker:', event.message);
};

6. Worker的限制

  • 同源策略：Worker只能加载同源的脚本。

  • 无DOM访问：Worker无法访问DOM，因此不能直接操作页面元素。

  • 传递数据限制：只能传递可序列化的数据（例如，基本数据类型、Array、Object等），不能直接传递DOM元素或函数。

7. 共享工作者（Shared Worker）

除了普通的Web Worker，还有共享工作者（Shared Worker），允许多个浏览器上下文（如多个标签页）共享同一个Worker实例。

创建共享工作者
// sharedWorker.js
self.onconnect = function(event) {
    const port = event.ports[0];
    port.onmessage = function(event) {
        port.postMessage(event.data * 2);
    };
};

// main.js
const sharedWorker = new SharedWorker('sharedWorker.js');
sharedWorker.port.start();
sharedWorker.port.postMessage(10);
sharedWorker.port.onmessage = function(event) {
    console.log('Received from shared worker:', event.data);
};

8. 例子：使用Web Worker进行计算

以下是一个简单的例子，展示如何使用Web Worker进行耗时计算：

main.js
const worker = new Worker('worker.js');

worker.onmessage = function(event) {
    console.log('Result from worker:', event.data);
};

worker.postMessage(1000000000); // 发送一个大数进行计算
worker.js
self.onmessage = function(event) {
    let sum = 0;
    for (let i = 0; i < event.data; i++) {
        sum += i; // 进行一些耗时的计算
    }
    self.postMessage(sum); // 返回计算结果
};

9. 总结

Web Workers 是实现多线程处理的强大工具，可以帮助开发者在Web应用中进行复杂的计算和数据处理，而不会影响用户界面的响应性。通过合理使用Workers，可以显著提高Web应用的性能和用户体验。

worker+blob

在Web开发中，结合使用Web Worker和Blob可以实现动态创建Worker的能力。这种方法允许你将Worker的代码直接嵌入到JavaScript中，而不是将其放在单独的文件中。这对于简单的任务非常方便，尤其是在不想创建额外文件的情况下。

1. 使用Blob创建Web Worker

你可以使用Blob对象来创建Worker。Blob允许你将JavaScript代码作为字符串传递，然后将其转换为Worker。

示例代码
// 主线程代码
const workerCode = `
    self.onmessage = function(event) {
        // 进行一些计算
        let sum = 0;
        for (let i = 0; i < event.data; i++) {
            sum += i;
        }
        // 将结果发送回主线程
        self.postMessage(sum);
    };
`;

// 创建Blob对象
const blob = new Blob([workerCode], { type: 'application/javascript' });

// 创建Worker
const worker = new Worker(URL.createObjectURL(blob));

// 监听Worker的消息
worker.onmessage = function(event) {
    console.log('Result from worker:', event.data);
};

// 发送数据到Worker
worker.postMessage(1000000000); // 发送一个大数进行计算

2. 代码解析

  1. Worker代码：在主线程中定义Worker的代码，使用模板字符串（`）来方便地编写多行代码。

  2. 创建Blob：使用new Blob()创建一个Blob对象，传入Worker代码和MIME类型（application/javascript）。

  3. 创建Worker：使用URL.createObjectURL(blob)创建一个指向Blob的URL，并将其传递给Worker构造函数。

  4. 消息通信：主线程通过postMessage()发送数据到Worker，Worker通过postMessage()将结果返回给主线程。

3. 释放Blob URL

使用Blob创建Worker后，建议在不再需要Worker时释放Blob URL，以防止内存泄漏。可以使用URL.revokeObjectURL()方法来实现。

// 在Worker完成后，释放Blob URL
worker.onmessage = function(event) {
    console.log('Result from worker:', event.data);
    worker.terminate(); // 终止Worker
    URL.revokeObjectURL(worker); // 释放Blob URL（虽然这里不需要，worker本身没有URL）
};

4. 注意事项

  • 性能：虽然使用Blob创建Worker非常方便，但对于复杂的Worker代码，建议将其放在单独的文件中，以提高可维护性和性能。

  • 错误处理：可以使用worker.onerror来处理Worker中的错误。

示例错误处理
worker.onerror = function(event) {
    console.error('Error in worker:', event.message);
};

5. 总结

结合使用Web Worker和Blob可以方便地创建动态Worker，适用于简单的计算和处理任务。这种方法减少了文件管理的复杂性，适合在需要快速实现多线程处理的场景中使用。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Android JNI 技术入门指南

Android JNI 技术入门指南

引言 在Android开发中&#xff0c;Java是一种主要的编程语言&#xff0c;然而&#xff0c;对于一些性能要求较高的场景&#xff08;如音视频处理、图像处理、计算密集型任务等&#xff09;&#xff0c;我们可能需要使用到C或C等语言来编写底层的高效代码。为了实现Java代码与C…
阅读更多...
设计模式之抽象工厂模式(替换Redis双集群升级，代理类抽象场景)

设计模式之抽象工厂模式(替换Redis双集群升级，代理类抽象场景)

前言&#xff1a; 看了很多书、学了很多知识&#xff0c;多线程能玩出花&#xff0c;可最后我还是写不好代码&#xff01; 这就有点像家里装修完了买物件&#xff0c;我几十万的实木沙发&#xff0c;怎么放这里就不好看。同样代码写的不好并不一定是基础技术不足&#xff0c;也…
阅读更多...
LeetCode 热题 100之 堆

LeetCode 热题 100之 堆

1.数组中第k个最大元素 和Acwing 786 第k个数一模一样 排序 思路分析1&#xff1a;此题要求时间复杂度未为O(n)。虽然库函数sort和快速排序都能过&#xff0c;但是时间复杂度不满足条件。下面优化快速排序&#xff0c;写一个快速选择算法。我们可以引入随机化来加速这个过程&…
阅读更多...
java-智能识别车牌号_基于spring ai和开源国产大模型_qwen vl

java-智能识别车牌号_基于spring ai和开源国产大模型_qwen vl

用大模型做车牌号识别&#xff0c;最简单高效 在Java场景中&#xff0c;java识别车牌号的需求非常普遍。过去&#xff0c;我们主要依赖OCR等传统方法来实现java识别车牌号&#xff0c;但这些方法的效果往往不稳定。随着技术的发展&#xff0c;现在有了更先进的解决方案——大模…
阅读更多...
java ssm 网上蛋糕店 在线蛋糕甜品管理 网上蛋糕管理 源码 jsp

java ssm 网上蛋糕店 在线蛋糕甜品管理 网上蛋糕管理 源码 jsp

一、项目简介 本项目是一套基于SSM的网上蛋糕店&#xff0c;主要针对计算机相关专业的和需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本、软件工具等。 项目都经过严格调试&#xff0c;确保可以运行&#xff01; 二、技术实现 ​后端技术&#xff1a;S…
阅读更多...
Qt编译lua库并调用

Qt编译lua库并调用

参考博客&#xff1a; 编译lua库 参考下面文章编译lua库文件 QT5.9学习笔记之QT编译lua库_qtluaintf.h-CSDN博客 https://blog.csdn.net/qq_23345187/article/details/112710677 Qt代码引用lua库文件 打开pro项目文件&#xff0c;右键空白处&#xff0c;点击添加库&#xff…
阅读更多...
shopify模块新增内容或图片

shopify模块新增内容或图片

1、后台找到指定的liquid页面&#xff0c;在该页面下方{% schema %} 新增需求 2、添加轮播图功能 {% comment %} 轮播代码 {% endcomment %}{% if block.settings.enable_slider %}<divclass"size-guide-slider swiper"data-slides-per-view"{{ block.setti…
阅读更多...
【Ant Design Pro】不想用轻量的hook就喜欢用dva的数据状态管理

【Ant Design Pro】不想用轻量的hook就喜欢用dva的数据状态管理

就像TS是JS的超集一样&#xff0c;antdpro框架也类似&#xff0c;底层也是用dva来构建的。关于数据管理&#xff0c;官方还是建议我们使用轻量的hooks方法来进行操作使用。 使用dva实现数据状态管理效果 框架中的数据管理模式 简单的数据共享 对于简单的应用&#xff0c;不需…
阅读更多...
基于 CMSIS-PACK 移植Bootloader

基于 CMSIS-PACK 移植Bootloader

基于 CMSIS-PACK 移植 1.准备工作 准备一份基础的裸机源码 (可通过 STM32CubeMx 可视化软件创建也可按照工程项目所需文档手动创建) 工程&#xff0c;如一份 stm32 包含一个支持 printf 的串口初始化代码。 2.安装Pack包 在 MDK 中部署 **MicroBoot **的第一步是获取对应的…
阅读更多...
使用ChatGPT神速精读文献，12个高阶ChatGPT提示词指令，值得你复制使用

使用ChatGPT神速精读文献，12个高阶ChatGPT提示词指令，值得你复制使用

在学术研究的道路上，文献的阅读和分析往往是我们迈向深层次理解的第一步。如何有效提取文献中的核心要点，如何全面总结一个研究的背景与贡献，甚至如何深入剖析论文中的每个细节，都是每个研究者必须掌握的技能。通过系统化的文献分析，我们不仅能了解现有研究的框架与成果，…
阅读更多...
PICO+Unity MR空间锚点

PICO+Unity MR空间锚点

官方链接&#xff1a;空间锚点 | PICO 开发者平台 注意&#xff1a;该功能只能打包成APK在PICO 4 Ultra上真机运行&#xff0c;无法通过串流或PICO developer center在PC上运行。使用之前要开启视频透视。 在 Inspector 窗口中的 PXR_Manager (Script) 面板上&#xff0c;勾选…
阅读更多...
Python Matplotlib 如何绘制股票或金融数据图

Python Matplotlib 如何绘制股票或金融数据图

Python Matplotlib 如何绘制股票或金融数据图 在金融领域&#xff0c;数据可视化是分析市场趋势、股票表现和财务健康的重要工具。Python 的 Matplotlib 库为我们提供了强大的功能来绘制股票和金融数据图。本文将详细介绍如何使用 Matplotlib 绘制这些图表&#xff0c;并且结合…
阅读更多...
Golang--反射

Golang--反射

1、概念 反射可以做什么? 反射可以在运行时动态获取变量的各种信息&#xff0c;比如变量的类型&#xff0c;类别等信息如果是结构体变量&#xff0c;还可以获取到结构体本身的信息(包括结构体的字段、方法)通过反射&#xff0c;可以修改变量的值&#xff0c;可以调用关联的方法…
阅读更多...
【Web前端】使用 JSON 处理数据

【Web前端】使用 JSON 处理数据

JSON 是一种基于 JavaScript 对象语法的数据格式&#xff0c;由道格拉斯克罗克福特推广。尽管其语法源于 JavaScript&#xff0c;JSON 仍然是独立于 JavaScript 的&#xff0c;这也是为什么许多编程环境能够解析和生成 JSON 的原因。JSON 可以以对象或字符串的形式存在&#xf…
阅读更多...
VMware 虚拟机使用教程及 Kali Linux 安装指南

VMware 虚拟机使用教程及 Kali Linux 安装指南

VMware 虚拟机使用教程及 Kali Linux 安装指南 在现代计算机科学与网络安全领域&#xff0c;虚拟化技术的应用越来越广泛。VMware 是一款功能强大的虚拟化软件&#xff0c;可以帮助用户在同一台物理机上运行多个操作系统。本文将详细介绍如何使用 VMware 虚拟机&#xff0c;并…
阅读更多...
达梦8数据库适配ORACLE的8个参数

达梦8数据库适配ORACLE的8个参数

目录 1、概述 1.1 概述 1.2 实验环境 2、参数简介 3、实验部分 3.1 参数BLANK_PAD_MODE 3.2 参数COMPATIBLE_MODE 3.3 参数ORDER_BY_NULLS_FLAG 3.4 参数DATETIME_FMT_MODE 3.5 参数PL_SQLCODE_COMPATIBLE 3.6 参数CALC_AS_DECIMAL 3.7 参数ENABLE_PL_SYNONYM 3.8…
阅读更多...
三十四、VB基本知识与提高篇

三十四、VB基本知识与提高篇

一、代码编写规则： （一）标识符的使用规则： 标识符有两种：一种是系统关键字，另一种是自己定义标识符。 1、不能与系统关键字相同。 2、同一作用域（块）中不同出现重名标识符。用户自定义的标识符是不区分大小写的。 3、自定义标识符必须以字母开头，长度不能超过255…
阅读更多...
数据冒险-ld和add（又称load-use冒险）

数据冒险-ld和add（又称load-use冒险）

第一张图没有使用前递&#xff0c;第二张图使用前递&#xff0c;chatgpt分析第二张图 这张图展示了一个流水线的执行过程&#xff0c;其中存在读后写&#xff08;RAW&#xff09;数据冒险。我们可以通过**前递&#xff08;Forwarding&#xff09;**技术来解决这个数据冒险&…
阅读更多...
Coppelia Sim (v-REP)仿真 机器人3D相机手眼标定与实时视觉追踪 （三）

Coppelia Sim (v-REP)仿真 机器人3D相机手眼标定与实时视觉追踪 （三）

使用标定好的结果进行跟踪标定板的位置 坐标转换的步骤为&#xff1a; 1.图像坐标点转到相机坐标系下的点 2.相机坐标系下的点转为夹爪坐标系下的点 3.夹爪坐标系下的点转为机械手极坐标系下的点 跟踪的方式 1.采用标定板的第一个坐标点作为跟踪点 3.机器人每次移动到该点位&a…
阅读更多...
石墨舟氮气柜：半导体制造中的关键保护设备

石墨舟氮气柜：半导体制造中的关键保护设备

石墨舟是由高纯度石墨材料制成的&#xff0c;主要用于承载硅片或其他基板材料通过高温处理过程&#xff0c;是制造半导体器件和太阳能电池片的关键设备之一。 石墨舟在空气中容易与氧气发生反应&#xff0c;尤其是在高温处理后&#xff0c;表面可能更为敏感&#xff1b;石墨舟具…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023