畢設(shè)題目：基于HTML5

1、畢設(shè)題目：基于HTML5的圖像油畫效果處理 答辯人： 馮新新 指導(dǎo)老師： 芮雄麗 答辯日期：2015年6月4日主要研究?jī)?nèi)容基于HTML5的油畫效果處理系統(tǒng)灰度化處理馬賽克處理油畫效果處理課題研究背景與意義w 如今，HTML5發(fā)展的越來越快，它不僅簡(jiǎn)化了網(wǎng)頁(yè)的結(jié)構(gòu)，而且新加入的標(biāo)簽，它使得HTML5更易讓人理解。HTML5給予網(wǎng)頁(yè)更好的意義，它具有良好的移動(dòng)性，在設(shè)備兼容等方面都有良好的支持特性。人們對(duì)圖像處理成油畫效果的要求越來越高。生活里有許多軟件可以對(duì)圖片作油畫處理，有些的油畫效果并不另人滿意。本設(shè)計(jì)在油畫處理方面的優(yōu)勢(shì)在于：一方面這是專門使圖片呈現(xiàn)油畫效果的程序；另一方面這是通過新興的語

2、言HTML5編寫出的，這具有很大的發(fā)展?jié)摿Α?主要的算法思想w用當(dāng)前點(diǎn)四周一定范圍任意一點(diǎn)的顏色來替代當(dāng)前點(diǎn)顏色，用當(dāng)前點(diǎn)四周一定范圍任意一點(diǎn)的顏色來替代當(dāng)前點(diǎn)顏色，最常用的是隨機(jī)的采用相鄰點(diǎn)進(jìn)行替代。最常用的是隨機(jī)的采用相鄰點(diǎn)進(jìn)行替代。2. 該算法遍歷圖上的每個(gè)像素，針對(duì)當(dāng)前位置該算法遍歷圖上的每個(gè)像素，針對(duì)當(dāng)前位置 (x, y) 像素，將像素，將模板范圍內(nèi)的所有像素灰度化，即把圖像變成灰度圖像，模板范圍內(nèi)的所有像素灰度化，即把圖像變成灰度圖像，然后把像素值進(jìn)一步離散化，即根據(jù)像素的灰度落入的區(qū)然后把像素值進(jìn)一步離散化，即根據(jù)像素的灰度落入的區(qū)間，把模板內(nèi)的像素依次投入到相應(yīng)的桶間，把模板內(nèi)

3、的像素依次投入到相應(yīng)的桶 中。然后從這些中。然后從這些桶中找到一個(gè)落入像素個(gè)數(shù)最多的桶，并對(duì)該桶中的所有桶中找到一個(gè)落入像素個(gè)數(shù)最多的桶，并對(duì)該桶中的所有像素求出顏色平均值，作為位置像素求出顏色平均值，作為位置 (x, y) 的結(jié)果值。的結(jié)果值。w上面的算法描述，用下面的示意圖來表示。中間的圖上面的算法描述，用下面的示意圖來表示。中間的圖像是從原圖灰度化像是從原圖灰度化+離散化（相當(dāng)于離散化（相當(dāng)于 Photoshop 中的色中的色調(diào)分離）的結(jié)果，小方框表示的是模板。下方表示的是桶調(diào)分離）的結(jié)果，小方框表示的是模板。下方表示的是桶陣列（陣列（8 個(gè)桶，即把個(gè)桶，即把0255的灰度值離散化成的灰

4、度值離散化成 8 個(gè)區(qū)間個(gè)區(qū)間段）。段）。各個(gè)功能模塊的簡(jiǎn)介各個(gè)功能模塊的簡(jiǎn)介w1.圖片的預(yù)覽及顯示w2.圖片的灰度化w3圖片馬賽克處理w4油畫效果處理一w5油畫效果處理二圖片的預(yù)覽及顯示w在頁(yè)面中插入圖像有三步要走：第一點(diǎn)在HTML代碼中，將光標(biāo)放置在圖片顯示的位置；二輸入。 圖像的灰度化處理w 在進(jìn)行灰度化的操作時(shí)，要了解RGB顏色空間模型。 R,G,B分別代表紅、綠、藍(lán)三基色的值?；叶染褪呛诎讏D像里的顏色深度，范圍一般是從0到255，黑色為0，白色為255，所以黑白圖片也叫灰度的圖像，我們可以通過好幾種方法計(jì)算灰度。w本設(shè)計(jì)所采用的算法為Gray=0.299*R+0.587*G+0.14

