新聞中心
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)的便利。

創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供盈江網(wǎng)站建設(shè)、盈江做網(wǎng)站、盈江網(wǎng)站設(shè)計(jì)、盈江網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、盈江企業(yè)網(wǎng)站模板建站服務(wù),十載盈江做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
很多人都需要處理照片,比如把一張照片轉(zhuǎn)換成素描風(fēng)格,以往我們可能需要使用PhotoShop等客戶(hù)端圖像處理工具,但是,有了HTML5之后,這件小事就不需要啟動(dòng)任何客戶(hù)端程序了,只要將照片輕輕拖進(jìn)這個(gè)HTML5的WebApp頁(yè)面,只需要不到0.01毫秒即可獲得處理后的照片。
原圖:
處理后的圖片:
怎么樣,是不是迫不及待的想體驗(yàn)一下這神奇的HTML5新技術(shù)?那就趕快來(lái)給你最親愛(ài)的她(不要給你的小三用哦)用HTML5技術(shù)來(lái)ps一張小清新的素描畫(huà)像吧(注意只能用現(xiàn)代瀏覽器(Chrome,F(xiàn)irefox,Opera,Safari等)打開(kāi)哦,IE9以前的老古董就甭來(lái)啦):
技術(shù)實(shí)現(xiàn)詳解(內(nèi)含Github開(kāi)源地址):http://www.alloyteam.com/2012/07/convert-picture-to-sketch-by-canvas/
圖片處理在線體驗(yàn):http://apps.imatlas.com/sketching/
使用指引拖拽一張圖片到畫(huà)布區(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ì)圖片做一下處理:
去色(黑白化)
復(fù)制一份,反相
把復(fù)制后的圖層疊加方式設(shè)為顏色減淡
高斯模糊
詳細(xì)的技術(shù)實(shí)現(xiàn)可以看這里(內(nèi)含Github開(kāi)源地址):http://www.alloyteam.com/2012/07/convert-picture-to-sketch-by-canvas/
網(wǎng)頁(yè)標(biāo)題:HTML5技術(shù)為我們帶來(lái)的圖像處理
標(biāo)題URL:http://www.dlmjj.cn/article/cdjjjds.html


咨詢(xún)
建站咨詢(xún)
