用OpenCV打造一個(gè)顏色提取器！附源碼

點(diǎn)擊下方“AI算法與圖像處理”，一起進(jìn)步！
重磅干貨，第一時(shí)間送達(dá)

概述

在本文中，我們將制作一個(gè)非常有趣的應(yīng)用程序，即顏色選擇器，它有很多用例，但這個(gè)應(yīng)用程序的主要用例是它可以被 UI/UX 設(shè)計(jì)師廣泛使用，他們從圖像中選擇顏色并獲取它們的顏色代碼，為此，我們將使用計(jì)算機(jī)視覺(jué)和圖像處理的概念。因此，在本文中，我們將了解使用計(jì)算機(jī)視覺(jué)的顏色選擇器的概念。

讓我們開(kāi)始吧！

import?cv2
import?pandas?as?pd
import?matplotlib.pyplot?as?plt

1. cv2：這個(gè)庫(kù)是用來(lái)執(zhí)行所有的計(jì)算機(jī)視覺(jué)操作——基本上是所有需要的圖像處理操作。
2. pandas：在處理機(jī)器學(xué)習(xí)問(wèn)題時(shí)，Pandas 通常有很多范圍，但在本主題中，它們僅用于讀取 CSV 文件并從中提取一些信息。
3. matplotlib： Matplotlib 與可視化數(shù)據(jù)有很大關(guān)系，盡管在這里它將用于繪制圖像。

image_location?=?'colorpic.jpg'
test?=?cv2.imread(image_location)
plt.imshow(test)
plt.show()

輸出：

代碼分解：

1. 首先，我們?cè)谧兞恐斜４鎴D像的路徑，使用圖像的名稱(chēng)，而不是確切的路徑，因?yàn)樗c我們的 Jupyter Notebook位于同一路徑中。
2. 現(xiàn)在借助cv2 的 read() 函數(shù)，我們將讀取 NumPy 數(shù)組格式的圖像并將其存儲(chǔ)在測(cè)試變量中。如果我們只打印出測(cè)試變量，那么它只會(huì)以數(shù)組格式顯示圖像。
3. 現(xiàn)在我們將使用 Matplotlib 的 show() 函數(shù)來(lái)查看我們讀取的圖像。

cv2.imshow() VS plt.imshow()

這里出現(xiàn)了一個(gè)問(wèn)題，因?yàn)槭煜?OpenCV 的人很清楚，為了顯示圖像，我們理想地使用cv2.imshow函數(shù)，但澄清一件事，在這里看到結(jié)果cv2.Imshow函數(shù)不會(huì)工作，它只會(huì)使內(nèi)核崩潰，當(dāng)你搜索這個(gè)問(wèn)題時(shí)，你會(huì)發(fā)現(xiàn)在客戶(hù)端服務(wù)器(Jupiter notebook)使用cv2.imshow函數(shù)是沒(méi)有意義的，因此我們使用matplotlib (plt.imshow)將結(jié)果以圖像的形式繪制出來(lái)。

讓我們聲明一些可以與整個(gè)代碼一起訪(fǎng)問(wèn)的全局變量。

flag_variable?=?False
red_channel?=?g_channel?=?b_channel?=?x_coordinate?=?y_coordinate?=?0

代碼分解：

1. 在這里，首先我們?nèi)×艘粋€(gè)標(biāo)志變量，它將指示我們是否單擊了圖像，可以看到默認(rèn)值為 false 即未單擊圖片，而 True 值表示已單擊圖片。
2. 然后有紅色、綠色和藍(lán)色通道（RGB）以及 X 和 Y 坐標(biāo)，現(xiàn)在設(shè)置為 0，但只要我們?cè)趫D像周?chē)苿?dòng)并從中選擇顏色，這些值就會(huì)改變.

現(xiàn)在我們將讀取彩色 CSV 文件并為每一列指定標(biāo)題名稱(chēng)。

heading?=?["Color",?"Name?of?color",?"Hexadecimal?code",?"Red?channel",?"Green?channel",?"Blue?channel"]
color_csv?=?pd.read_csv('colors.csv',?names=heading,?header=None)

代碼分解：

1. 我們正在設(shè)置彩色 CSV 文件將具有的標(biāo)題名稱(chēng)。
2. 然后我們將在 read_csv 函數(shù)的幫助下讀取 color.csv 文件。

• 注意：此顏色 CSV 文件具有顏色的名稱(chēng)、十六進(jìn)制代碼、RGB 值，我們將僅比較此 CSV 文件中的值。

現(xiàn)在，我們將創(chuàng)建函數(shù)來(lái)獲取顏色的名稱(chēng)（get_color_name）。

def?get_color_name(Red,?Green,?Blue):
????minimum?=?10000
????for?i?in?range(len(color_csv)):
????????distance?=?abs(Red?-?int(color_csv.loc[i,?"Red?channel"]))?+?abs(Green?-?int(color_csv.loc[i,?"Green?channel"]))?+?abs(Blue?-?int(color_csv.loc[i,?"Blue?channel"]))
????????if?distance?<=?minimum:
????????????minimum?=?distance
????????????color_name?=?color_csv.loc[i,?"Name?of?color"]
????return?color_name

代碼分解：

1. 因此，首先我們將閾值設(shè)置為 10000，即實(shí)際顏色代碼與我們從圖像中選擇顏色時(shí)得到的顏色代碼之間的最小閾值距離。
2. 然后我們計(jì)算了顏色代碼與圖像的距離。
3. 現(xiàn)在我們將看到我們計(jì)算的距離應(yīng)該小于或等于閾值距離。
4. 最后，我們將從CSV 文件中存儲(chǔ)顏色的名稱(chēng)并返回它。

