Picture

Payx

Hello guys,

I got a project to do :

i want display a picture (i have already do that) and i want to reduce the resolution of the picture by 4 and work with all this square, like know the main color of these square.

so i work on it with :

int step=4;
	for (int i=0;i<pix.width();i=i+step){                                  // the name of my picture is "pix"
		for (int j=0;j<pix.height();j=j+step){
                                                                                                    // its here where im blocked
}
}

i know what i have to do but i dont know how i can traduce it in C
like with "QImage copy(const QRect & rectangle = QRect()) const" i suppose

can you help me ?

jsulm

@Payx said in Picture:

i want to reduce the resolution of the picture by 4 and work with all this square

Sorry I don't understand your use case:
"i want to reduce the resolution of the picture by 4 and work with all this square"
Do you want to reduce the resolution of the picture or divide it into 4x4 sub-pictures?

Payx

@jsulm Yes i want to cut the picture in square 4x4

sorry

Payx

cut the picture in square 4x4 but with this 4x4 square i will just determinate the most contained color, and by the way do a simple pixel with it

mrjj

@Payx said in Picture:

and by the way do a simple pixel with it

Hi can you explain more what you do with it?

Payx

@mrjj i cut my picture in square 4x4, and with this square i just calculate the most contained color, i replace all this square by the color and it give me a simple square with just one color

SGaist

Hi,

Why not use QImage::scaled ?

Payx

@SGaist I don't know if it will work (im a beginner) but the function return only one square ? or i can use this function to cut in 4x4 square my picture with a double "for" ?

SGaist

It was just for the resizing part.

For the processing itself, it might be better to use a library like OpenCV which likely already implement what you need.

Payx

@SGaist ok i will install OpenCV on Qt and come if i need more help

Payx

@SGaist there is a lot of tutorial for install OpenCV, and they are all different... can you have a good tutorial to show me ?

mrjj

@Payx
Hi
can i ask what effect you are after ?
It sounds like you want to make the image more pixelated?

SGaist

What OS are you on ?

Payx

@mrjj No,

I got an image, i just want to cut the image in square 4x4 (pixels) and with this square, i want to detect the most contained color. When i have this color i replace entirely the square by the color.

Exemple : if i got an image, if the first square 4x4 i have on the image is contained by 80% of red, that will replace the entirely square by red only.

This project is to have a "simple" picture.

with this simple picture i can reproduce it with candies (for exemple). Because if i got 800800 pixels i can't buy 800800 candies so i have to "reduce" it

Im on windows 10

SGaist

Then you can use the OpenCV installer, just ensure that you have an OpenCV version built with the same compiler you are using with Qt.

Payx

@SGaist I spoke with my teacher, he told me we dont need OpenCV

SGaist

I never said you needed it just that it might be simpler through it.

In any case, you can use QImage::pixelColor to get the color of one pixel of your image and then do the calculation with the surrounding pixels.

Payx

@SGaist said in Picture:

QImage::pixelColor

Ok, i will try to use it tomorrow, but i already have a question, i can't use a function in the "void MainWindow::on_push_clicked()" no ?

kshegunov

@Payx said in Picture:

I got an image, i just want to cut the image in square 4x4 (pixels) and with this square, i want to detect the most contained color. When i have this color i replace entirely the square by the color.
Exemple : if i got an image, if the first square 4x4 i have on the image is contained by 80% of red, that will replace the entirely square by red only.
This project is to have a "simple" picture.
with this simple picture i can reproduce it with candies (for exemple). Because if i got 800800 pixels i can't buy 800800 candies so i have to "reduce" it

It sounds to me you're after color space reduction after scaling. Just resample the image to the desired resolution with QImage::scaled as @SGaist suggested. Then the color space reduction boils down to calculating distances in 3 dimensional rectangular coordinate system (colors are vectors in RGB space). Suppose you have a table of 32 colors and an image:

QImage image;

const qint32 colorTableSize = 32;
QColor colorTable[colorTableSize] = { Qt::Red, Qt::Blue, ... };

Then for each pixel you choose the color from the table that's closest in the color space:

// Just go around the image
for (qint32 y = 0, height = image.height(); y < height; y++)  {
    for (qint32 x = 0, width = image.width(); x < width; x++)  {
        QColor pixel = image.pixelColor(x, y);

        // Find the closest match from the table
        qint32 colorIndex = 0;
        qreal minDistance = std::sqrt(3); // Initial value is the longest possible distance
        for (qint32 i = 0; i < colorTableSize; i++)  {
            qreal distance = QVector3D(pixel.redF() - colorTable[i].redF(), pixel.greenF() - colorTable[i].greenF(), pixel.blueF() - colorTable[i].blueF()).length();
            if (distance < minDistance)  {  // Found a closer color than the currently selected
                minDistance = distance;
                colorIndex = i;
            }
        }

        // Now just replace the pixel color with the one from the table
        image.setPixelColor(x, y, colorTable[colorIndex]);
    }
}

