当前位置: 首页 > news >正文

fabricjs 实现图像的二值化功能

一、效果图

在这里插入图片描述

二、图像二值化的作用

二值化是图像处理中常用的一种方法,其作用是将灰度图像转换为二值图像,即将图像中的像素点根据其灰度值分成两类:黑色和白色。这种处理方法可以帮助我们更清晰地识别图像中的目标,简化图像的复杂度,提高图像的处理速度和准确性。

三、实现思路

1、获取框选的图片,进行截图

<div><canvasref="grayCanvas":width="canvasProp.width":height="canvasProp.height"></canvas><canvasref="binaryCanvas":width="canvasProp.width":height="canvasProp.height"></canvas></div><!-- 隐藏的 canvas --><canvasref="hiddenCanvas":width="canvasProp.width":height="canvasProp.height"style="display: none;"></canvas>// 根据框选的数据,对原图进行截图getCanvasImageData() {const viewportTransform = this.fabricCanvas.viewportTransform;const zoom = this.fabricCanvas.getZoom();let selectedCoords = null;this.fabricCanvas.getObjects().forEach(rect => {const coords = [];const points = rect.get("aCoords");Object.keys(points).forEach(key => {let point = points[key];const actualX = (point.x - viewportTransform[4]) / zoom;const actualY = (point.y - viewportTransform[5]) / zoom;coords.push([Math.round(actualX), Math.round(actualY)]);});// 假设只有一个矩形对象,我们只需获取一个对象的坐标selectedCoords = coords;});if (selectedCoords) {// 获取矩形区域的最小和最大坐标const minX = Math.min(...selectedCoords.map(coord => coord[0]));const minY = Math.min(...selectedCoords.map(coord => coord[1]));const maxX = Math.max(...selectedCoords.map(coord => coord[0]));const maxY = Math.max(...selectedCoords.map(coord => coord[1]));const width = maxX - minX;const height = maxY - minY;// 从隐藏的 canvas 中获取选中区域的图像数据const ctx = this.$refs.hiddenCanvas.getContext("2d");return ctx.getImageData(minX, minY, width, height);}return null;},

页面中要有3个canvas,grayCanvas 画灰度图片,binaryCanvas画二值化图片,hiddenCanvas 画原始的图片便于截图

2、对图片进行灰度处理
转化为灰度图片,放在灰度画布中

  convertToGrayScale(imageData) {const data = imageData.data;for (let i = 0; i < data.length; i += 4) {const avg = 0.3 * data[i] + 0.59 * data[i + 1] + 0.11 * data[i + 2];data[i] = avg;data[i + 1] = avg;data[i + 2] = avg;}return imageData;},applyGrayScale() {const imageData = this.getCanvasImageData();const grayImageData = this.convertToGrayScale(imageData);const grayCtx = this.$refs.grayCanvas.getContext("2d");grayCtx.putImageData(grayImageData, 0, 0);this.applyThreshold();},

3、拖动滑块,根据阈值对图片进行二值化处理

    applyThreshold() {const grayCtx = this.$refs.grayCanvas.getContext("2d");const grayImageData = grayCtx.getImageData(0,0,this.canvasProp.width,this.canvasProp.height);const data = grayImageData.data;for (let i = 0; i < data.length; i += 4) {const avg = data[i];const value = avg > this.threshold ? 255 : 0;data[i] = value;data[i + 1] = value;data[i + 2] = value;}const binaryCtx = this.$refs.binaryCanvas.getContext("2d");binaryCtx.putImageData(grayImageData, 0, 0);},

4、添加滑块移动的监听

   this.fabricCanvas.on("object:modified", this.applyGrayScale);this.fabricCanvas.on("object:added", this.applyGrayScale);this.fabricCanvas.on("object:removed", this.applyGrayScale);

相关文章:

fabricjs 实现图像的二值化功能

