HTML5專業圖像處理開源引擎-AlloyImage

internet

javascript html5 圖像處理

開源者大會講稿

weber

適配不同風格

初始化AlloyImage對象

對象名: AlloyImage 或 $AI

靈活參數形式

組合效果

14種預設組合效果

開發者來組合新的效果

AlloyPhoto簡約版

代碼架構

統一調用入口

每個效果一個函數

只用一個函數,不同效果以參數區分

具體應用場景

PC瀏覽器的HTML5項目或網站內嵌瀏覽器內核的桌面軟件客戶端Win8 Metro應用Mobile App

iPresst

基礎路徑圖形的基本繪製基本風格基礎變換像素級操作

濾鏡

類庫的設計

用戶體驗

開發體驗

接口設計

AlloyImageHTML5專業圖像處理開源引擎

騰訊AlloyTeam團隊

鏈式調用

多線程

不使用回調,保持API接口一致Worker文件引用自身,自身內部適應不同場景一句話開關多線程支持

專業

直方圖多圖層操作混合模式基礎調節功能濾鏡原生接口支持多線程支持

定位

Weber騰訊前端工程師前端團隊AlloyTeam成員專注于HTML5、排版、圖像處理的結合

王斌

Dorsy騰訊前端工程師前端團隊AlloyTeam成員專注于HTML5、圖像處理以及前端工具開發

潘佳韓

jQuery好用在哪

設計原則 ------ write less, do more主要API英文名很短,很容易記憶參數傳遞靈活接口調用方便便捷的鏈式調用 

性能

處理速度經過 5 次優化,處理時間節省80%Chrome表現最好,大圖可接受,小圖很快多線程處理提升了超大圖的處理速度

Layer1

Layer3

合成的图像

圖層之間相互不影響

多圖層操作

Layer2

接口設計

復古效果的誕生

友好參數

拓展支持

更容易拓展的濾鏡更容易拓展的組合效果更容易使用的數學模塊庫

快速傅利葉變換矩陣運算Lagrange插值顏色模式互換……

功能設計

基礎調節功能

色相飽和度亮度對比度曲綫調節

>=9

瀏覽器兼容性

基於HTML5的圖像處理庫

功能設計

接口設計

應用場景

直方圖

多線程

難點1.  異步的困擾2.  文件的增多

靈活參數順序

與PS對齊的  17  種混合模式

混合模式

組合效果

混合模式

基礎調節

濾鏡

應用場景

團隊    AlloyTeam郵箱    AlloyTeam@qq.com博客    http://www.alloyteam.com

Github首頁    http://alloyteam.github.com

個人    weber(潘佳韓)郵箱    weberpan@tencent.com作者    dorsy(王斌)郵箱    dorsywang@tencent.com

AlloyImage    http://alloyteam.github.io/AlloyPhoto/ iPresst官網    http://www.ipresst.com

Github搜索    AlloyPhoto

Q&A

復古效果原文步驟:1. 去色2. 新建圖層,填充50%的灰度3. 添加雜色

4. 高斯模糊5. 調節色相飽和度,選擇著色6. 以疊加的方式混合圖層

重播 分享 评论
×
×

iPresst

版本:1.0

Copyright © iPresst.com. All Rights Reserved.

创作者:TAT.Aishen, TAT.CG, TAT.DM, TAT.Jarvis, TAT.Kinvix, TAT.Weber, TAT.Yussica