This doesn't take into account the disparity of color sensitivity of the human eye. If you need to account for this then you need to dig deeper to find more accurate color distances, e.g. by implementing some sort of a chromaticity diagram.

Kind regards.

jsulm

@Payx said in Picture:

i can't use a function in the "void MainWindow::on_push_clicked()" no ?

Sure you can, why not?

Payx

I just dont understand what your program do..

i got my image into my :

void MainWindow::on_push_clicked()

when i want to use it in :

void MainWindow::on_push2_clicked()

he say that my image isnt declared.

@kshegunov sorry, I just dont understand what your program do..

i thought use a thing like this :

void MainWindow::on_push2_clicked()
   {



       for (int i=0;i<pix.width()+1;i=i+4){
           for (int j=0;j<pix.height()+1;j=j+4){
               for(int x=0; x<i;x=x+1){
                  for (int z=0; z<j; z=z+1){
           
   }
}
}

and in that i will calculate the most contained color ( i thought with RGB ) and if my square is contained by 80% of red, replace it with red.

jsulm

@Payx If you get your image in

void MainWindow::on_push_clicked()

and you need it in

void MainWindow::on_push2_clicked()

then in on_push_clicked() you need to store the image somewhere, so on_push2_clicked() can use it later. You can just add a member variable to MainWindow:

class MainWindow...
{
...
private:
    QImage image;
}

Payx

@jsulm ok thank you !

For calculate the color of each pixel, what function can i use?

jsulm

@Payx Do you mean to get the pixel value? http://doc.qt.io/qt-5/qimage.html#pixel-1
It returns http://doc.qt.io/qt-5/qcolor.html#QRgb-typedef containing the RGB values, then you can calculate what ever you need.
#AARRGGBB

quint32 rgb = static_cast<quint32>(image.pixel(x, y));
int blue = rgb & x000000FF;
int green = (rgb & 0x0000FF00)>>8;
int red = (rgb & 0x00FF0000)>>16;

kshegunov

@jsulm said in Picture:

quint32 rgb = static_cast<quint32>(image.pixel(x, y));
int blue = rgb & x000000FF;
int green = (rgb & 0x0000FF00)>>8;
int red = (rgb & 0x00FF0000)>>16;

There are the (inline) qRed(), qGreen() and qBlue() for that purpose, no need for bit-magic. :)

jsulm

@kshegunov Oh, good to know :-)

Payx

So can i use :

