HTML5技術為我們帶來的圖像處理
HTML5技術可謂現在炙手可熱的流行新技術,但是HTML5到底能夠做什么呢?那就來看看國內的Web技術團隊 AlloyTeam 為我們做的這個HTML5前線的技術展示吧!之前很多HTML5的新聞都是浮于表面的講一些概括的、概念性的東西,很少具體的技術展示,這一次將讓你真切的感受HTML5所帶來的技術革新,讓你可以立刻在線體驗HTML5圖像技術為你帶來的便利。
很多人都需要處理照片,比如把一張照片轉換成素描風格,以往我們可能需要使用PhotoShop等客戶端圖像處理工具,但是,有了HTML5之后,這件小事就不需要啟動任何客戶端程序了,只要將照片輕輕拖進這個HTML5的WebApp頁面,只需要不到0.01毫秒即可獲得處理后的照片。
原圖:
處理后的圖片:
怎么樣,是不是迫不及待的想體驗一下這神奇的HTML5新技術?那就趕快來給你最親愛的她(不要給你的小三用哦)用HTML5技術來ps一張小清新的素描畫像吧(注意只能用現代瀏覽器(Chrome,Firefox,Opera,Safari等)打開哦,IE9以前的老古董就甭來啦):
技術實現詳解(內含Github開源地址):http://www.alloyteam.com/2012/07/convert-picture-to-sketch-by-canvas/
圖片處理在線體驗:http://apps.imatlas.com/sketching/
使用指引拖拽一張圖片到畫布區(就是下面打開的灰色地帶~),然后……就沒有然后啦,因為在0.01秒的時間內,照片已經處理完畢,點擊download按鈕可以下載生成的圖片。
如果感覺效果不太好,可以改下取樣的半徑(Sample size),為正整數,最小為1,之后點下action按鈕,生成新的素描圖。
如果你還不明白,下面來看圖說明(點擊圖片可以查看大圖)。
sketching 圖示 HTML5實現的原理就是使用Canvas技術對圖片做一下處理:
去色(黑白化)
復制一份,反相
把復制后的圖層疊加方式設為顏色減淡
高斯模糊
詳細的技術實現可以看這里(內含Github開源地址):http://www.alloyteam.com/2012/07/convert-picture-to-sketch-by-canvas/
【編輯推薦】