企业官网建设流程全解析

前面已经连续做了图片清晰度检测、图像差异检测、主色提取和自动纠偏，这次继续做一个简单直观的 OpenCV 小工具：

Canny 边缘检测可视化工具。

平时在做图像处理时，经常会看到 Canny 这个名字。

它可以把一张普通图片转成一张只保留轮廓和边缘的结果图。

但很多刚开始接触 OpenCV 的人会有一个问题：

Low Threshold 和 High Threshold 到底是什么意思？

所以这次我用华为云码道辅助开发了一个简单的页面，把这两个参数直接做成滑块，可以一边调参数，一边看边缘结果。

一、这个工具能做什么？

功能保持得比较简单。

目前支持：

• 上传 JPG / PNG 图片
• 使用 OpenCV Canny 进行边缘检测
• 设置 Low Threshold
• 设置 High Threshold
• 显示原图
• 显示边缘检测结果
• 统计 Edge Pixel Count
• 下载边缘图 PNG

整个流程就是：

上传图片
↓
设置 Canny 参数
↓
生成边缘图
↓
显示 Edge Pixel Count
↓
下载结果

二、Canny 是做什么的？

Canny 是一种经典的边缘检测算法。

它的目标很简单：

找到图像中灰度变化比较明显的位置。

比如一张图片中的：

人物轮廓
建筑边缘
树叶边缘
文字边缘
物体交界处

这些地方通常会有比较明显的像素变化。

Canny 就会把这些位置提取出来。

最终输出通常是一张黑白图：

黑色区域：

没有明显边缘

白色区域：

检测到边缘

三、这次核心代码其实很简单

OpenCV 中进行 Canny 边缘检测的核心代码只有一行：

cv2.Canny(gray, low_threshold, high_threshold)

完整流程可以理解成：

原图
↓
灰度化
↓
Canny
↓
边缘结果

其中最重要的两个参数就是：

Low Threshold

和：

High Threshold

四、Low Threshold 和 High Threshold 是什么意思？

这两个参数共同决定：

哪些边缘应该留下。

简单理解：

High Threshold 用来判断：

“这个边缘是不是足够强？”

如果一个位置的梯度高于 High Threshold，就更容易被认为是强边缘。

Low Threshold 则用于处理相对弱一些的边缘。

如果某些较弱的边缘和强边缘相连，也有可能被保留下来。

所以两个参数配合以后，可以避免：

边缘太多

或者：

边缘太少

的问题。

五、真实测试参数

这次使用的是一张狗狗公园图片。

图片尺寸：

1536 × 1024

设置：

Low Threshold：

50

High Threshold：

150

然后点击：

Generate edges

程序最终成功生成了边缘图。

六、最终检测到了 116,309 个边缘像素

这次页面最终统计：

Edge Pixel Count：116,309

也就是说，在：

1536 × 1024

这张图片中，有 116,309 个像素被当前参数判断为边缘像素。

这并不是说：

“图片里有 116,309 条边”。

而是表示：

边缘结果图中有 116,309 个像素属于检测到的边缘区域。

七、实际效果怎么样？

从结果图中可以看到很多细节都被提取出来了。

比如：

狗狗毛发
耳朵轮廓
脸部边缘
草地纹理
树叶
建筑物轮廓
湖边结构

都能在 Edge Result 中看到。

特别是狗狗毛发这种纹理比较丰富的区域，会产生很多细小边缘。

所以这一组参数：

Low = 50
High = 150

得到的边缘结果还是比较丰富的。

八、为什么阈值低会出现更多边缘？

如果把阈值设置得比较低，

一些比较弱的灰度变化也可能被保留下来。

所以结果中会出现更多：

细节
纹理
弱边缘

比如：

草地
毛发
树叶

这些区域就会产生大量白色边缘。

如果把阈值调高，

程序就会更加严格。

最后可能只保留：

建筑轮廓
狗狗外轮廓
比较明显的结构线

所以 Canny 并不存在一组适合所有图片的固定参数。

通常还是要根据图像内容进行调整。

九、Edge Pixel Count 有什么用？

这次我额外统计了：

Edge Pixel Count

它可以用来简单观察：

当前参数提取出了多少边缘。

比如同一张图片：

阈值低
→ Edge Pixel Count 通常更高

阈值高
→ Edge Pixel Count 通常更低

所以这个数字虽然不是一个专业图像质量指标，

但很适合辅助观察：

参数变化到底让结果发生了多大变化。

十、Canny 可以用在哪里？

虽然这次只是做了一个可视化小工具，但 Canny 实际上是很多传统计算机视觉流程里的基础步骤。

例如：

轮廓检测
直线检测
文档边缘检测
车道线检测
形状分析
目标区域定位

前面做自动纠偏的时候，用到的：

HoughLinesP

其实也经常会先配合 Canny 使用。

也就是：

原图
↓
Canny 找边缘
↓
Hough 找直线

所以这次这个小工具，也正好把前一篇自动纠偏中的一个核心步骤单独拿出来做了可视化。

十一、为什么这次还是不做复杂功能？

最近这几篇都是一个思路：

一个小项目解决一个具体问题。

这次技术栈依然只有：

Python
OpenCV
FastAPI
原生 HTML / CSS / JavaScript

没有加入：

数据库
账号系统
复杂前端框架
深度学习模型

功能也只有：

上传
调参数
生成结果
下载

对于学习 Canny 来说，这样反而更直观。

总结

这次用华为云码道辅助开发了一个：

OpenCV Canny 参数可视化工具。

核心流程：

上传图片
↓
灰度化
↓
设置 Low Threshold
↓
设置 High Threshold
↓
Canny Edge Detection
↓
统计 Edge Pixel Count
↓
显示边缘图

真实测试参数：

图片尺寸：

1536 × 1024

Low Threshold：

50

High Threshold：

150

最终：

Edge Pixel Count：116,309

从结果中可以看到，狗狗、草地、树木和建筑等区域的轮廓都被成功提取出来。

前面几篇分别回答了：

图片糊不糊？
两张图片哪里不一样？
图片主要是什么颜色？
图片歪了怎么办？

这一篇则回答：

图片里的边缘到底怎么提取？

下一篇可以继续做一个同样简单的 OpenCV 小工具：

图片里有几个明显轮廓？用华为云码道开发 OpenCV 轮廓检测工具

直接在 Canny 结果基础上继续：

findContours()→ 找轮廓 → 过滤小区域 → 给目标画框。