for (int i=0;i<pix.width()+1;i=i+4){
           for (int j=0;j<pix.height()+1;j=j+4){
               for(int x=0; x<i;x=x+1){
                  for (int z=0; z<j; z=z+1){
 QColor pixel = pix.pixelColor(x, z);

// i block here, can i use QColor [pixel] to create a tab and who will contain all my color ?

EDIT : i use a Qpixmap to display my picture, so i cant QImage pix; (the name of my picture is pix)

VRonin

These 2 should help you

QColor dominantColour(const QImage& image,const QPoint& topLeft, const QSize& rectSize){
const int maxRight = qMin(image.width(),topLeft.x() + rectSize.width());
const int maxBottom = qMin(image.height(),topLeft.y() + rectSize.height());
qint64 sumRed = 0;
qint64 sumGreen = 0;
qint64 sumBlue = 0;
for(int x=topLeft.x();x<maxRight;++x){
for(int y=topLeft.y();y<maxBottom;++y){
const QColor tempColor=image.pixelColor(x,y);
sumRed += tempColor.red();
sumGreen += tempColor.green();
sumBlue += tempColor.blue();
}
}
if(sumRed >= sumGreen  && sumRed >= sumBlue)
return Qt::red;
if(sumGreen  >= sumBlue)
return Qt::green;
return Qt::blue;
}

void fillSection(QImage& image,const QPoint& topLeft, const QSize& rectSize, const QColor& colour){
const int maxRight = qMin(image.width(),topLeft.x() + rectSize.width());
const int maxBottom = qMin(image.height(),topLeft.y() + rectSize.height());
for(int x=topLeft.x();x<maxRight;++x){
for(int y=topLeft.y();y<maxBottom;++y){
image.setPixelColor(x,y,colour);
}}
}

@Payx said in Picture:

i use a Qpixmap to display my picture, so i cant QImage pix; (the name of my picture is pix)

http://doc.qt.io/qt-5/qimage.html#details

Qt provides four classes for handling image data: QImage, QPixmap, QBitmap and QPicture. QImage is designed and optimized for I/O, and for direct pixel access and manipulation, while QPixmap is designed and optimized for showing images on screen. QBitmap is only a convenience class that inherits QPixmap, ensuring a depth of 1. Finally, the QPicture class is a paint device that records and replays QPainter commands.

Use QImage for pixel manipulation. you can use QImage::fromPixmap() and QPixmap::fromImage() to convert between the two

Payx

@VRonin Thanks for your answer, but thats very too complicated for me, and anyway i don't understand.

Can you explain your code ?

I tried something instead :

void MainWindow::on_push2_clicked()
{

	QRgb pix(int x, int z);
	int step=4;
	for (int i=0;i<pixi.width()+1;i=i+step){
		for (int j=0;j<pixi.height()+1;j=j+step){
			for(int x=0; x<i;x=x+1){
				for (int z=0; z<j; z=z+1){
					QRgb pixa = pixi.pixel(x, z);

the problem is here, how can i stock all the color of my square to after that compare them to know what is the dominant color


			}
	}
}
	}
}

VRonin

I simplified the code a bit.

The first function takes an image, the coordinates of the top left corner and the size of the rectangle (4x4 in your case) and tells you what is the dominant primary colour there

The second one takes an image, the coordinates of the top left corner and the size of the rectangle (4x4 in your case) and fills that rectangle with the colour in the argument

mrjj

@Payx
Hi, i added some comments. Its basically the same as what you tried , just broken up into good functions to produce clean code.

// this function , you give the image and the start and size of the current rect you are processing
QColor dominantColour(const QImage& image, const QPoint& topLeft, const QSize& rectSize) {
// calculate start stop values for the rect
   const int maxRight = qMin(image.width(), topLeft.x() + rectSize.width());
  const int maxBottom = qMin(image.height(), topLeft.y() + rectSize.height());
  QVector<QColor> coloursList; // this is a list of all colors seen!
  for(int x = topLeft.x(); x < maxRight; ++x) {
    for(int y = topLeft.y(); x < maxBottom; ++x) {
      coloursList << image.pixelColor(x, y); // store all colors seen in this Rect
    }
  }

  // these are functions that count (accumulate) how many times RED, GREEN and blue been used ( using the list from before)
  const qint64 sumRed = std::accumulate(coloursList.constBegin(), coloursList.constEnd(), 0, [](qint64 strt,  const QColor & val)->qint64 {return strt + val.red()});
  const qint64 sumGreen = std::accumulate(coloursList.constBegin(), coloursList.constEnd(), 0, [](qint64 strt, const QColor & val)->qint64 {return strt + val.green()});
  const qint64 sumBlue = std::accumulate(coloursList.constBegin(), coloursList.constEnd(), 0, [](qint64 strt, const QColor & val)->qint64 {return strt + val.blue()});
  // now we check out which is most used
  if(sumRed >= sumGreen  && sumRed >= sumBlue)
    return Qt::red;
  if(sumGreen  >= sumBlue)
    return Qt::green;
  return Qt::blue;
}

// this function can fill an rect with a color. So its used with dominantColour to actually replace the colors
void fillSection(QImage& image, const QPoint& topLeft, const QSize& rectSize, const QColor& colour) {
  // calculate start stop values for the rect
  const int maxRight = qMin(image.width(), topLeft.x() + rectSize.width());
  const int maxBottom = qMin(image.height(), topLeft.y() + rectSize.height());
  // go over all pixels in the rect
  for(int x = topLeft.x(); x < maxRight; ++x) {
    for(int y = topLeft.y(); x < maxBottom; ++x) {
      image.setPixelColor(x, y, colour); // replace color
    }
  }
}

Payx

Thanks for your help,

I got one error

undefined reference to 'MainWindow::dominantColor()'

VRonin

Payx

thats wasnt a simple letter that occured an error,

undefined reference to 'MainWindow::dominantColour()'
undefined reference to ''MainWindow::fillSection()'

SGaist

Because they are not part of MainWindow. Take a look again a the function signature.

Payx

@SGaist

Here my window.h

private slots:
	void on_push_clicked();
	QColor	dominantColour();
	void fillSection();

	void on_push2_clicked();

You said my function is not part of MainWindow, so i try to add MainWindow::

void MainWindow::fillSection(QImage& pixi, const QPoint& topLeft, const QSize& rectSize, const QColor& colour) {

and its said prototype for void Main...... does not match any in class 'MainWindow'

SGaist

Method signature mismatch.

Note: neither dominantColour nor fillSection make sense in the slots category.

kshegunov

@Payx said in Picture:

its said prototype for void Main...... does not match any in class 'MainWindow'

They don't match, the compiler's correct.

class MainWindow
{
    // ...
    void fillSection();
    // ...
};

in the header has different prototype from :

void MainWindow::fillSection(QImage& pixi, const QPoint& topLeft, const QSize& rectSize, const QColor& colour)
{
    // ...

in the source file. They must match, it's a requirement of the language.

Payx

So where am i suppose to declare my functions ?

jsulm

@Payx Again:

void fillSection()

is NOT the same as

void fillSection(QImage& pixi, const QPoint& topLeft, const QSize& rectSize, const QColor& colour)

So, either change void fillSection() to void fillSection(QImage& pixi, const QPoint& topLeft, const QSize& rectSize, const QColor& colour), or other way around. This is really basic C++.