模拟QQ实现拾色器

190 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第34天,点击查看活动详情

QQ截图功能时可以显示截图区域的BGR的灰度均值,这一点非常好,因为有时候我们需要给ppt或者word表格设置背景色但是又不知道该设置具体值时这个功能就能很好的帮助我们。

对于拾色器,首先阐述一下原理,在进行图像区域选择时会首先记录图像的坐标,也就是图像左上角的坐标值以及宽度和长度;然后,就是对该区域进行图像剪裁,其目的主要是方便对图像进行三通道颜色的分离和计算;最后,就是将统计得到的ROI区域的BGR三通道的颜色值进行查表,最后得到最终的颜色阶数,并显示到原图像中。

先把实验图片放上去

image.png

下面直接上代码:

import cv2
import pandas as pd
import numpy as np


img_path = r'./color.png'
img = cv2.imread(img_path)
r = g = b = x_pos = y_pos = 0
index = ["color", "color_name", "hex", "R", "G", "B"]
csv = pd.read_csv('colors.csv', names=index, header=None)


def get_color_name(R, G, B):
    minimum = 10000
    for i in range(len(csv)):
        d = abs(R - int(csv.loc[i, "R"])) + abs(G - int(csv.loc[i, "G"])) + abs(B - int(csv.loc[i, "B"]))
        if d <= minimum:
            minimum = d
            cname = csv.loc[i, "color_name"]
    return cname


def RGB(img):
    Rmean = []
    Gmean = []
    Bmean = []
    Bmean.append(np.mean(img[:, :, 0]))
    Gmean.append(np.mean(img[:, :, 1]))
    Rmean.append(np.mean(img[:, :, 2]))
    R_mean = np.round(np.mean(Rmean), 2)
    G_mean = np.round(np.mean(Gmean), 2)
    B_mean = np.round(np.mean(Bmean), 2)
    return B_mean,G_mean,R_mean


while True:
    roi = cv2.selectROI(windowName="roi", img=img, showCrosshair=True, fromCenter=False)
    x, y, w, h = roi
    img_roi = img[int(roi[1]):int(roi[1] + roi[3]), int(roi[0]):int(roi[0] + roi[2])]  # 截取ROI
    cv2.rectangle(img=img, pt1=(x, y), pt2=(x + w, y + h), color=(0, 0, 255), thickness=2)
    b, g, r = RGB(img_roi)
    cv2.rectangle(img, (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(img, text, (50, 50), 2, 0.8, (255, 255, 255), 2, cv2.LINE_AA)
    if r + g + b >= 600:
        cv2.putText(img, text, (50, 50), 2, 0.8, (0, 0, 0), 2, cv2.LINE_AA)

对于colors.csv我上传到百度云了,包括整个项目代码,需要的自取 链接:pan.baidu.com/s/1B0FqO9aM… 提取码:1wio

然后就是效果展示,首先打开图像窗口显示图像

image.png

然后是随意选择想查看颜色的区域,选择完成之后按一下enter键,会将结果显示在左上角的矩形区域内,第一次选取的在红色花瓣内,矩形框的颜色不太明显。

image.png

第二次选取在黄色花瓣内,可以看到矩形框的位置,同时左上角展示结果的区域,矩形框颜色会随着选取区域的颜色而发生变化。

image.png

计算结果可以保证准确性,可以当作一个高精度的拾色器使用。

image.png