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

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供盈江網(wǎng)站建設(shè)、盈江做網(wǎng)站、盈江網(wǎng)站設(shè)計、盈江網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、盈江企業(yè)網(wǎng)站模板建站服務,十載盈江做網(wǎng)站經(jīng)驗,不只是建網(wǎng)站,更提供有價值的思路和整體網(wǎng)絡(luò)服務。
很多人都需要處理照片,比如把一張照片轉(zhuǎn)換成素描風格,以往我們可能需要使用PhotoShop等客戶端圖像處理工具,但是,有了HTML5之后,這件小事就不需要啟動任何客戶端程序了,只要將照片輕輕拖進這個HTML5的WebApp頁面,只需要不到0.01毫秒即可獲得處理后的照片。
原圖:
處理后的圖片:
怎么樣,是不是迫不及待的想體驗一下這神奇的HTML5新技術(shù)?那就趕快來給你最親愛的她(不要給你的小三用哦)用HTML5技術(shù)來ps一張小清新的素描畫像吧(注意只能用現(xiàn)代瀏覽器(Chrome,F(xiàn)irefox,Opera,Safari等)打開哦,IE9以前的老古董就甭來啦):
技術(shù)實現(xiàn)詳解(內(nèi)含Github開源地址):http://www.alloyteam.com/2012/07/convert-picture-to-sketch-by-canvas/
圖片處理在線體驗:http://apps.imatlas.com/sketching/
使用指引拖拽一張圖片到畫布區(qū)(就是下面打開的灰色地帶~),然后……就沒有然后啦,因為在0.01秒的時間內(nèi),照片已經(jīng)處理完畢,點擊download按鈕可以下載生成的圖片。
如果感覺效果不太好,可以改下取樣的半徑(Sample size),為正整數(shù),最小為1,之后點下action按鈕,生成新的素描圖。
如果你還不明白,下面來看圖說明(點擊圖片可以查看大圖)。
sketching 圖示 HTML5實現(xiàn)的原理就是使用Canvas技術(shù)對圖片做一下處理:
去色(黑白化)
復制一份,反相
把復制后的圖層疊加方式設(shè)為顏色減淡
高斯模糊
詳細的技術(shù)實現(xiàn)可以看這里(內(nèi)含Github開源地址):http://www.alloyteam.com/2012/07/convert-picture-to-sketch-by-canvas/
本文題目:HTML5技術(shù)為我們帶來的圖像處理
網(wǎng)頁鏈接:http://m.fisionsoft.com.cn/article/cdjjjds.html


咨詢
建站咨詢
