摘要:使用灰度算法,算出一個(gè)灰度值。用這個(gè)灰度值代替像素原始的,,值。算法單一通道取紅色通道取綠色通道取藍(lán)色通道圖片變灰更快捷的方法,這個(gè)方法不用做任何計(jì)算,取一個(gè)通道的值直接作為灰度值。
本文轉(zhuǎn)載自blog
轉(zhuǎn)載請(qǐng)注明出處
前言黑白照片的時(shí)代雖然已經(jīng)過去,但現(xiàn)在看到以前的照片,是不是有一種回到過去的感覺,很cool有木有~
看完這篇文章,就可以把彩色照片變成各種各樣的黑白的照片啦。
本文完整的在線例子圖片灰度算法例子,例子的圖片有點(diǎn)多,可能有些慢。
例子的源碼位于blog/demo里
三原色與灰度原色是指不能透過其他顏色的混合調(diào)配而得出的“基本色”。一般來說疊加型的三原色是紅色、綠色、藍(lán)色,以不同比例將原色混合,可以產(chǎn)生出其他的新顏色。這套原色系統(tǒng)常被稱為“RGB色彩空間”,亦即由紅(R)綠(G)藍(lán)(B)所組合出的色彩系統(tǒng)。
當(dāng)這三種原色以等比例疊加在一起時(shí),會(huì)變成灰色;若將此三原色的強(qiáng)度均調(diào)至最大并且等量重疊時(shí),則會(huì)呈現(xiàn)白色。灰度就是沒有色彩,RGB色彩分量全部相等。
獲取圖片的像素?cái)?shù)據(jù)算法不區(qū)分語(yǔ)言,這里以前端舉例??梢允褂?b>canvas取得圖片某個(gè)區(qū)域的像素?cái)?shù)據(jù)
//偽代碼 var img = new Image(); img.src = "xxx.jpg"; var myCanvas = document.querySelector(canvasId); var canvasCtx = myCanvas.getContext("2d"); canvasCtx.drawImage(img, 0, 0, img.width, img.height); //圖片的像素?cái)?shù)據(jù) var data = canvasCtx.getImageData(0, 0, img.width, img.height);
使用getImageData()返回一個(gè)ImageData對(duì)象,此對(duì)象有個(gè)data屬性就是我們要的數(shù)據(jù)了,數(shù)據(jù)是以Uint8ClampedArray 描述的一個(gè)一維數(shù)組,包含以 RGBA 順序的數(shù)據(jù),數(shù)據(jù)使用 0 至 255(包含)的整數(shù)表示。 所以,一個(gè)像素會(huì)有4個(gè)數(shù)據(jù)(RGBA),RGB是紅綠藍(lán),A指的是透明度。
舉個(gè)例子:本文720480的水果圖片,一共有720 480 = 259200像素,每個(gè)像素又有4個(gè)數(shù)據(jù),所以數(shù)據(jù)數(shù)組的總長(zhǎng)度為259200 * 4 = 1036800。
可以看到圖片的數(shù)據(jù)很長(zhǎng),如果一次性處理很多圖片的時(shí)候,計(jì)算量相當(dāng)可觀,所以例子中會(huì)使用worker,把繁重的計(jì)算任務(wù)交給后臺(tái)線程。
算法的基本步驟取得每一個(gè)像素的red,green,blue值。
使用灰度算法,算出一個(gè)灰度值。
用這個(gè)灰度值代替像素原始的red,green,blue值。
比如我們的灰度算法是:
Gray = (Red + Green + Blue) / 3
計(jì)算過程:
//偽代碼 for(var Pixel in Image){ var Red = Image[Pixel].Red var Green = Image[Pixel].Green var Blue = Image[Pixel].Blue var Gray = (Red + Green + Blue) / 3 Image[Pixel].Red = Gray Image[Pixel].Green = Gray Image[Pixel].Blue = Gray }
很簡(jiǎn)單對(duì)吧。
很多好吃的鮮艷水果,但是它們馬上要變灰了!!
算法1 - 平均法 使用算法1:這是最常見的灰度算法,簡(jiǎn)單暴力,把它放到第一位。公式是:
Gray = (Red + Green + Blue) / 3
這個(gè)算法可以生成不錯(cuò)灰度值,因?yàn)楣胶?jiǎn)單,所以易于維護(hù)和優(yōu)化。然而它也不是沒有缺點(diǎn),因?yàn)楹?jiǎn)單快速,從人眼的感知角度看,圖片的灰度陰影和亮度方面做的還不夠好。所以,我們需要更復(fù)雜的運(yùn)算。
算法2 - 基于人眼感知 使用算法2:算法1與算法2生成的圖片似乎沒太大差別,所以增加一個(gè)例子,將圖片上半部分用算法1,下半部分用算法2。
上半部分是算法1,下半部分是算法2:仔細(xì)看的話,中間有一根黑線。上半部分(算法1)比下半部分(算法2)更蒼白一些。如果還是看不出來,注意最右邊的檸檬,算法1的檸檬反光更強(qiáng)烈,算法2的檸檬更柔和。
第二種算法考慮到了人眼對(duì)不同光感知程度不同。人的眼睛內(nèi)有幾種辨別顏色的錐形感光細(xì)胞,分別對(duì)黃綠色、綠色和藍(lán)紫色的光最敏感。雖然眼球中的椎狀細(xì)胞并非對(duì)紅、綠、藍(lán)三色的感受度最強(qiáng),但是由肉眼的椎狀細(xì)胞所能感受的光的帶寬很大,紅、綠、藍(lán)也能夠獨(dú)立刺激這三種顏色的受光體。
人類對(duì)紅綠藍(lán)三色的感知程度依次是: 綠>紅>藍(lán),所以平均算法從這個(gè)角度看是不科學(xué)的。應(yīng)該按照人類對(duì)光的感知程度為每個(gè)顏色設(shè)定一個(gè)權(quán)重,它們的之間的地位不應(yīng)該是平等的。
一個(gè)圖像處理通用的公式是:
Gray = (Red * 0.3 + Green * 0.59 + Blue * 0.11)
可以看到,每個(gè)顏色的系數(shù)相差很大。
現(xiàn)在對(duì)圖像灰度處理的最佳公式還存在爭(zhēng)議,有一些類似的公式:
Gray = (Red * 0.2126 + Green * 0.7152 + Blue * 0.0722)
or
Gray = (Red * 0.299 + Green * 0.587 + Blue * 0.114)
它們只是在系數(shù)上存在一些偏差,大體的比值差不多。
算法3 - 去飽和 使用算法3:在說這個(gè)算法之前,先說說RGB,大多數(shù)程序員都使用RGB模型,每一種顏色都可以由紅綠藍(lán)組成,RGB對(duì)計(jì)算機(jī)來說可以很好的描述顏色,但對(duì)于人類而言就很難理解了。如果升國(guó)旗的時(shí)候說,“五星紅旗多么RGB(255, 0, 42)”,可能會(huì)被暴打一頓。但我說鮮紅的五星紅旗,老師可能會(huì)點(diǎn)頭稱贊。
所以為了更通俗易懂,有時(shí)我們選擇HLS模型描述顏色,這三個(gè)字母分別表示Hue(色調(diào))、Saturation(飽和度)、Lightness(亮度)。色調(diào),取值為:0 - 360,0(或360)表示紅色,120表示綠色,240表示藍(lán)色,也可取其他數(shù)值來指定顏色。飽和度,取值為:0.0% - 100.0%,它通常指顏色的鮮艷程度。亮度,取值為:0.0% - 100.0%,黑色的亮度為0。
去飽和的過程就是把RGB轉(zhuǎn)換為HLS,然后將飽和度設(shè)為0。因此,我們需要取一種顏色,轉(zhuǎn)換它為最不飽和的值。這個(gè)數(shù)學(xué)公式比本文介紹的更復(fù)雜,這里提供一個(gè)簡(jiǎn)單的公式,一個(gè)像素可以被去飽和通過計(jì)算RGB中的最大值和最小值的中間值:
Gray = ( Math.max(Red, Green, Blue) + Math.min(Red, Green, Blue) ) / 2
去飽和后,圖片立體感減弱,但是更柔和。對(duì)比算法2,可以很明顯的看出差異,從效果上看,可能大多數(shù)人都喜歡算法2,算法3是目前為止,處理的圖片立體感最弱,最黑暗的。
算法4 - 分解 取最大值 取最小值分解算法可以認(rèn)為是去飽和更簡(jiǎn)單一種的方式。分解是基于每一個(gè)像素的,只取RGB的最大值或者最小值。
最大值分解:
Gray = Math.max(Red, Green, Blue)
最小值分解:
Gray = Math.min(Red, Green, Blue)
正如上面展現(xiàn)的,最大值分解提供了更明亮的圖,而最小值分解提供了更黑暗的圖。
算法5 - 單一通道 取紅色通道 取綠色通道 取藍(lán)色通道圖片變灰更快捷的方法,這個(gè)方法不用做任何計(jì)算,取一個(gè)通道的值直接作為灰度值。
Gray = Red
or
Gray = Green
or
Gray = Blue
不管相不相信,大多數(shù)數(shù)碼相機(jī)都用這個(gè)算法生成灰度圖片。很難預(yù)測(cè)這種轉(zhuǎn)換的結(jié)果,所以這種算法多用于藝術(shù)效果。
算法6 - 自定義灰度陰影 NumberOfShades = 4這是到目前為止最有趣的算法,允許用戶提供一個(gè)灰色陰影值,值的范圍在2-256。2的結(jié)果是一張全白的圖片,256的結(jié)果和算法1一樣。
NumberOfShades = 16該算法通過選擇陰影值來工作,它的公式有點(diǎn)復(fù)雜
ConversionFactor = 255 / (NumberOfShades - 1) AverageValue = (Red + Green + Blue) / 3 Gray = Math.round((AverageValue / ConversionFactor) + 0.5) * ConversionFactor
NumberOfShades 的范圍在2-256。
從技術(shù)上說,任何灰度算法都可以計(jì)算AverageValue,它僅僅提供一個(gè)初始灰度的估計(jì)值。
“+ 0.5” 是一個(gè)可選參數(shù),用于模擬四舍五入。
小節(jié)這是一篇很有趣的文章,不僅僅是介紹灰度算法,對(duì)了解圖片的處理過程也很有幫助。
ReferencesSeven grayscale conversion algorithms (with pseudocode and VB6 source code)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/82385.html
摘要:回溯法是一種選優(yōu)搜索法,按選優(yōu)條件向前搜索,以達(dá)到目標(biāo)。但當(dāng)探索到某一步時(shí),發(fā)現(xiàn)原先選擇并不優(yōu)或達(dá)不到目標(biāo),就退回一步重新選擇,這種走不通就退回再走的技術(shù)為回溯法。代碼請(qǐng)點(diǎn)這里這里有一個(gè)示例,展示下用回溯法怎么找到這些形狀的。 說明 canvas元素標(biāo)簽強(qiáng)大之處在于可以直接在HTML上進(jìn)行圖形操作,具有極大的應(yīng)用價(jià)值。 canvas 可以實(shí)現(xiàn)對(duì)圖像的像素操作,這就要說到 getImag...
摘要:以上,我們完成了的初步認(rèn)識(shí)擴(kuò)展使用做反轉(zhuǎn)圖首先反轉(zhuǎn)的意思是指,把每個(gè)像素點(diǎn)的每個(gè)值都與相減的值不改變,減完之后的值再次組成圖片,此時(shí)得到的新圖片就是我們的反轉(zhuǎn)圖片。第二步轉(zhuǎn)灰度圖或是,又稱灰階圖。用灰度表示的圖像稱作灰度圖。 效果圖 showImg(https://segmentfault.com/img/remote/1460000008704923?w=1813&h=845); 基...
摘要:以上,我們完成了的初步認(rèn)識(shí)擴(kuò)展使用做反轉(zhuǎn)圖首先反轉(zhuǎn)的意思是指,把每個(gè)像素點(diǎn)的每個(gè)值都與相減的值不改變,減完之后的值再次組成圖片,此時(shí)得到的新圖片就是我們的反轉(zhuǎn)圖片。第二步轉(zhuǎn)灰度圖或是,又稱灰階圖。用灰度表示的圖像稱作灰度圖。 效果圖 showImg(https://segmentfault.com/img/remote/1460000008704923?w=1813&h=845); 基...
閱讀 1618·2021-09-08 10:42
閱讀 3604·2021-08-11 10:23
閱讀 3959·2019-08-30 14:10
閱讀 2732·2019-08-29 17:29
閱讀 3090·2019-08-29 12:50
閱讀 637·2019-08-26 13:36
閱讀 3456·2019-08-26 11:59
閱讀 1487·2019-08-23 16:23