WebWorker处理百万数据

Home.vue

<template><el-input v-model="Val" style="width: 400px"></el-input><el-button @click="imgHandler">过滤</el-button><hr /><canvas id="myCanvas" width="500" height="500"></canvas>
</template><script lang="ts" setup>
import { ref } from "vue";
import myImgs from "../../public/04.jpg";
const Val = ref("");//定义画布
let canvas: any;
let ctx: any;
let img = new Image();
img.src = myImgs;
img.onload = function () {canvas = document.getElementById("myCanvas");ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, 500, 500);
};//创建webWorker,指向public/pic.ts
//地址需要是线上地址
let worker1 = new Worker("http://localhost:5173/pic.ts");
worker1.addEventListener("message", (e) => {const imgData = e.data;ctx.putImageData(imgData, 0, 0);
});
function imgHandler() {//获取画布数据const imageData = ctx.getImageData(0, 0, 500, 500);//发送数据给workerworker1.postMessage(imageData);
}
</script><style lang="scss" scoped></style>

 pic.ts

self.addEventListener("message", (e) => {if (e.data.data.length) {let imgData = e.data;for (let i = 0; i < imgData.data.length; i += 4) {for (let j = 0; j < 25500; j++) {if (imgData.data[i] !== 255) {imgData.data[i] = Math.min(imgData.data[i] + j, 0);}}}self.postMessage(imgData);}
});

效果

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux系统之DHCP服务配置

1、准备阶段 Windows&#xff08;客户端&#xff09;开启Vmnet8网卡Linux6&#xff08;服务端&#xff09;网络连接选择NAT模式&#xff0c;并配置IP地址为192.168.11.1/24Linux5&#xff08;客户端&#xff09;网络连接选择NAT模式将NAT的DHCP功能取消 2、DHCP服务器相关软件…

宝塔部署springboot vue ruoyi前后端分离项目,分离lib、resources

1、“文件”中创建好相关项目目录,并将项目相关文件传到对应目录 例如&#xff1a;项目名称/ #项目总目录 api/ #存放jar项目的Java项目文件 manage/ #vue管理后端界面 …

Vue3_对接声网实时音视频_多人视频会议

目录 一、声网 1.注册账号 2.新建项目 二、实时音视频集成 1.声网CDN集成 2.iframe嵌入html 3.自定义UI集成 4.提高进入房间速度 web项目需要实现一个多人会议&#xff0c;对接的声网的灵动课堂。在这里说一下对接流程。 一、声网 声网成立于2014年&#xff0c;是全球…

ARCGIS PRO DSK GraphicsLayer创建文本要素

一、判断GraphicsLayer层【地块注记】是否存在&#xff0c;如果不存在则新建、如果存在则删除所有要素 Dim GraphicsLayer pmap.GetLayersAsFlattenedList().OfType(Of ArcGIS.Desktop.Mapping.GraphicsLayer).FirstOrDefault() 获取当前map对象中的GetLayer图层 Await Queue…

DataKit之OpenGauss数据迁移工具

# 在讲openGauss和datakit之前&#xff0c;我先说下pgloader这个工具也支持将数据从mysql同步到openGauss或者postgresql&#xff0c;但是 注意了&#xff0c;官网明确说明了不支持视图和触发器的迁移&#xff0c;如果你只是迁移表结构和数据&#xff0c;那么这个既简单又快下面…

使用Go的tls库搭建HTTPS服务

文章目录 tls.go 中文文档使用OpenSSL生成证书Win系统安装openssl生成证书 HTTP情况下的通信编写服务器代码编写客户端代码 tls.go 中文文档 https://studygolang.com/pkgdoc 使用OpenSSL生成证书 Win系统安装openssl 安装地址 https://slproweb.com/products/Win32OpenSSL.…

设计模式17-适配模式

设计模式17-适配模式 动机定义与结构C代码推导总结应用具体应用示例 动机 在软件系统中由于应用环境的变化常常需要将一些现存的对象。放到新的环境中去应用。但是新环境要求的接口是这些现存对象所不满足的。那么这种情况下如何应对这种迁移的变化&#xff1f;如何既能利用现…

计算机毕业设计选题推荐-戏曲文化体验系统-Java/Python项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

Python自动发送邮件如何设置邮件内容格式?

Python自动发送邮件时&#xff0c;如何自动化发送HTML格式邮件&#xff1f; Python是一种功能强大且灵活的编程语言&#xff0c;广泛用于各种自动化任务&#xff0c;其中包括自动发送邮件。AokSend将介绍在使用Python自动发送邮件时&#xff0c;如何设置邮件内容的格式&#x…

