网站首页 > 基础教程 正文
前文我们写了如何做手动矫正,那需要用户手动框选需要矫正的四边形,而本文,我们简单地实现一种自动矫正,程序检测出图像中的四边形后,自动矫正,不需要手动框选四边形。
跟上文一样,我们的图片处理程序放在处理按钮的点击事件中:
changeImageElement.onclick = function () {
// 图片处理
}
首先读取图片:
let src = cv.imread("imageUpload");
接着做一些预处理,先灰度:
let dst = new cv.Mat();
cv.cvtColor(src, dst, cv.COLOR_BGR2GRAY, 0); // 转灰度
再高斯模糊:
cv.GaussianBlur(dst, dst, new cv.Size(3, 3), 0); // 高斯模糊
再Canny检测边缘:
cv.Canny(dst, dst, 75, 200); // 边缘检测
检测出边缘后,通过findContours找出所有轮廓:
let contours = new cv.MatVector();
let hierarchy = new cv.Mat();
cv.findContours(dst, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE)
然后从所有轮廓中找到面积最大的闭合轮廓:
let index = 0, maxArea = 0;
for (let i = 0; i < contours.size(); ++i) {
let tempArea = Math.abs(cv.contourArea(contours.get(i)));
if (tempArea > maxArea) {
index = i;
maxArea = tempArea;
}
}
如果把这个找到的轮廓显示出来,就是这样:
然后通过上面找到的轮廓进行多边形拟合,从而得到4个顶点:
const foundCours = contours.get(index);
const arcL = cv.arcLength(foundCtrue);
let tmp = new cv.Mat();
// 逼近多边形
cv.approxPolyDP(foundCours, tmp, 0.01 * arcL, true);
let points = [];
if (tmp.total() === 4) {
const data32S = tmp.data32S;
for (let i = 0, len = data32S.length / 2; i < len; i++) {
points[i] = { x: data32S[i * 2], y: data32S[i * 2 + 1] };
}
}
把points打印出来可以看到,已经得到了4个顶点坐标:
接着对4个顶点进行排序,从左上角开始,顺时针排序。
function getSortedVertex(points) {
const center = {
x: points.reduce((sum, p) => sum + p.x, 0) / 4,
y: points.reduce((sum, p) => sum + p.y, 0) / 4
}
let sortedPoints = []
sortedPoints.push(points.find(p => p.x < center.x && p.y < center.y))
sortedPoints.push(points.find(p => p.x > center.x && p.y < center.y))
sortedPoints.push(points.find(p => p.x > center.x && p.y > center.y))
sortedPoints.push(points.find(p => p.x < center.x && p.y > center.y))
return sortedPoints
}
调用上面的getSortedVertex可以得到排序后的顶点,我们将顶点依次放入数组srcPoints中:
let srcPoints = []
getSortedVertex(points).forEach(p => {
srcPoints.push(p.x, p.y)
})
接着和上文一样,进行透视变换即可,假设我们输出的图像宽408,高380,那么:
const dstPoints = [0, 0, 408, 0, 408, 380, 0, 380]
const srcTri = cv.matFromArray(4, 1, cv.CV_3srcPoints);
const dstTri = cv.matFromArray(4, 1, cv.CV_3dstPoints);
const M1 = cv.getPerspectiveTransform(srcTri, dstTri)
const dsize = new cv.Size(408, 380);
cv.warpPerspective(src, dst, M1, dsize)
最后把处理过的图像显示到画布中,不要忘记删除不用的Mat:
cv.imshow('canvasOutput', dst);
tmp.delete; src.delete(); dst.delete();
总结:
该算法实现比较简单。
在预处理中,还可以缩小图片,从而加快处理速度,最后找到的顶点坐标再放大。
也可能无法检测到四边形,从而无法得到4个顶点。
可以往两个方向优化。
1、检测时通过识别直线,再筛选直线,来找到四边形。
2、边缘检测神经网络。
但复杂的图像识别总有误差的可能,这时候手动就派上用场了。
不过简单的图像基本ok,比如银行卡照片的矫正:
- 上一篇: NodeJS性能调优之GC调优(值得收藏)
- 下一篇: 用友UAP马太航:解析移动开发中响应式布局
猜你喜欢
- 2024-12-23 JavaScript开源良心插件,纯前端网页图片剪裁插件——cropperjs
- 2024-12-23 用友UAP马太航:解析移动开发中响应式布局
- 2024-12-23 NodeJS性能调优之GC调优(值得收藏)
- 2024-12-23 Cycling 74 推出 Max 9 交互式编程 软件
- 2024-12-23 qunit/mocha/jest在nodejs下的集成测试原理分析
- 2024-12-23 JS基础与高级应用: 性能优化 css js性能优化
- 2024-12-23 LeetCode 力扣官方题解 | 1614. 括号的最大嵌套深度
- 2024-12-23 一个开源的拟物化设计风格的Vue组件库——qui-max
- 2024-12-23 FStorm Render v1.5.7J for 3dmax2016-2025(3dmax插件)安装教程
- 2024-12-23 兄弟们我忍不住下山了,买了个2022年产的RX580
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)