一、效果图 二、图像二值化的作用 二值化是图像处理中常用的一种方法&#xff0c;其作用是将灰度图像转换为二值图像&#xff0c;即将图像中的像素点根据其灰度值分成两类&#xff1a;黑色和白色。这种处理方法可以帮助我们更清晰地识别图像中的目标&#xff0c;简化图像的复杂…...

修改本地hosts文件及外部访问机器本地hosts文件后,rancher UI网站仍然不能访问

原因排查 kubectl get svc # 输出&#xff1a; NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE kubernetes ClusterIP 10.96.0.1 <none> 443/TCP 4d17hkubectl get svc -A # 输出&#xff1a; NAMESPACE …...

西北潮榆林范儿,新榆林首个360°沉浸式剧场发布会闪耀亮相

这是一场城市更迭的未来大赏&#xff0c;也是一场商业蝶变的复合对话 8月3日&#xff0c;朗阁集团商业品牌发布会在榆林银杏熙悦酒店隆重启幕。朗阁集团董事长杨志成携众多集团领导出席&#xff1b;多家主流媒体代表联袂参加&#xff1b;喜茶、中影时光国际影城、汉堡王、鲍师傅…...

如何创建响应式移动端网页设计?最佳实践详解

移动端网页设计是一个耗时而复杂的过程开发&#xff0c;包括UI设计、UX设计、检测、发布、改进、维护和持续的错误修复。通过学习这篇文章&#xff0c;你将掌握什么是移动端网页&#xff0c;如何制作移动端网页&#xff0c;以及设计网页的技巧。 什么是移动端网页&#xff1f;…...

Python 如何进行Web抓取(BeautifulSoup, Scrapy)

Web抓取&#xff08;Web Scraping&#xff09;是一种从网站提取数据的技术。Python有许多用于Web抓取的库&#xff0c;其中最常用的是BeautifulSoup和Scrapy。 BeautifulSoup BeautifulSoup是一个用于解析HTML和XML文档的Python库&#xff0c;适合处理简单的Web抓取任务。它将…...

白骑士的PyCharm教学进阶篇 2.5 数据库连接与管理

系列目录 上一篇&#xff1a;白骑士的PyCharm教学进阶篇 2.4 Django开发支持 在Web开发中&#xff0c;数据库是必不可少的部分。PyCharm不仅是一款功能强大的IDE&#xff0c;还提供了丰富的数据库连接和管理工具&#xff0c;使开发者可以更方便地浏览和操作数据库。本篇将详细…...

(五)activiti-modeler 编辑器初步优化

最终效果&#xff1a; 1..首先去掉顶部的logo&#xff0c;没什么用&#xff0c;还占用空间。 修改modeler.html文件&#xff0c;添加样式&#xff1a; <style type"text/css"> #main-header{display: none; } #main{padding: 0px; } </style> 2.左边组…...

(学习总结12)C++类和对象3

C类和对象3 一、初始化列表二、类型转换三、static成员四、友元五、内部类六、匿名对象 以下代码环境在 VS2022。 一、初始化列表 之前我们实现构造函数时&#xff0c;初始化成员变量主要使用函数体内赋值&#xff0c;构造函数初始化还有⼀种方式&#xff0c;就是初始化列表&a…...

docxtpl,一个强大的 Python 库!

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 大家好&#xff0c;今天为大家分享一个强大的 Python 库 - docxtpl。 项目地址&#xff1a;https://docxtpl.readthedocs.io/en/latest/ 在日常工作中&#xff0c;自动生成和处理 Word 文档是一个常见需求。doc…...

捷途山海T2:超长续航,节能环保的驾驶新星

在当今的汽车市场中&#xff0c;消费者的购车选择日趋多样化&#xff0c;不再仅限于传统的燃油车。随着环保理念的深入人心以及人们对用车成本的日益关注&#xff0c;像捷途山海T2这样配备高效混动系统的车型逐渐受到大众的青睐。 捷途山海T2&#xff0c;以其杰出的节能性、强劲…...

[Day 45] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

