概述

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

讓我們開始吧！

import cv2

import pandas as pd

import matplotlib．pyplot as plt

1. cv2：這個庫是用來執(zhí)行所有的計算機(jī)視覺操作——基本上是所有需要的圖像處理操作。

2. pandas：在處理機(jī)器學(xué)習(xí)問題時，Pandas 通常有很多范圍，但在本主題中，它們僅用于讀取 CSV 文件并從中提取一些信息。

3. matplotlib： Matplotlib 與可視化數(shù)據(jù)有很大關(guān)系，盡管在這里它將用于繪制圖像。

image＿location ＝ ＇colorpic．jpg＇

test ＝ cv2．imread（image＿location）

plt．imshow（test）

plt．show（）

輸出：

代碼分解：

1. 首先，我們在變量中保存圖像的路徑，使用圖像的名稱，而不是確切的路徑，因為它與我們的 Jupyter Notebook位于同一路徑中。

2. 現(xiàn)在借助cv2 的 read（） 函數(shù)，我們將讀取 NumPy 數(shù)組格式的圖像并將其存儲在測試變量中。如果我們只打印出測試變量，那么它只會以數(shù)組格式顯示圖像。

3. 現(xiàn)在我們將使用 Matplotlib 的 show（） 函數(shù)來查看我們讀取的圖像。

cv2．imshow（） VS plt．imshow（）

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

讓我們聲明一些可以與整個代碼一起訪問的全局變量。

flag＿variable ＝ False

red＿channel ＝ g＿channel ＝ b＿channel ＝ x＿coordinate ＝ y＿coordinate ＝ 0

代碼分解：

1. 在這里，首先我們?nèi)×艘粋�標(biāo)志變量，它將指示我們是否單擊了圖像，可以看到默認(rèn)值為 false 即未單擊圖片，而 True 值表示已單擊圖片。

2. 然后有紅色、綠色和藍(lán)色通道（RGB）以及 X 和 Y 坐標(biāo)，現(xiàn)在設(shè)置為 0，但只要我們在圖像周圍移動并從中選擇顏色，這些值就會改變．

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

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)題名稱。

2. 然后我們將在 read＿csv 函數(shù)的幫助下讀取 color．csv 文件

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

現(xiàn)在，我們將創(chuàng)建函數(shù)來獲取顏色的名稱（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，即實際顏色代碼與我們從圖像中選擇顏色時得到的顏色代碼之間的最小閾值距離。

2. 然后我們計算了顏色代碼與圖像的距離。

3. 現(xiàn)在我們將看到我們計算的距離應(yīng)該小于或等于閾值距離。

4. 最后，我們將從CSV 文件中存儲顏色的名稱并返回它。

現(xiàn)在我們將創(chuàng)建函數(shù)來獲取坐標(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)用戶雙擊任何顏色時，此函數(shù)將返回 X 和 Y 坐標(biāo)的值以及相應(yīng)的 RGB 位置。

1. 首先，我們將檢查用戶是否雙擊，我們將使用cv2 中的 EVENT＿LBUTTONDBLCLK。

2. 然后我們將flag＿variable 設(shè)置為 True，因為現(xiàn)在單擊了按鈕。

3. 然后是函數(shù)的主要部分，我們將在全局變量中存儲坐標(biāo)值及其對應(yīng)的 RGB 值。

4. 最后，我們將使用 int（） 將值轉(zhuǎn)換為整數(shù)類型。

cv2．namedWindow（＇image＇）

cv2．setMouseCallback（＇image＇， draw＿function）

鼠標(biāo)回調(diào)：這是 cv2 方法，它將檢測用戶的點擊（右、左或雙擊）并調(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)建一個矩形（填充：－1 用于填充矩形），我們將在其上放置我們的文本。

2. 現(xiàn)在我們將獲得文本字符串，其顏色代碼為 RGB。

3. 然后在 put text 方法的幫助下，我們將在之前繪制的矩形上方顯示文本。

4. 如果顏色為淺色，我們會驗證，然后我們將以黑色顯示文本字符串。

5. 最后，我們可以選擇使用 esc 鍵退出應(yīng)用程序。

總結(jié)

1. 首先，我們已經(jīng)導(dǎo)入了所有的庫。

2. 然后我們加載并繪制選定的圖像。

3. 然后我們?yōu)槲覀兊牟噬?CSV 文件提供了標(biāo)題。

4. 我們還創(chuàng)建了獲取顏色名稱函數(shù)和繪制函數(shù)，以在用戶雙擊任何顏色時查看圖像上的結(jié)果。

5. 然后應(yīng)用程序循環(huán)執(zhí)行所有步驟。

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

       原文標(biāo)題 : 使用計算機(jī)視覺的顏色選擇器應(yīng)用程序