使用OpenCV做个简单的颜色提取器

学更好的别人,

做更好的自己。

——《微卡智享》

使用OpenCV做个简单的颜色提取器_第1张图片

本文长度为1035,预计阅读4分钟

前言

做UI界面时,常常会遇到配色的问题,有专业美工还好,没有的话,你想要什么颜色,需要自己进行提取,如果没有PS,那我们就用OpenCV做个简单的颜色提取功能。

69f86a3771d09a4b7364f85f4e43bab3.png

实现效果

使用OpenCV做个简单的颜色提取器_第2张图片


使用OpenCV做个简单的颜色提取器_第3张图片

使用OpenCV做个简单的颜色提取器_第4张图片

实现OpenCV获取颜色提取需要什么?

A

从上面的GIF动图中可以看出来,每点击图像中的位置直接显示出当前的RGB色和转换为16进制的字符。实现这个方式最主要的就考虑几点:

  1. 鼠标点击事件,获取当前位置

  2. 获取当前点的R、G、B的值

  3. 如果从RGB的值中转换为16进制

代码实现

73c3bf679c8ef4edfd2337252f28e7b6.png

微卡智享

#pragma once
#include 
#include 
#include "../../Utils/CvUtils.h"


using namespace std;
using namespace cv;


Mat src;
Mat srccopy; //用于拷贝出的源图像
string showsrc = "图像";


//鼠标回调函数
void onMouse(int event, int x, int y, int flags, void* ustc); 


//RGB颜色转换为HEX
string rgb2hex(int r, int g, int b, bool ishead = false);




int main(int argc, char** argv) {


  src = imread("E:/DCIM/6.jpg");
  CvUtils::MatResize(src);
  CvUtils::SetShowWindow(src, showsrc, 500, 20);
  imshow(showsrc, src);


  //设置鼠标响影事件
  setMouseCallback(showsrc, onMouse);




  waitKey(0);
  return 0;


}




void onMouse(int event, int x, int y, int flags, void* ustc)
{
  //鼠标左键按下
  if (event == EVENT_LBUTTONUP)
  {
    srccopy = src.clone();


    //获取点击位置的颜色,此处注意y和x的位置顺序
    Scalar color = srccopy.at(y, x);
    int b = color[0];
    int g = color[1];
    int r = color[2];




    string hexstr = rgb2hex(r, g, b, true);


    string rgbtext = "RGB(" + to_string(r) + "," + to_string(g) + "," + to_string(b) + ")";
    string hextext = "HEX:" + hexstr;




    //在图像上画出点击位置
    circle(srccopy, Point(x, y), 2, Scalar(0, 255, 255));


    //输出显示文字
    putText(srccopy, rgbtext, Point(x + 5, y + 5), 1, 1.2, Scalar(0, 255, 255));
    putText(srccopy, hextext, Point(x + 5, y + 35), 1, 1.2, Scalar(0, 255, 255));


    imshow(showsrc, srccopy);
  }
}


string rgb2hex(int r, int g, int b, bool ishead)
{
  stringstream hexstr;
  if (ishead) hexstr << "#";
  hexstr << hex << (r << 16 | g << 8 | b);


  cout << "rgb:" << r << "," << g << "," << b << "  hex:" << hexstr.str() << endl;
  return hexstr.str();
}

微卡智享

划重点

使用OpenCV做个简单的颜色提取器_第5张图片

在鼠标事件中获取图像当前点颜色时,一定要记录第一个参数是y,第二个参数是x,在OpenCV中参数一般说是row和col的概念,row是行代表是y轴,col是列代表是x轴。

使用OpenCV做个简单的颜色提取器_第6张图片

代码中CvUtils的图片调整大小的显示位置,在当时写的CvUtils中实现,整个小Demo也是在我的OpenCVDemoCPP中,可以直接下载那个源码,里面还有别的Demo练习。

使用OpenCV做个简单的颜色提取器_第7张图片

从RGB转Hex直接在C++中std::hex中实现即可,比较简单。这样一个OpenCV的颜色提取小Demo就完成了。

aae0e154d0ddba5af119183d2281587b.png

使用OpenCV做个简单的颜色提取器_第8张图片

源码地址

https://github.com/Vaccae/OpenCVDemoCpp.git

点击阅读原文可以看到“码云”的代码地址

38305650200da0ca9597f17f8b3f001e.png

beac962ebd14bd8a75aedb83b5114ba4.png

往期精彩回顾

使用OpenCV做个简单的颜色提取器_第9张图片

Android前台服务的使用(二)--使用LiveEventBus实现进程间通讯(附源码)


使用OpenCV做个简单的颜色提取器_第10张图片

Android前台服务的使用(一)


使用OpenCV做个简单的颜色提取器_第11张图片

OpenCV实现图片批号效期提取


你可能感兴趣的:(opencv,java,android,计算机视觉,js)