區塊鏈的可擴展性挑戰 概述 區塊鏈技術在過去幾年中取得了顯著的進展&#xff0c;其去中心化、透明和安全的特性使其在金融、供應鏈管理、醫療等領域得到了廣泛應用。然而&#xff0c;區塊鏈技術的一個重大挑戰是其可擴展性。可擴展性是指系統能夠有效處理日益增長的數據和用…...

白骑士的PyCharm教学实战项目篇 4.3 自动化测试与持续集成

系列目录 上一篇&#xff1a; 在现代软件开发过程中&#xff0c;自动化测试与持续集成&#xff08;CI&#xff09;是确保代码质量和快速交付的关键环节。PyCharm作为一款强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;为自动化测试和持续集成提供了全面的支持。本…...

权限模块开发+权限与角色关联(完整CRUD)

文章目录 &#x1f31e; Sun Frame&#xff1a;SpringBoot 的轻量级开发框架&#xff08;个人开源项目推荐&#xff09;&#x1f31f; 亮点功能&#x1f4e6; spring cloud模块概览常用工具 &#x1f517; 更多信息1.easycode生成代码1.配置2.AuthPermissionDao.java剪切到mapp…...

llama神经网络的结构,llama-3-8b.layers=32 llama-3-70b.layers=80; 2000汉字举例说明

目录 llama-3-8b.layers=32 llama-3-70b.layers=80 llama神经网络的结构 Llama神经网络结构示例 示例中的输入输出大小 实际举例说明2000个汉字文本数据集 初始化词嵌入矩阵 1. 输入层 2. 嵌入层 3. 卷积层 4. 全连接层 llama-3-8b.layers=32 llama-3-70b.laye…...

单细胞数据怎么表现genes mRNA表达的热图?

愿武艺晴小朋友一定得每天都开心 #热图 library("ComplexHeatmap") exp <- AverageExpression(subset(fasting_memory, Celltype %in% c("Pre-B")), layer = "data", #即CPM值 features …...

Java聚合快递对接云洋系统小程序源码

&#x1f680;【物流新纪元】聚合快递如何无缝对接云洋系统&#xff0c;效率飙升秘籍大公开&#xff01;✨ &#x1f50d; 开篇揭秘&#xff1a;聚合快递的魅力所在 Hey小伙伴们&#xff0c;你是否还在为多家快递公司账号管理繁琐、订单处理效率低下而头疼&#xff1f;&#…...

MySQL——数据表的基本操作(三)修改数据表

有时候&#xff0c;希望对表中的某些信息进行修改&#xff0c;这时就需要修改数据表。所谓修改数据表指的是修改数据库中已经存在的数据表结构&#xff0c;比如&#xff0c;修改表名、修改字段名、修改字段的数据类型等。在 MySQL中&#xff0c;修改数据表的操作都是使用 ALTER…...

医学图像分割的基准:TransUnet(用于医学图像分割的Transformer编码器)器官分割

1、 TransUnet 介绍 TransUnet是一种用于医学图像分割的深度学习模型。它是基于Transformer模型的图像分割方法&#xff0c;由AI研究公司Hugging Face在2021年提出。 医学图像分割是一项重要的任务&#xff0c;旨在将医学图像中的不同结构和区域分离出来&#xff0c;以便医生可…...

java-swing编写学生成绩查询管理系统

本文是本人大二上实训项目-学生成绩查询管理系统&#xff0c;采用本项目使用Java、MySQL技术。界面框架由Java Swing搭建&#xff0c;用JDBC实现Java与MySQL的连接。 本项目适合初学java和mysql的同学&#xff0c;来做一些小项目来提升自己&#xff0c;因为兴趣所以想要做去尝…...

volatile浅解

volatile修饰的变量有两个特点 线程中修改了自己工作内存中的副本后&#xff0c;立即将其刷新到主内存工作内存中每次读取共享变量时&#xff0c;都会去主内存中重新读取&#xff0c;然后拷贝到工作内存 内存 -> CPU Cache -> CPU 如果没有volatile那么就会继续读取缓存…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...