這篇文章主要闡述了如何使用Qt在像素級別上對圖像進行操作，并實現了一些圖像效果，這些效果主要有：灰度，模糊，銳化，添加相框，金屬質感，改變圖像飽和度，亮度還有白平衡。
scanLine 返回某一行數據，轉換為QRgb指針可進行直接有效的像素存取操作。
介紹
文章中，我們將討論在Qt中修改圖像的一些技術和算法，在這之前，你必須知道在Qt中操作圖像的一些方法。
.在Qt中有兩種表示圖像的類，Qt:QImage和QPixmap，還有QBitmap來存儲單色的圖像，比如遮罩，QPicture在存儲QPainter的一些操作指令。
? 當我們想要在屏幕上繪制圖像的時候，最快的方法就是使用QPixmap，不過壞處就是無法訪問和修改像素；
QImage在IO操作中有很快的速度，并且給出了訪問像素的接口，這篇文章中我們就使用這個類。
.如果你是要處理大的圖片，比如攝像頭拍攝的照片，這種情況最好是將原圖縮小之后作為預覽圖顯示在屏幕上，除非我們允許用戶縮放圖像。有兩種加載并縮放圖像的方法。
。將圖像加載進QImage或者QPixmap，然后調整大小：
?
[cpp]?view plain?copy
QImage?image("sample.png");??image?=?image.scaled(width,?height);??
使用QImageReader來讀取和縮放圖片，然后再加載進QImage中。QImageReader無法將一張圖片加載進QPixmap中去，但是可以使用靜態方法 QPixmap::fromImage(QImage img)從QImage中加載進QPixmap。這個方法非常快，并且不需要加載大圖的內存開銷：
?
?
[cpp]?view plain?copy
QImageReader?imgReader("sample.png");??imgReader.setScaledSize(QSize(width,?height));??QImage?*?image;??imgReader.read(image);??
。每一張圖片都是由像素點組成，每一個像素都有三個通道：紅，綠，藍，還有一個alpha通道來保存透明度（JPEG格式的圖片不支持透明）。每個通道的值是0-255，三個通道都是0的話，表示黑色，都是255表示白色。這篇文章中我們用RGB來表示一種顏色，也就是三個通道的值。
?
?
。相比于一個像素一個像素地讀取，uchar * ?QImage::scanLine(int i)可以一次讀取整行的像素值，會更加高效，下面的例子就是按行讀取的例子，也是我們將要講的第一個例子，轉灰度圖。
?
[cpp]?view plain?copy
QImage?*?MainWindow::greyScale(QImage?*?origin){??????QImage?*?newImage?=?new?QImage(origin->width(),?origin->height(),?QImage::Format_ARGB32);?????????QRgb?*?line;?????????for(int?y?=?0;?y<newImage->height();?y++){??????????QRgb?*?line?=?(QRgb?*)origin->scanLine(y);?????????????for(int?x?=?0;?x<newImage->width();?x++){??????????????int?average?=?(qRed(line[x])?+?qGreen(line[x])?+?qRed(line[x]))/3;??????????????newImage->setPixel(x,y,?qRgb(average,?average,?average));??????????}?????????}?????????return?newImage;??}??
?
?
灰度
我們要學習的第一個技術就是將彩色圖轉換成灰度圖，我們首先要明白的一點就是，其實標準的灰度圖就是每個像素點的三個通道的值一樣或者近似，我們的策略就是將每個像素的每個通道的值都調成一樣，取R,G,B值為三者的算數平均數就可以了，比如原色是RGB(169,204,69), 那么最終的RGB就是（169+204+69）/3 = 147.
?
?
[cpp]?view plain?copy
QImage?*?MainWindow::greyScale(QImage?*?origin){??????QImage?*?newImage?=?new?QImage(origin->width(),?origin->height(),?QImage::Format_ARGB32);?????????QColor?oldColor;?????????for(int?x?=?0;?x<newImage->width();?x++){??????????for(int?y?=?0;?y<newImage->height();?y++){??????????????oldColor?=?QColor(origin->pixel(x,y));??????????????int?average?=?(oldColor.red()+oldColor.green()+oldColor.blue())/3;??????????????newImage->setPixel(x,y,qRgb(average,average,average));??????????}??????}?????????return?newImage;??}??
?
?
原始圖
?
灰度圖
?
亮度調節
就如之前我們提到的，白色用RGB(255,255,255)表示，黑色用RGB(0,0,0)表示，所以如果我們需要提高圖片的亮度（顏色接近白色），我們需要同時增加三個通道的數值，反之就是變暗。
?
在這里我們添加了一個函數參數來決定要提高多少亮度，如果參數是負數的話就是減少亮度了。在每個通道都加上delta值之后，需要做的就是讓它不要低于0且不要高于255.
原圖
加亮圖 Delta = 30
?
?
暖色調
當我們說一一幅暖色調的圖片的時候通常是因為這張圖色調偏黃。我們沒有黃色的通道，但是紅色和綠色混合起來就是黃色，所以我們增加這兩個通道值，然后藍色通道值不變就好了。
?
我們使用一個delta參數來決定增加紅色和綠色通道的值。一張暖色的圖片能夠給人一種復古效果，如果是有沙子的圖片，圖片將會更加生動。
?
?
[cpp]?view plain?copy
QImage?*?MainWindow::warm(int?delta,?QImage?*?origin){??????QImage?*newImage?=?new?QImage(origin->width(),?origin->height(),?QImage::Format_ARGB32);?????????QColor?oldColor;??????int?r,g,b;?????????for(int?x=0;?x<newImage->width();?x++){??????????for(int?y=0;?y<newImage->height();?y++){??????????????oldColor?=?QColor(origin->pixel(x,y));?????????????????r?=?oldColor.red()?+?delta;??????????????g?=?oldColor.green()?+?delta;??????????????b?=?oldColor.blue();?????????????????//we?check?if?the?new?values?are?between?0?and?255??????????????r?=?qBound(0,?r,?255);??????????????g?=?qBound(0,?g,?255);?????????????????newImage->setPixel(x,y,?qRgb(r,g,b));??????????}??????}?????????return?newImage;??}??
?
?
原圖
暖色圖 Delta = 30
?
冷色調
如果說暖色調的圖片偏黃色，那么冷色調的圖片應該就是偏藍色了。在這個方法里面我們只增加藍色通道的值，紅色和綠色的值不變。
冷色調的圖片可以聯想到未來，死亡或者，冷。
?
?
[cpp]?view plain?copy
QImage?*?MainWindow::cool(int?delta,?QImage?*?origin){??????QImage?*newImage?=?new?QImage(origin->width(),?origin->height(),?QImage::Format_ARGB32);?????????QColor?oldColor;??????int?r,g,b;?????????for(int?x=0;?x<newImage->width();?x++){??????????for(int?y=0;?y<newImage->height();?y++){??????????????oldColor?=?QColor(origin->pixel(x,y));?????????????????r?=?oldColor.red();??????????????g?=?oldColor.green();??????????????b?=?oldColor.blue()+delta;?????????????????//we?check?if?the?new?value?is?between?0?and?255??????????????b?=?qBound(0,?b,?255);?????????????????newImage->setPixel(x,y,?qRgb(r,g,b));??????????}??????}?????????return?newImage;??}??
?
?
原圖
冷色調圖 Delta = 30
?
飽和度
我們已經說了，顏色由三個通道組成：紅，綠，藍，盡管如此，RGB不是唯一一個表示色彩的方式，在這里，我們使用HSL格式表示色彩 -?hue（色相）, saturation（飽和度）, lightness（明度）。
飽和的圖像擁有更加生動的顏色，通常會比較好看，但是有一點要記住：不要濫用飽和度，因為很容易出現失真。
?
?
[cpp]?view plain?copy
QImage?*?MainWindow::saturation(int?delta,?QImage?*?origin){??????QImage?*?newImage?=?new?QImage(origin->width(),?origin->height(),?QImage::Format_ARGB32);?????????QColor?oldColor;??????QColor?newColor;??????int?h,s,l;?????????for(int?x=0;?x<newImage->width();?x++){??????????for(int?y=0;?y<newImage->height();?y++){??????????????oldColor?=?QColor(origin->pixel(x,y));?????????????????newColor?=?oldColor.toHsl();??????????????h?=?newColor.hue();??????????????s?=?newColor.saturation()+delta;??????????????l?=?newColor.lightness();?????????????????//we?check?if?the?new?value?is?between?0?and?255??????????????s?=?qBound(0,?s,?255);?????????????????newColor.setHsl(h,?s,?l);?????????????????newImage->setPixel(x,?y,?qRgb(newColor.red(),?newColor.green(),?newColor.blue()));??????????}??????}?????????return?newImage;??}??
?
?
?
原圖
?
?
飽和的圖片 Delta=30
?
模糊
這個效果相對于之前的有一點點復雜。我們會用到一個卷積濾波器，根據當前像素的顏色和相鄰像素的顏色來獲得一個新的顏色。同時還有一個kernel的矩陣來決定計算中相鄰像素的影響程度。
?
原像素會在矩陣的中心，因此我們會使用基數行的行和列。我們不會修改邊緣的像素點，因為那些點沒有我們需要的相鄰像素點，雖然我們也可以只使用有效的像素點。
?
舉了例子，讓我們來看看如何計算像素的RGB值。下面的三個舉證代表著當前像素和鄰接像素的RGB值，最中間的是當前像素。
R = 20 102 99
150 200 77?
170 210 105
G = 22 33 40
17 21 33
8 15 24
B = 88 70 55
90 72 59
85 69 50
?
Kenel =? 0 2 0
2?5 2
0 2 0
?
使用濾波器進行計算：
r = ( (102*2) + (150*2) + (200*5) + (77*2) + (210*2) ) / (2+2+5+2+2) = 159
g = ( (33*2) + ( 17*2) + (21*5) + (33*2) + (15*2) ) / (2+2+5+2+2) = 23
b = ( (70*2) + (90*2) + (72*5) + (59*2) + (69*2) ) / (2+2+5+2+2) = 72
?
由原始的RGB(200, 21, 72)得到了RGB(159, 23, 72). ?發現最大的變化是紅色的通道，因為紅色通道的值差距最大。
?
在修改肖像照片的時候通常會使用到模糊的技術，它能后掩蓋住皮膚的瑕疵。
?
[cpp]?view plain?copy
QImage?*?MainWindow::blur(QImage?*?origin){??????QImage?*?newImage?=?new?QImage(*origin);?????????int?kernel?[5][5]=?{{0,0,1,0,0},??????????????????????????{0,1,3,1,0},??????????????????????????{1,3,7,3,1},??????????????????????????{0,1,3,1,0},??????????????????????????{0,0,1,0,0}};??????int?kernelSize?=?5;??????int?sumKernel?=?27;??????int?r,g,b;??????QColor?color;?????????for(int?x=kernelSize/2;?x<newImage->width()-(kernelSize/2);?x++){??????????for(int?y=kernelSize/2;?y<newImage->height()-(kernelSize/2);?y++){?????????????????r?=?0;??????????????g?=?0;??????????????b?=?0;?????????????????for(int?i?=?-kernelSize/2;?i<=?kernelSize/2;?i++){??????????????????for(int?j?=?-kernelSize/2;?j<=?kernelSize/2;?j++){??????????????????????color?=?QColor(origin->pixel(x+i,?y+j));??????????????????????r?+=?color.red()*kernel[kernelSize/2+i][kernelSize/2+j];??????????????????????g?+=?color.green()*kernel[kernelSize/2+i][kernelSize/2+j];??????????????????????b?+=?color.blue()*kernel[kernelSize/2+i][kernelSize/2+j];??????????????????}??????????????}?????????????????r?=?qBound(0,?r/sumKernel,?255);??????????????g?=?qBound(0,?g/sumKernel,?255);??????????????b?=?qBound(0,?b/sumKernel,?255);?????????????????newImage->setPixel(x,y,?qRgb(r,g,b));?????????????}??????}??????return?newImage;??}??
?
?
原圖
?
模糊圖
?
銳化
像模糊中一樣，銳化一張圖片也會使用一個卷積濾波器，但是kernel矩陣是不一樣的，相鄰像素對應的值是負的。
銳化能夠處理模糊的照片，能夠提升細節。
?
[cpp]?view plain?copy
QImage?*?MainWindow::sharpen(QImage?*?origin){??????QImage?*?newImage?=?new?QImage(*?origin);?????????int?kernel?[3][3]=?{{0,-1,0},??????????????????????????{-1,5,-1},??????????????????????????{0,-1,0}};??????int?kernelSize?=?3;??????int?sumKernel?=?1;??????int?r,g,b;??????QColor?color;?????????for(int?x=kernelSize/2;?x<newImage->width()-(kernelSize/2);?x++){??????????for(int?y=kernelSize/2;?y<newImage->height()-(kernelSize/2);?y++){?????????????????r?=?0;??????????????g?=?0;??????????????b?=?0;?????????????????for(int?i?=?-kernelSize/2;?i<=?kernelSize/2;?i++){??????????????????for(int?j?=?-kernelSize/2;?j<=?kernelSize/2;?j++){??????????????????????color?=?QColor(origin->pixel(x+i,?y+j));??????????????????????r?+=?color.red()*kernel[kernelSize/2+i][kernelSize/2+j];??????????????????????g?+=?color.green()*kernel[kernelSize/2+i][kernelSize/2+j];??????????????????????b?+=?color.blue()*kernel[kernelSize/2+i][kernelSize/2+j];??????????????????}??????????????}?????????????????r?=?qBound(0,?r/sumKernel,?255);??????????????g?=?qBound(0,?g/sumKernel,?255);??????????????b?=?qBound(0,?b/sumKernel,?255);?????????????????newImage->setPixel(x,y,?qRgb(r,g,b));?????????????}??????}??????return?newImage;??}??
?
?
原圖
銳化圖
?
添加相框
繪制一個相框是非常見到那的，我們只需要把相框在原圖上面繪制就可以了。這里假設我們已經有一個和圖片一樣大小的相框了，不一樣的話要resize到一樣大。
?
[cpp]?view plain?copy
QImage?*?MainWindow::drawFrame(QImage?*?origin){??????QImage?*?newImage?=?new?QImage(*?origin);??????QPainter?painter;?????????painter.begin(newImage);?????????painter.drawImage(0,0,?QImage(":images/frame.png"));?????????painter.end();?????????return?newImage;??}??
?
?
原圖
相框
添加相框之后
?
金屬效果
這個例子中我們會結合幾種技術來獲得一種效果。下面是處理的步驟：
1.調整圖像的亮度，獲得一個較暗的圖片。
2.將圖像轉成灰度。
3.將灰度圖繪制在金屬的紋理上，透明度50%。
?
[cpp]?view plain?copy
QImage?*?MainWindow::metal(QImage?*?origin){??????QImage?*?newImage?=?new?QImage(":images/metal.png");??????QImage?*?darkImage?=?brightness(-100,?origin);??????QImage?*?greyImage?=?greyScale(darkImage);??????QPainter?painter;?????????painter.begin(newImage);?????????painter.setOpacity(0.5);??????painter.drawImage(0,?0,?*?greyImage);?????????painter.end();?????????delete?greyImage;??????delete?darkImage;?????????return?newImage;??}??
?
?
?
?
原圖
?
金屬紋理
?
最終效果
?
模糊的邊框
最后再來學習一個融合的效果，這次我們想要做的是模糊圖片外延的部分，讓視線的焦點聚集在圖片的中間。
?
我們將會使用一張遮罩圖片，來決定需要模糊的部分，具體的操作步驟如下:
1.從原圖獲取一張完全模糊的圖片。
2.使用QPainter的一種融合模式，通過遮罩圖片截取出一個模糊的相框。點這里可以學習到更多的QPainter的融合模式。
3.在原圖上繪制出模糊的邊框。
?
[cpp]?view plain?copy
QImage?*?MainWindow::blurFrame(QImage?*?origin){??????QImage?*?newImage?=?new?QImage(*?origin);??????QImage?*?blurredImage?=?blur(newImage);??????QImage?*?mask?=?new?QImage(":images/mask.png");??????QPainter?painter;?????????//Using?the?composition?mode?SourceAtop?we?get?a?blurred?frame?stored?in?QImage?mask??????painter.begin(mask);?????????painter.setCompositionMode(QPainter::CompositionMode_SourceAtop);??????painter.drawImage(0,?0,?*?blurredImage);?????????painter.end();?????????//With?our?new?frame?we?simply?draw?it?over?the?original?image??????painter.begin(newImage);?????????painter.setCompositionMode(QPainter::CompositionMode_SourceOver);??????painter.drawImage(0,?0,?*?mask);?????????painter.end();?????????delete?mask;??????delete?blurredImage;?????????return?newImage;??}??
?
?
原圖
?
遮罩
?
模糊的邊框
?
最終效果
?
手機Demo
你可以下載這個手機Demo的源碼，里面包含了文章中的源碼，在這個應用中，包含了3張462*260的圖片。測試應用的時候，你只要選擇其中一張并應用下面的效果就可以了。
?
總結
這篇文章應該可以成為你圖像處理的入門，但是一切皆有可能。你可以修改這些方法，整合這些方法，使用其他的技術等等。想象力才是你唯一的限制。
總結
以上是生活随笔為你收集整理的Qimage像素级操作的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
