前端融合图片mask
之前实现了tif文件的融合,现在实现图片的融合,效果如下
第一张是融合右边两张图的结果
我的思路是:
- 初始使用canvas加载原图,此时未显示标注
- 点击显示标注后,将原图和mask图传给worker
- worker接受数据后,转为blob格式再经过createImageBitmap处理拿到宽高
- 接着使用OffscreenCanvas渲染原地形图
- 再创建一个OffscreenCanvas处理地形mask图
- 将该地形mask的imageData值拿到,循环并处理对应的颜色
- 把处理后的mask图重新绘制回去
- 将处理后的mask的OffscreenCanvas绘制在地形图OffscreenCanvas上
- 最后将最新的地形图OffscreenCanvas进行转换返回给主线程
这是index.html代码:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">* {margin: 0;padding: 0;}h1 {position: absolute;top: 0;z-index: 99;color: red;}</style>
</head><body><input id="checkSVGLabel" type="checkbox" name=""> 显隐标注<br><!-- <img id="defaultImg" src="" alt=""> --><canvas id="canvas"></canvas><script type="text/javascript">// const terrainImageUrl = 'http://192.168.10.159:5502/images/orz.png'; // 替换为你的地形图URLconst terrainImageUrl = 'http://192.168.10.159:5502/images/orz5.png'; // 替换为你的地形图URLconst maskImageUrl = 'http://192.168.10.159:5502/images/mask1.png'; // 替换为你的黑底白框图URL// const terrainImageUrl = 'http://192.168.10.159:5502/images/orz3.jpg'; // 替换为你的地形图URL// const maskImageUrl = 'http://192.168.10.159:5502/images/mask4.jpg'; // 替换为你的黑底白框图URLconst canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');const checkSVGLabel = document.getElementById('checkSVGLabel');// const defaultImg = document.getElementById('defaultImg');let changeImgUrl = terrainImageUrllet imageWorker = nullfunction handleMaskImg (e){if (e.target.checked && imageWorker) {mergeMaskImg(terrainImageUrl, maskImageUrl, 'mergeMask')} else {mergeMaskImg(terrainImageUrl, maskImageUrl)}}// 融合色块function mergeMaskImg (orz, mask, type){if (type === 'mergeMask') {imageWorker.postMessage({orz,mask,type: 'creatMaskImg'})} else {const image = new Image();image.src = orz;image.onload = function (){canvas.width = image.width;canvas.height = image.height;ctx.drawImage(image, 0, 0);}}}function clearWorker (){if (worker) {worker.terminate()}worker = null}window.onload = function (){mergeMaskImg(terrainImageUrl, maskImageUrl)imageWorker = new Worker("../js/imageWorker.js")imageWorker.onmessage = (e) =>{const { type } = e.data;if (type === 'putMaskImg') {// 读取影像// defaultImg.src = e.data.dataUrl// 使用画布console.log(e)const { imageBitmap, canvasWidth, canvasHeight } = e.data;canvas.width = canvasWidth;canvas.height = canvasHeight;ctx.drawImage(imageBitmap, 0, 0, canvasWidth, canvasHeight);}}}checkSVGLabel.addEventListener('change', handleMaskImg);</script>
</body></html>
这是worker代码
self.addEventListener('message', async ({ data }) => {if (data.type === 'creatMaskImg') {let { orz, mask } = data// 加载地形图和蒙版图像const [terrainImage, maskImage] = await Promise.all([loadImageBitmap(orz),loadImageBitmap(mask)])const canvasWidth = terrainImage.widthconst canvasHeight = terrainImage.heightconst offscreenCanvas = new OffscreenCanvas(canvasWidth, canvasHeight)const ctx = offscreenCanvas.getContext('2d')// 绘制地形图ctx.drawImage(terrainImage, 0, 0, canvasWidth, canvasHeight)// 创建一个临时canvas来处理蒙版const tempCanvas = new OffscreenCanvas(maskImage.width,maskImage.height)const tempCtx = tempCanvas.getContext('2d')// 将黑底白框图绘制到临时canvastempCtx.drawImage(maskImage, 0, 0)// 获取图像数据const maskImageData = tempCtx.getImageData(0,0,tempCanvas.width,tempCanvas.height)const imgData = maskImageData.datafor (let i = 0; i < imgData.length; i += 4) {// 获取当前像素的RGB值const red = imgData[i]const green = imgData[i + 1]const blue = imgData[i + 2]if (red === 0 && green === 0 && blue === 0) {imgData[i + 3] = 0 // 透明度设置为0} else {if (red === 255 && green === 255 && blue === 255) {// 黑色// imgData[i] = 0// imgData[i + 1] = 0// imgData[i + 2] = 0// 紫色imgData[i] = 254imgData[i + 1] = 0imgData[i + 2] = 255imgData[i + 3] = imgData[i + 3] * 0.5// 透明图// imgData[i] = null// imgData[i + 1] = null// imgData[i + 2] = null}}}// 将处理后的蒙版图像数据放回临时canvastempCtx.putImageData(maskImageData, 0, 0)// 将临时canvas上的蒙版绘制到地形图上ctx.drawImage(tempCanvas, 0, 0, canvasWidth, canvasHeight)// ----------------- 传blob图像数据// 将处理后的 offscreenCanvas 转换为 Blob// const blob = await offscreenCanvas.convertToBlob()// const dataUrl = await blobToDataURL(blob)// self.postMessage({// dataUrl,// canvasWidth,// canvasHeight,// type: 'putMaskImg'// })// ----------------- 传canvas数据// 将处理后的 offscreenCanvas 转换为 ImageBitmap 并返回到主线程const imageBitmap = offscreenCanvas.transferToImageBitmap()self.postMessage({ imageBitmap, canvasWidth, canvasHeight, type: 'putMaskImg' },[imageBitmap])}
})async function loadImageBitmap(url) {const response = await fetch(url)const blob = await response.blob()return createImageBitmap(blob)
}function blobToDataURL(blob) {return new Promise((resolve, reject) => {const reader = new FileReader()reader.onloadend = () => resolve(reader.result)reader.onerror = rejectreader.readAsDataURL(blob)})
}
在worker中其实还可以将mask图片的黑色区域进行转换,也可以设置透明值,非常方便,如果不需要复杂的颜色处理,在处理后还可以结合mask-image去实现蒙版效果。
相关文章:
前端融合图片mask
之前实现了tif文件的融合,现在实现图片的融合,效果如下 第一张是融合右边两张图的结果 我的思路是: 初始使用canvas加载原图,此时未显示标注点击显示标注后,将原图和mask图传给workerworker接受数据后,转…...
什么是单元测试的“覆盖率”
1. 先搞清楚“覆盖率”是啥? 打个比方,你写完作业(代码),老师(测试)要检查是不是每道题都做对了。覆盖率就是说老师检查了多少题。比如: 行覆盖率:老师看了你作…...
SpringAI入门:对话机器人
SpringAI入门:对话机器人 1.引入依赖 创建一个新的SpringBoot工程,勾选Web、MySQL驱动、Ollama: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xm…...
[Java · 初窥门径] Java 语言初识
🌟 想系统化学习 Java 编程?看看这个:[编程基础] Java 学习手册 0x01:Java 编程语言简介 Java 是一种高级计算机编程语言,它是由 Sun Microsystems 公司(已被 Oracle 公司收购)于 1995 年 5 …...
大语言模型智能体:安全挑战与应对之道
在当今科技飞速发展的时代,大语言模型驱动的智能体正逐渐融入我们生活和工作的方方面面,给我们带来了诸多便利。但与此同时,它们的安全问题也引起了广泛的关注。今天,咱们就一起来深入了解一下可信大语言模型智能体所面临的安全挑…...
IHC肿瘤标志物 | 常见乳腺癌诊断——助力守护生命之花
乳腺癌作为一种常见的恶性肿瘤,严重威胁着女性健康。然而,随着医学技术的不断发展,我们有了更为精准和有效的检测方法,为及早发现和治疗乳腺癌提供了强有力的支持。 在这篇文章中,我们将深入了解乳腺癌的IHC检测技术&a…...
利用deepseek+Mermaid画流程图
你是一个产品经理,请绘制一个流程图,要求生成符合Mermaid语法的代码,要求如下: 用户下载文件、上传文件、删除文件的流程过程符合安全规范细节具体到每一步要做什么 graph LRclassDef startend fill:#F5EBFF,stroke:#BE8FED,str…...
Vue3 实战:打造多功能旅游攻略选项卡页面
在旅游类应用开发中,为用户提供全面、直观的信息展示界面至关重要。本文将分享如何基于 Vue3 Axios 技术栈,实现一个包含攻略、游记、问答三大板块的旅游攻略选项卡页面,从样式设计到交互逻辑,带你深入了解整个开发过程。 项目背…...
如何提高单元测试的覆盖率
一、定位未覆盖的代码 利用 IDEA 的覆盖率工具: 右键测试类 → Run with Coverage,或使用 AltShiftF10(Windows)打开运行菜单选择覆盖率。查看高亮标记: 绿色:已覆盖代码行。红色&#x…...
水位传感器详解(STM32)
目录 一、介绍 二、传感器原理 1.原理图 2.引脚描述 三、程序设计 main.c文件 water.h文件 water.c文件 四、实验效果 五、资料获取 项目分享 一、介绍 Water Sensor水位传感器是一款简单易用、性价比较高的水位/水滴识别检测传感器,其是通过具有一系列…...
linux服务器命令行获取nvidia显卡SN的方法
机房需要变更机器的GPU显卡配置,入库、出库几块显卡,库管让我去获取显卡序列号。 去现场拆机器的事情毕竟很麻烦,而且也没干过拆装服务器,即使拆下来显卡也不一定找到SN。 于是乎搜索:命令行怎么获取linux服务器上的…...
大模型微服务架构模块实现方案,基于LLaMA Factory和Nebius Cloud实现模型精调的标准流程及代码
以下是基于LLaMA Factory和Nebius Cloud实现模型精调的标准流程及代码示例,结合最新技术动态和行业实践整理: 一、LLaMA Factory本地部署方案 1. 环境配置 # 创建Python环境并安装依赖 conda create -n llama_factory python3.10 conda activate llam…...
每天学一个 Linux 命令(20):find
可访问网站查看,视觉品味拉满: http://www.616vip.cn/20/index.html find 是 Linux 系统中最强大的文件搜索工具之一,支持按名称、类型、时间、大小、权限等多种条件查找文件,并支持对搜索结果执行操作(如删除、复制、执行命令等)。掌握 find 可大幅提升文件管理效率…...
Kubernetes Pod 调度策略:从基础到进阶
文章目录 环境Kubernetes 部署Kubernetes Pod 调度策略Kubernetes Pod 调度策略对照表调度流程经历阶段案例展示生成yaml文件默认调度节点选择器为节点添加标签编写 Deployment 配置文件应用资源并查看调度结果 Node Affinity(节点亲和性)为节点添加标签…...
4.18学习总结
完成一道算法题 学习了序列化 敲代码卡bug了...
用于数学定理和逻辑推理的符号系统
当前用于数学定理和逻辑推理的前沿符号系统主要基于依赖类型论(Dependent Type Theory),其中Lean 4和**Metamath Zero (MM0)**是最具代表性的新兴系统。以下从技术特性、使用方法和应用实例三个维度展开说明: 一、前沿符号系统解…...
HTTP:九.WEB机器人
概念 Web机器人是能够在无需人类干预的情况下自动进行一系列Web事务处理的软件程序。人们根据这些机器人探查web站点的方式,形象的给它们取了一个饱含特色的名字,比如“爬虫”、“蜘蛛”、“蠕虫”以及“机器人”等!爬虫概述 网络爬虫(英语:web crawler),也叫网络蜘蛛(…...
代码学习总结(五)
代码学习总结(五) 这个系列的博客是记录下自己学习代码的历程,有来自平台上的,有来自笔试题回忆的,主要基于 C++ 语言,包括题目内容,代码实现,思路,并会注明题目难度,保证代码运行结果 1 小红的好数 简单 非退化三角形 快速匹配 小红定义一个数对 { x , y } \{x…...
在 Vue 3 项目中引入 js-cookie 库
1. 安装 js-cookie 你可以通过 npm 或者 yarn 来安装 js-cookie: npm install js-cookie # 或者 yarn add js-cookie2. 在组件里引入并使用 js-cookie 以下给出两种使用方式: 全局引入 在 main.js 中全局引入 js-cookie,这样在所有组件里…...
HarmonyOs学习 环境配置后 实验1:创建项目Hello World
HarmonyOS开发入门:环境配置与Hello World实验 实验目标 掌握HarmonyOS开发环境配置,创建首个HarmonyOS应用并实现"Hello World"界面展示 实验准备 已安装DevEco Studio开发环境已配置HarmonyOS开发依赖项熟悉基本TypeScript/ArkTS语法&am…...
Spark on K8s 在 vivo 大数据平台的混部实战与优化
一、Spark on K8s 简介 (一)定义与架构 Spark on K8s 是一种将 Spark 运行在 Kubernetes(K8s)集群上的架构,由 K8s 直接创建 Driver 和 Executor 的 Pod 来运行 Spark 作业。其架构如下。 Driver Pod:相当于 Spark 集群中的 Driver,负责作业的调度和管理,它会根据作业…...
《软件设计师》复习笔记(13)——结构化开发方法
目录 1. 结构化开发方法 1.1 系统分析过程 1.2 系统设计基本原理 (1)内聚性(模块内部关联程度) (2)耦合性(模块间依赖程度) 真题示例: 1.3 系统总体结构设计&…...
Android创建测试配置和生产配置
Android测试与生产环境配置指南 在Android开发中,创建不同的构建配置来适应测试和生产环境是至关重要的。这样的配置能让我们在不同的开发阶段有效管理代码、资源和环境变量。本文将详细介绍如何在Android中创建和管理测试配置以及生产配置的整个过程。 环境准备 …...
DBeaver连接hive
DBeaver是一个非常好用的数据库管理工具,支持多种不同的数据库类型。 dbeaver 要连接hive时,数据库驱动是无法下载,但在hive 的安装配置包中,有一个目录:jdbc里面有一个专门提供外部程序连接hive的jar。将这个jar下载…...
数据结构初阶:二叉树(二)
本篇博客主要讲解二叉树---堆的相关知识。 1.实现顺序结构二叉树 一般堆使用顺序结构的数组来存储数据,堆是一种特殊的二叉树,具有二叉树的特性的同时,还具备其他的特性。 1.1 堆的概念和结构 堆具有以下性质: 堆中某个结点的值…...
React 列表渲染基础示例
React 中最常见的一个需求就是「把一组数据渲染成一组 DOM 元素」,比如一个列表。下面是我写的一个最小示例,目的是搞清楚它到底是怎么工作的。 示例代码 // 定义一个静态数组,模拟后续要渲染的数据源 // 每个对象代表一个前端框架…...
android PackageName ClassName
目录 系统应用: 设置 蓝牙 时钟 计算机 录音机 图库 视频 文件管理 FM 日历 谷歌浏览器 谷歌商店 热门商店 国外应用: amazon spotify deezer pandora audible applemusic omnia mxtech youtubemusic facebook familylink tidal tiktok kindle 系统应用: 设置 …...
万物对接大模型:【爆火】MCP原理与使用指南
###原文链接 OpenAI、谷歌、微软、阿里云、腾讯云、百度等国内外各大厂商都陆续宣布支持MCP服务。MCP是什么,为什么能获得高度的关注? MCP(Model Context Protocol,模型上下文协议)是由Anthropic公司(核心产品是Claude大模型)推出的一种开源协议…...
SAP系统中MD01与MD02区别
知识点普及-MD01与MD02区别 1、从日常业务中,我们都容易知道MD01是运行全部物料,MD02是运行单个物料 2、在做配置测试中,也出现过MD02可以跑出物料,但是MD01跑不出的情况。 3、MD01与MD02的差异: 3.1、只要在物料主数…...
python——字符串使用
目录 1、字符串表示 2、转义字符 (1)将一些具有特殊含义的字符,标识成普通的字符(\) (2)特殊的控制符 (3)(\)还可以表示python中续行符 3、…...
嵌入式ARM RISCV toolchain工具 梳理arm-none-eabi-gcc
嵌入式TOOLchain工具 梳理 简介 本文总结和梳理一下一些toolchain的规则和原理,方便后续跨平台的时候,给大家使用toolchain做一个参考。 解释如何理解arm-none-eabi-gcc等含义,以及如何一看就知道该用什么编译器。 当然如果有哪里写的不是…...
团体程序设计天梯赛PTA-SHU冲刺赛4. L22-L32
这是4.18 SHU备赛天梯赛的最后一场冲刺赛 10.病毒溯源 1.本题PTA中拓栈后会MTL,不拓栈会报非零返回 所以本题最好用栈模拟递归过程 2.源头得是入度为0的,也就是没有节点指向它 所以得设置inn是否有指向该节点 3.这题用dfs(用bfs的话不同…...
【数据结构与算法】——插入排序
概要 本文将介绍插入排序方法——直接插入、希尔排序 想了解数据结构其他内容,本人主页 恋风诗 获取源码,gitte仓库:mozhengy 正文 1.排序的分类 目前将主要介绍下面几种排序: 后续学习更多内容后会及时更新 2、插入排序 2…...
手撕STL——vector
目录 引言 1,了解 STL 中的 vector 2,先来一个简易版跑起来 2_1,构造函数 2_2,扩容reserve() 2_3,push_back() 2_4,pop_back() …...
新书速览|DeepSeek移动端AI应用开发:基于Android与iOS
《DeepSeek移动端AI应用开发:基于Android与iOS》 1 本书内容 《DeepSeek移动端AI应用开发:基于Android与iOS》深入剖析了DeepSeek平台的架构原理、API调用及开发实践等核心内容,助力读者在Android与iOS移动端高效集成DeepSeek API,打造出契…...
详解STM32时基单元中参数 TIM_ClockDivision 的含义
在 STM32 定时器时基单元配置中,TIM_TimeBaseInitStruct->TIM_ClockDivision 用于设置 定时器时钟的分频系数,主要影响 输入捕获滤波器 和 输出比较同步信号 的时钟分割。以下是其核心作用、参数含义及应用场景的详细解析: 一、核心作用&…...
黑马V11版 最新Java高级软件工程师课程-JavaEE精英进阶课
课程大小:60.2G 课程下载:https://download.csdn.net/download/m0_66047725/90615581 更多资源下载:关注我 阶段一 中台战略与组件化开发专题课程 阶段二 【物流行业】品达物流TMS 阶段三 智牛股 阶段四 千亿级电商秒杀解决方案专题 …...
【Win】 cmd 执行curl命令时,输出 ‘命令管道位置 1 的 cmdlet Invoke-WebRequest 请为以下参数提供值: Uri: ’ ?
1.原因: 有一个名为 Invoke-WebRequest 的 CmdLet,其别名为 curl。因此,当您执行此命令时,它会尝试使用 Invoke-WebRequest,而不是使用 curl。 2.解决办法 在cmd中输入如下命令删除这个curl别名: Remov…...
【k8s系列4】工具介绍
1、虚拟机软件 vmware workstation 2、shell 软件 MobaXterm 3、centos7.9 下载地址 (https://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/?spma2c6h.25603864.0.0.374bf5adOaiFPW) 4、上网软件...
设计模式 --- 装饰器模式
装饰模式是一种结构型设计模式,它允许向一个现有的对象添加新的功能,同时又不改变其结构。这种模式创建了一个装饰类,用来包装原有的类,并在保持类方法签名完整性的前提下,提供了额外的功能。 优点: 1.灵…...
docker.desktop下安装普罗米修斯prometheus、grafana并看服务器信息
目标 在docker.desktop下先安装这三种组件,然后显示当前服务的CPU等指标。各种坑已踩,用的是当前时间最新的镜像 核心关系概述 组件角色依赖关系Prometheus开源监控系统,负责 数据采集、存储、查询及告警。依赖 Node-Exporter 提供的指标数据。Node-Exporter专用的 数据采集…...
学习设计模式《二》——外观模式
一、基础概念 1.1、外观模式的简介 外观模式的本质是【封装交互、简化调用】; 外观模式的说明:就是通过引入一个外观类,在这个类里面定义客户端想要的简单方法,然后在这些方法里面实现;由外观类再去分别调用内部的多个…...
python中,处理多分类时,模型之间的参数设置
在Python的机器学习库中,处理多分类问题时,不同的模型可能会有不同的参数设置来适应多分类场景。这里列举几个常见模型及相关的多分类参数: 1. Logistic Regression (逻辑回归) 在Scikit-Learn库中,逻辑回归模型可以通过设置mul…...
2025年03月中国电子学会青少年软件编程(Python)等级考试试卷(四级)真题
青少年软件编程(Python)等级考试试卷(四级) 分数:100 题数:38 答案解析:https://blog.csdn.net/qq_33897084/article/details/147341407 一、单选题(共25题,共50分) 1. 下列程序段…...
蓝桥杯12. 日期问题
日期问题 原题目链接 题目描述 小明正在整理一批历史文献。这些历史文献中出现了很多日期。 小明知道这些日期都在 1960 年 1 月 1 日 至 2059 年 12 月 31 日 之间。 令小明头疼的是,这些日期采用的格式非常不统一: 有的采用 年/月/日有的采用 月…...
【MATLAB代码例程】AOA与TOA结合的高精度平面地位,适用于四个基站的情况,附完整的代码
本代码实现了一种基于到达角(AOA) 和到达时间(TOA) 的混合定位算法,适用于二维平面内移动或静止目标的定位。通过4个基站的协同测量,结合最小二乘法和几何解算,能够有效估计目标位置,并支持噪声模拟、误差分析和可视化输出。适用于室内定位、无人机导航、工业监测等场景…...
ARINC818协议(五)
1.R_CTL,设置固定的0x44即可 2.Dest_ID:目的地D_ID,如果不需要目的地址,就设置为0;ADVB协议支持 多个视频目的地址,广播通信; 3.cs_ctl在FC-AV上不用 4.source_ID:S_ID [23:0]包含源实体的端口的地址标识;不用就设置为0. ADVB允许…...
国产品牌芯洲科技100V降压芯片系列
SCT2A25采用带集成环路补偿的恒导通时间(COT)模式控制,大大简化了转换器的片外配置。SCT2A25具有典型的140uA低静态电流,采用脉冲频率调制(PFM)模式,它使转换器在轻载或空载条件下实现高转换效率。 芯洲科技100V降压芯片系列提供丰富的48V系…...
遨游科普:三防平板除了三防特性?还能实现什么功能?
在工业4.0浪潮席卷全球的今天,电子设备的功能边界正经历着革命性突破。三防平板电脑作为"危、急、特"场景的智能终端代表,其价值早已超越防水、防尘、防摔的基础防护属性。遨游通讯通过系统级技术创新,将三防平板打造为集通信中枢、…...
边缘计算网关组态功能的定义
边缘计算网关组态功能的定义 边缘计算网关组态是指根据特定的应用场景和需求,对边缘计算网关进行配置和定制的过程。它涵盖了硬件接口的选择、软件功能的设定、通信协议的配置以及数据处理流程的设计等多个方面,旨在使网关设备更加贴合实际应用场景&…...