【系统架构设计师】二十二、嵌入式系统架构设计理论与实践②

目录 五、嵌入式中间件 5.1 嵌入式中间件定义 5.2 嵌入式中间件的分类 六、嵌入式系统软件架构设计方法 6.1 基于架构的软件设计开发方法的应用 6.2 属性驱动的软件设计方法 6.2.1 ADD 开发方法的质量属性与场景 6.2.2 ADD 开发过程 6.3 实时系统设计方法 6.3.1 DART…

索引:SpringCloudAlibaba分布式组件全部框架笔记

索引&#xff1a;SpringCloudAlibaba分布式组件全部框架笔记 一推荐一套分布式微服务的版本管理父工程pom模板&#xff1a;Springcloud、SpringCloudAlibaba、Springboot二SpringBoot、SpringCloud、SpringCloudAlibaba等各种组件的版本匹配图&#xff1a;三Spring Cloud Aliba…

【MySQL篇】Percona XtraBackup标准化全库完整备份策略(第三篇,总共五篇)

&#x1f4ab;《博主介绍》&#xff1a;✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ &#x1f4ab;《擅长领域》&#xff1a;✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux&#xff0c;也在扩展大数据方向的知识面✌️…

C++初学(8)

8.1、string类简介 现在可以用string类型的变量而不是字符数组来存储字符串&#xff0c;string类也用的会比数组简单&#xff0c;同时提供了将字符串作为一种数据类型的表示方式。 要使用string类&#xff0c;必须在程序中包含头文件string。string类位于名称空间std中&#…

2024年8月1日 十二生肖 今日运势

小运播报&#xff1a;2024年8月1日&#xff0c;星期四&#xff0c;农历六月廿七 &#xff08;甲辰年辛未月丁酉日&#xff09;&#xff0c;法定工作日。今天建军节&#xff0c;祝保家卫国、英勇无畏的解放军战士们节日快乐&#xff01; 红榜生肖&#xff1a;龙、牛、猪 需要注…

使用CLI脚手架搭建Vue2项目

一、配置前端的环境 1、下载安装Node.js 网址&#xff1a;Node.js 中文网 (nodejs.com.cn) 参考&#xff1a;【简明图文教程】Node.js的下载、安装、环境配置及测试_node下载安装-CSDN博客 推荐安装路径C盘改为D盘 2、配置nodejs及环境变量【安装的时候勾选Add to PATH就不…

GPT 和 BERT 系列论文阅读总结

文章目录 1. GPT1.1 GPT的目的和任务1.2 GPT的实现1.2.1 Unsupervised pre-training1.2.2 Supervised fine-tuning1.2.3 特定任务的输入格式 2. BERT2.1 BERT的目的和任务2.2 BERT的实现2.2.1 Masked Language Model2.2.2 Next Sentence Prediction (NSP) 3. GPT-23.1 初见 pro…

2-51 基于matlab的IFP_FCM(Improved fuzzy partitions-FCM)

基于matlab的IFP_FCM&#xff08;Improved fuzzy partitions-FCM&#xff09;&#xff0c;改进型FCM(模糊C均值)聚类算法,解决了FCM算法对初始值设定较为敏感、训练速度慢、在迭代时容易陷入局部极小的问题。并附带了Box和Jenkins煤气炉数据模型辨识实例。程序已调通&#xff0…

基于单片机的电梯控制系统的设计

摘 要: 本文提出了一种基于单片机的电梯控制系统设计 。 设计以单片机为核心&#xff0c;通过使用和设计新型先进的硬件和控制程序来模拟和控制整个电梯的运行&#xff0c;在使用过程中具有成本低廉、 维护方便、 运行稳定 、 易于操作 、 安全系数高等优点 。 主要设计思路是…

RocketMQ消息发送基本示例(推送消费者)

消息生产者通过三种方式发送消息 1.同步发送:等待消息返回后再继续进行下面的操作 同步发送保证了消息的可靠性&#xff0c;适用于关键业务场景。 2.异步发送:不等待消息返回直接进入后续流程.broker将结果返回后调用callback函数,并使用 CountDownLatch计数 3.单向发送:只…

MySQL---JDBC

一、JDBC是什么&#xff1f; JDBC(Java Database Connectivity):是Java访问数据库的解决方案。 JDBC定义了一套标准的接口&#xff0c;即访问数据库的通用API&#xff0c;不同数据库的厂商根据各自数据库的特点实现这些接口。 JDBC希望用相同的方式访问不同的数据库&#xff0c…