5、4*B; 將原來的RGB里的用Gray來替換，這樣形成RGB（Gray，Gray，Gray），用它來替換以前的灰度圖。w 圖片的馬賽克處理w用RGB來作例子，紅，綠，藍(lán)。這三個(gè)顏色都有256種取值，數(shù)字越大越亮。馬賽克就是圈出一個(gè)范圍，一般用長(zhǎng)方形或者正方形來圈，通過將把圈內(nèi)的R值相加求平均值，同理，把G，B值的和求出，再算平均值。這樣就形成了一種顏色，形成了馬賽克。w本文采用當(dāng)前點(diǎn)一定范圍內(nèi)的任意一點(diǎn)的隨機(jī)一點(diǎn)的顏色替代當(dāng)前點(diǎn)顏色，這樣的馬賽克效果還挺明顯的。油畫效果處理一w 其具體的運(yùn)算方式如下：這個(gè)算法利用模板，會(huì)遍歷圖上的每個(gè)像素，針對(duì)當(dāng)前的位置像素，將模板里的所有像素值灰度化，就是把

6、圖像變成灰度圖像，然后把像素值進(jìn)一步的離散化。至于如何使它離散，將它的像素的灰度0到255分成幾個(gè)區(qū)間。依據(jù)像素的大小分在不同的區(qū)間里，計(jì)算出那個(gè)區(qū)間里的像素值最多，求出其平均值作為模板中點(diǎn)的像素值。經(jīng)過這些操作最終使圖像呈現(xiàn)油畫效果。 油畫效果處理二w 另一種方式得到效果不是很明顯的油畫效果，最常采用當(dāng)前點(diǎn)的四周一定范圍內(nèi)任意一點(diǎn)作為當(dāng)前點(diǎn)的顏色，最經(jīng)常采用的算法是隨機(jī)的采用相鄰點(diǎn)來代替當(dāng)前點(diǎn)的值。如果這個(gè)范圍取得太大，油畫的效果就不是很明顯的，所以盡量取小一點(diǎn)的范圍，這樣的油畫效果會(huì)很明顯。本設(shè)計(jì)的亮點(diǎn)w本設(shè)計(jì)注重實(shí)際應(yīng)用，與現(xiàn)實(shí)需求相呼應(yīng)，具有很高的現(xiàn)實(shí)運(yùn)用價(jià)值。，利用HTML5強(qiáng)大的腳

7、本和布局之間的原生交互功能，可以直接用CSS和JavaScript的方式控制頁(yè)面布局和操作圖形圖像 ，不需要借助外來插件，也不需要使用復(fù)雜的編程技巧。 w 同時(shí)采用兩種方式得到油畫效果，允許用戶自由比較選擇，來選出最好的一種效果。設(shè)計(jì)時(shí)遇到的問題及解決w問題1：圖片只能預(yù)覽，卻不能顯示在網(wǎng)頁(yè)上w解決：經(jīng)查資料，知道需要?jiǎng)?chuàng)建畫布。w它是通過在HTML頁(yè)面中部分，在它里面放置標(biāo)簽創(chuàng)建的，當(dāng)然也可以通過下面這代碼創(chuàng)建畫布實(shí)例。wVar theCanvas=document.createElement(“canvas”)；w問題2 未能按照開題時(shí)的思路完成油畫效果w解決：尋找到更加簡(jiǎn)單的方式解決。本設(shè)計(jì)的不足和展望w油畫處理的效果并不是很明顯，實(shí)現(xiàn)的功能不是很多。w展望：希望在算法中，選取更好的模板，達(dá)到更好的處理效果。可以實(shí)現(xiàn)更多的功能，比如膨脹，腐蝕，高斯模糊等操作。功能展示whttp:/localhost:63342/untitled/file1.html致謝w首先以最真誠(chéng)的心感謝的指導(dǎo)老師芮雄麗老師，感謝她的監(jiān)督和幫助，每當(dāng)自己遇到問題時(shí)，第一想