現(xiàn)在我們將創(chuàng)建函數(shù)來(lái)獲取坐標(biāo)（draw_function）

def?draw_function(event,?x_coordinate,?y_coordinate,?flags,?parameters):
????if?event?==?cv2.EVENT_LBUTTONDBLCLK:
????????global?b,?g,?r,?x_position,?y_position,?flag_variable
????????flag_variable?=?True
????????x_position?=?x_coordinate
????????y_position?=?y_coordinate
????????b,?g,?r?=?test[y_coordinate,?x_coordinate]
????????b?=?int(b)
????????g?=?int(g)
????????r?=?int(r)

代碼分解：

因此，在分解代碼之前，我想提一下它擁有的功能。當(dāng)用戶(hù)雙擊任何顏色時(shí)，此函數(shù)將返回 X 和 Y 坐標(biāo)的值以及相應(yīng)的 RGB 位置。

1. 首先，我們將檢查用戶(hù)是否雙擊，我們將使用cv2 中的 EVENT_LBUTTONDBLCLK。
2. 然后我們將flag_variable 設(shè)置為 True，因?yàn)楝F(xiàn)在單擊了按鈕。
3. 然后是函數(shù)的主要部分，我們將在全局變量中存儲(chǔ)坐標(biāo)值及其對(duì)應(yīng)的 RGB 值。
4. 最后，我們將使用 int() 將值轉(zhuǎn)換為整數(shù)類(lèi)型。

cv2.namedWindow('image')
cv2.setMouseCallback('image',?draw_function)

鼠標(biāo)回調(diào)：這是 cv2 方法，它將檢測(cè)用戶(hù)的點(diǎn)擊（右、左或雙擊）并調(diào)用繪圖函數(shù)。

while?True:

????cv2.imshow("image",?test)
????if?flag_variable:

????????cv2.rectangle(test,?(20,?20),?(750,?60),?(b,?g,?r),?-1)
????????text?=?get_color_name(r,?g,?b)?+?'?R='?+?str(r)?+?'?G='?+?str(g)?+?'?B='?+?str(b)
????????cv2.putText(test,?text,?(50,?50),?2,?0.8,?(255,?255,?255),?2,?cv2.LINE_AA)
??????
????????if?r?+?g?+?b?>=?600:
????????????cv2.putText(test,?text,?(50,?50),?2,?0.8,?(0,?0,?0),?2,?cv2.LINE_AA)

????????flag_variable?=?False
????
????if?cv2.waitKey(20)?&?0xFF?==?27:
????????break

cv2.destroyAllWindows()

輸出：

代碼分解：

1. 在主邏輯中，首先我們將創(chuàng)建一個(gè)矩形（填充：-1 用于填充矩形），我們將在其上放置我們的文本。
2. 現(xiàn)在我們將獲得文本字符串，其顏色代碼為 RGB。
3. 然后在 put text 方法的幫助下，我們將在之前繪制的矩形上方顯示文本。
4. 如果顏色為淺色，我們會(huì)驗(yàn)證，然后我們將以黑色顯示文本字符串。
5. 最后，我們可以選擇使用 esc 鍵退出應(yīng)用程序。

總結(jié)

1. 首先，我們已經(jīng)導(dǎo)入了所有的庫(kù)。
2. 然后我們加載并繪制選定的圖像。
3. 然后我們?yōu)槲覀兊牟噬?CSV 文件提供了標(biāo)題。
4. 我們還創(chuàng)建了獲取顏色名稱(chēng)函數(shù)和繪制函數(shù)，以在用戶(hù)雙擊任何顏色時(shí)查看圖像上的結(jié)果。
5. 然后應(yīng)用程序循環(huán)執(zhí)行所有步驟。

因此，通過(guò)執(zhí)行上述步驟，我們可以開(kāi)發(fā)一個(gè)使用計(jì)算機(jī)視覺(jué)的顏色選擇器應(yīng)用程序。

尾注

這是本文的 github 鏈接：https://github.com/Aman-Preet-Singh-Gulati/color-picker-application

努力分享優(yōu)質(zhì)的計(jì)算機(jī)視覺(jué)相關(guān)內(nèi)容，歡迎關(guān)注：

交流群

歡迎加入公眾號(hào)讀者群一起和同行交流，目前有美顏、三維視覺(jué)、計(jì)算攝影、檢測(cè)、分割、識(shí)別、NeRF、GAN、算法競(jìng)賽等微信群

個(gè)人微信（如果沒(méi)有備注不拉群！）
請(qǐng)注明：地區(qū)+學(xué)校/企業(yè)+研究方向+昵稱(chēng)



下載1：何愷明頂會(huì)分享

在「AI算法與圖像處理」公眾號(hào)后臺(tái)回復(fù)：何愷明，即可下載。總共有6份PDF，涉及 ResNet、Mask RCNN等經(jīng)典工作的總結(jié)分析

下載2：終身受益的編程指南：Google編程風(fēng)格指南

在「AI算法與圖像處理」公眾號(hào)后臺(tái)回復(fù)：c++，即可下載。歷經(jīng)十年考驗(yàn)，最權(quán)威的編程規(guī)范！


下載3 CVPR2021

在「AI算法與圖像處理」公眾號(hào)后臺(tái)回復(fù)：CVPR，即可下載1467篇CVPR?2020論文 和 CVPR 2021 最新論文