歡迎！您似乎正在使用廣告攔截器。請考慮通過禁用您的廣告攔截器來支持我。
welcome! It looks like you're using an ad blocker. Please consider supporting me by disabling your ad blocker.

J.J.'s Blogs

Like Share Discussion Bookmark Smile

J.J. Huang   2026-02-25   Python OpenCV 06.視訊與互動篇   瀏覽次數：次   DMCA.com Protection Status {{moment(1771981200000).fromNow()}}

Python | OpenCV 圖片與影片即時標記與繪圖

📚 前言

在前一篇我們學會了 滑鼠與鍵盤事件互動。
這一篇要介紹 圖片與影片即時標記與繪圖，並且加入滑鼠事件互動。
透過這項技術，我們可以在單張圖片或播放影片時，用滑鼠圈選矩形區域，動態標記內容。這在教學、監控或互動應用中非常常見。

🔎 原理說明

  • 圖片：載入單張圖片，透過滑鼠事件在圖片上繪製矩形。
  • 影片：逐幀讀取影片或攝影機影像，並在每一幀上根據滑鼠座標繪製矩形。
  • 滑鼠事件：透過 cv2.setMouseCallback() 監聽滑鼠操作。

🧠 函式與參數說明

📌 cv2.setMouseCallback()

設定滑鼠事件回呼函式

1
cv2.setMouseCallback(winname, onMouse)
  • winname：視窗名稱。
  • onMouse：滑鼠事件處理函式。

📌 cv2.rectangle()

繪製矩形

1
cv2.rectangle(img, pt1, pt2, color, thickness)
  • img：要繪製的圖片或影片幀。
  • pt1：左上角座標 (x1, y1)。
  • pt2：右下角座標 (x2, y2)。
  • color：矩形顏色 (B, G, R)。
  • thickness：邊框粗細，若設為 -1 則填滿矩形。

💻 範例程式一 — 圖片即時滑鼠繪圖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import cv2

img = cv2.imread("test.png")
backup = img.copy()

drawing = False
start_point = None
end_point = None

def mouse_event(event, x, y, flags, param):
    global drawing, start_point, end_point, img

    if event == cv2.EVENT_LBUTTONDOWN:   # 左鍵按下，開始框選
        drawing = True
        start_point = (x, y)

    elif event == cv2.EVENT_MOUSEMOVE and drawing:  # 框選過程
        img = backup.copy()
        cv2.rectangle(img, start_point, (x, y), (0, 0, 255), 2)

    elif event == cv2.EVENT_LBUTTONUP:   # 左鍵放開，完成框選
        drawing = False
        end_point = (x, y)
        cv2.rectangle(img, start_point, end_point, (0, 255, 0), 2)

cv2.namedWindow("Image Drawing")
cv2.setMouseCallback("Image Drawing", mouse_event)

while True:
    cv2.imshow("Image Drawing", img)
    if cv2.waitKey(1) & 0xFF == ord('q'):  # 按下 q 鍵退出
        break

cv2.destroyAllWindows()


圖：圖片即時滑鼠繪圖，使用滑鼠框選矩形區域

💻 範例程式二 — 影片即時滑鼠繪圖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import cv2

cap = cv2.VideoCapture("video.mp4")

drawing = False
start_point = None
end_point = None

def mouse_event(event, x, y, flags, param):
    global drawing, start_point, end_point

    if event == cv2.EVENT_LBUTTONDOWN:   # 左鍵按下，開始框選
        drawing = True
        start_point = (x, y)

    elif event == cv2.EVENT_MOUSEMOVE and drawing:  # 框選過程
        end_point = (x, y)

    elif event == cv2.EVENT_LBUTTONUP:   # 左鍵放開，完成框選
        drawing = False
        end_point = (x, y)

cv2.namedWindow("Video Drawing")
cv2.setMouseCallback("Video Drawing", mouse_event)

while True:
    ret, frame = cap.read()
    if not ret:
        break

    # 如果正在框選或已完成框選，畫矩形
    if start_point and end_point:
        cv2.rectangle(frame, start_point, end_point, (0, 0, 255), 2)

    cv2.imshow("Video Drawing", frame)

    if cv2.waitKey(30) & 0xFF == ord('q'):  # 按下 q 鍵退出
        break

cap.release()
cv2.destroyAllWindows()


圖：影片即時滑鼠繪圖，使用滑鼠框選矩形區域

⚠️ 注意事項

  • 滑鼠事件必須綁定在 cv2.namedWindow() 建立的視窗上。
  • 框選座標需在圖片或影片範圍內，否則會出錯。
  • 在圖片範例中使用 backup.copy()，避免矩形疊加造成畫面混亂。
  • 在影片範例中需依影片 FPS 調整 cv2.waitKey() 的數值，常用 30 毫秒。

📊 應用場景

  • 圖片標註：在圖片上框選重點區域。
  • 教學影片標註：在影片中即時框選重點。
  • 監控系統：即時標記偵測到的物件。
  • 互動應用：讓使用者在圖片或影片中自由繪製。

🎯 結語

本篇我們學會了如何使用 OpenCV 圖片與影片即時標記與繪圖，透過滑鼠事件在圖片或影片中框選矩形。
這樣的互動方式讓標記更靈活，後續可以延伸到 即時馬賽克或模糊處理，打造更實用的影像應用。

📖 如在學習過程中遇到疑問，或是想了解更多相關主題，建議回顧一下 Python | OpenCV 系列導讀，掌握完整的章節目錄，方便快速找到你需要的內容。

註：以上參考了
OpenCV Tutorials
OpenCV-Python Tutorials
Pexels — 免費影片素材

本文由J.J. Huang 創作，採用CC BY 3.0 TW協議 進行許可。可自由轉載、引用，但需署名作者且註明文章出處。