学习opencv.js(1)图像入门
目标:了解如何阅读图像以及如何在网络中显示它。
读取图像:OpenCV.js 将图像保存为cv.Mat类型。我们使用 HTML 画布元素将cv.Mat传输到网络或反向传输。ImageData 接口可以表示或设置画布元素区域的底层像素数据。
1.从画布创建一个 ImageData对象
let canvas = document.getElementById(canvasInputId);
let ctx = canvas.getContext('2d');
let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
2.使用 cv.matFromImageData 构造一个cv.Mat
let src = cv.matFromImageData(imgData);
note:因为canvas只支持连续存储的8位RGBA图像,所以cv.Mat类型为cv.CV_8UC4。它与原生 OpenCV 不同,因为原生imread和imshow返回和显示的图像具有按 BGR 顺序存储的通道。
显示图像:
1.首先将src的类型转换为cv.CV_8UC4
let dst = new cv.Mat();
// scale and shift are used to map the data to [0, 255].
src.convertTo(dst, cv.CV_8U, scale, shift);
// *** is GRAY, RGB, or RGBA, according to src.channels() is 1, 3 or 4.
cv.cvtColor(dst, dst, cv.COLOR_***2RGBA);
2.从 dst 新建一个 ImageData
let imgData = new ImageData(new Uint8ClampedArray(dst.data, dst.cols, dst.rows);
3.显示它
let canvas = document.getElementById(canvasOutputId);
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = imgData.width;
canvas.height = imgData.height;
ctx.putImageData(imgData, 0, 0);
在 OpenCV.js 中
Parameters参数
imageSource | canvas element or id, or img element or id. |
Returns返回
具有以 RGBA 顺序存储的通道的垫子(mat)。
我们使用cv.imshow (canvasSource, mat)来显示它。该函数可以根据垫子(mat)的深度缩放垫子(scale the mat):
- 如果 mat 是 8 位无符号的,则按原样显示。
- 如果 mat 是 16 位无符号或 32 位整数,则像素除以 256。即取值范围 [0,255*256] 映射到 [0,255]。
- 如果 mat 是 32 位浮点,则像素值乘以 255。即值范围 [0,1] 映射到 [0,255]。
参数
canvasSource | canvas element or id. |
mat | mat to be shown. |
上面的图像读取和显示代码可以简化如下:
let img = cv.imread(imageSource);
cv.imshow(canvasOutput, img);
img.delete();
let src = cv.imread('canvasInput');
let dst = new cv.Mat();
// To distinguish the input and output, we graying the image.
// You can try different conversions.
cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
cv.imshow('canvasOutput', dst);
src.delete();
dst.delete();
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div><div class="inputoutput"><img id="imageSrc" alt="No Image" /><div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div></div><div class="inputoutput"><canvas id="canvasOutput" ></canvas><div class="caption">canvasOutput</div></div>
</div>
<script type="text/javascript">
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function() {let src = cv.imread(imgElement);let dst = new cv.Mat();// To distinguish the input and output, we graying the image.// You can try different conversions.cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);cv.imshow('canvasOutput', dst);src.delete();dst.delete();
};
function onOpenCvReady() {document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>
结果:
学习opencv.js(1)图像入门相关推荐
- cv2.error: opencv(4.4.0)_【从零学习OpenCV 4】图像金字塔
点击上方"小白学视觉",选择"星标"公众号 重磅干货,第一时间送达 经过几个月的努力,小白终于完成了市面上第一本OpenCV 4入门书籍<从零学习Open ...
- opencv4 c++ 提取图片中的白色区域_修正!【从零学习OpenCV 4】分割图像——分水岭法...
点击上方"小白学视觉",选择"星标"公众号重磅干货,第一时间送达 经过几个月的努力,小白终于完成了市面上第一本OpenCV 4入门书籍<OpenCV 4开 ...
- opencv十四天入门学习——task1
opencv十四天入门学习--task1 前言 1.计算机视觉简介 2.计算机视觉框架 2.1 传统框架 2.2 深度学习训练框架 2.3 深度学习部署框架 2.4 当前业界主流框架应用 3.open ...
- OpenCV-Java版学习(2.图像入门)
前言 上一篇博客我们讲了如何在IDEA中使用OpenCV来进行一些简单的图像操作,这节我们来学习图像的一些基本的入门级操作. 图像入门 一.在Java中使用OpenCV注意事项 1.解决awt报错问题 ...
- opencv进阶学习笔记13:图像形态学操作大全(膨胀,腐蚀,开闭,黑帽,顶帽,梯度)python版
基础版学习笔记: python3+opencv学习笔记汇总目录(适合基础入门学习) 进阶版笔记目录链接: python+opencv进阶版学习笔记目录(适合有一定基础) 基础版形态学: opencv学 ...
- opencv进阶学习笔记10:图像金字塔和图像梯度
基础版笔记传送门: python3+opencv学习笔记汇总目录(适合基础入门学习) 进阶版笔记目录链接: python+opencv进阶版学习笔记目录(适合有一定基础) 图像金字塔 变小 变大 原理 ...
- opencv学习笔记19:图像金字塔和图像拉普拉斯金字塔 (用于图像放大和缩小)
图像金字塔原理 图像金字塔:只不同分辨率,不同尺寸子图构成的集合. 取样 向下取样:有一个图像G0,对它重新采样,得到分辨率小些的G1,以此类推. 向上取样:有一个图像G3,然后变成像素更多的G2,以 ...
- opencv学习笔记14:图像礼帽,图像黑帽
python + OpenCV 图像礼帽 图像礼帽 也叫图像顶帽 礼帽图像=原始图像-开运算图像 得到噪声图像 开运算:先腐蚀再膨胀 使用对象:二值图像 使用方法:morphologyEx cv2.M ...
- opencv学习笔记12:图像腐蚀和图像膨胀
语言:python+opencv 为什么使用图像腐蚀和图像膨胀 如图,使用图像腐蚀进行去噪,但是为压缩噪声. 对腐蚀过的图像,进行膨胀处理,可以去除噪声,并保持原样形状. 图像腐蚀 腐蚀主要针对的是二 ...
最新文章
- python 爬取图片_使用python爬取英雄联盟官方英雄皮肤图片
- 剑指offer十二:数值的n次方
- div+css如何让一行内的文字两端对齐?
- mysql 造1亿条记录的单表--大数据表
- oracle11g 读写,oracle11g pysical standby开启临时读写
- 计算机辅助抗体设计,计算机辅助设计提高单克隆抗体亲和力的研究
- 【java】深入了解JAVA可变长度的参数
- dill:解决python的“AttributeError: Can‘t pickle local object”及无法pickle lambda函数的问题
- calc(~,mac电脑set-cookies要域名和请求域名相同
- Android 高德获取经纬度工具类
- 亲测有效,推荐4款好用的录屏软件
- SpringBoot整合WebService实例
- 保障系统迁移服务器搬迁,整体中心机房搬迁服务器idc数据迁移方案应用场景
- 阿里巴巴国际站关键词的收集
- Java向数据库中插入数据出错时怎么避免插入错误数据
- 佛祖保佑注释代码(内含神兽与美女)
- 简单实现thinkPHP的excel导出
- Python编程课程好学吗?能学会吗?
- Java中使用es条件构造器BoolQueryBuilder
- Unity使用Newtonsoft.Json插件实现XML与JSON数据的互转
热门文章
- html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
- 模拟多线程并发订单处理功能实现
- FlexiTimer2库下载 无偿 分享 仅供学习
- 真香!安利 6 个 Python 数据分析神器
- OpenGL学习笔记(七)-深度测试-模板测试-混合
- 掘金 Web 沸点优化 1.1 版本上线啦~
- 人人都是心理学家,mbti等
- 计算机中的信息表示教学计划,人教版小学五年级信息技术教学计划(小编推荐)...
- 简单python网络爬虫批量下载视频
- APL开发日志--2012-12-03