HTML5技術(shù)可謂現(xiàn)在炙手可熱的流行新技術(shù)，但是HTML5到底能夠做什么呢？那就來(lái)看看國(guó)內(nèi)的Web技術(shù)團(tuán)隊(duì) AlloyTeam 為我們做的這個(gè)HTML5前線的技術(shù)展示吧！之前很多HTML5的新聞都是浮于表面的講一些概括的、概念性的東西，很少具體的技術(shù)展示，這一次將讓你真切的感受HTML5所帶來(lái)的技術(shù)革新，讓你可以立刻在線體驗(yàn)HTML5圖像技術(shù)為你帶來(lái)的便利。

很多人都需要處理照片，比如把一張照片轉(zhuǎn)換成素描風(fēng)格，以往我們可能需要使用PhotoShop等客戶端圖像處理工具，但是，有了HTML5之后，這件小事就不需要啟動(dòng)任何客戶端程序了，只要將照片輕輕拖進(jìn)這個(gè)HTML5的WebApp頁(yè)面，只需要不到0.01毫秒即可獲得處理后的照片。

原圖：

處理后的圖片：


怎么樣，是不是迫不及待的想體驗(yàn)一下這神奇的HTML5新技術(shù)？那就趕快來(lái)給你最親愛(ài)的她（不要給你的小三用哦）用HTML5技術(shù)來(lái)ps一張小清新的素描畫像吧（注意只能用現(xiàn)代瀏覽器（Chrome，F(xiàn)irefox，Opera，Safari等）打開(kāi)哦，IE9以前的老古董就甭來(lái)啦）：

圖片處理在線體驗(yàn)：http://apps./sketching/
使用指引拖拽一張圖片到畫布區(qū)（就是下面打開(kāi)的灰色地帶～），然后……就沒(méi)有然后啦，因?yàn)樵?.01秒的時(shí)間內(nèi)，照片已經(jīng)處理完畢，點(diǎn)擊download按鈕可以下載生成的圖片。

如果感覺(jué)效果不太好，可以改下取樣的半徑（Sample size），為正整數(shù)，最小為1，之后點(diǎn)下action按鈕，生成新的素描圖。

如果你還不明白，下面來(lái)看圖說(shuō)明（點(diǎn)擊圖片可以查看大圖）。



sketching 圖示 HTML5實(shí)現(xiàn)的原理就是使用Canvas技術(shù)對(duì)圖片做一下處理：

1. 去色（黑白化）
2. 復(fù)制一份，反相
3. 把復(fù)制后的圖層疊加方式設(shè)為顏色減淡
4. 高斯模糊

詳細(xì)的技術(shù)實(shí)現(xiàn)可以看這里（內(nèi)含Github開(kāi)源地址）：http://www./2012/07/convert-picture-to-sketch-by-canvas/
更多HTML5的新技術(shù)體驗(yàn)請(qǐng)?jiān)L問(wèn)我們的Web技術(shù)Blog：http://www.AlloyTeam.com/