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

internet

開源者大會講稿

dorsywang

性能

处理速度经过 5 次优化,处理时间节省80%Chrome表现最好,大图可接受,小图很快多线程处理提升了超大图的处理速度

基于HTML5的图像处理库

功能设计

接口设计

应用场景

New Fetures

变换裁剪AlterationFilterTools->色系提取更多组合效果嵌入版开发

@Version 1.2

组合效果

14种预设合效果

开发者来组合新的效果

AlloyPhoto简约版

王斌

Dorsy腾讯前端工程师前端团队AlloyTeam成员专注于HTML5、图像处理以及前端工具的开发

AlloyImageHTML5专业图像处理开源引擎

腾讯AlloyTeam团队

多线程

难点1.  异步的困扰2.  文件的增多

不使用回调,保持API接口一致Worker文件引用自身,自身內部适应不同场景一句话开启多线程的支持

多线程

基础调节功能Alteration

色相饱和度亮度对比度曲线调节

只用一个函数,不同效果以参数区分

统一调用入口

每个效果一个函数

浏览器兼容性

>=9

接口设计

复古效果的诞生

灵活参数形式

滤镜

组合效果

混合模式

基础调节

直方图

滤镜Filter

类库的设计

用戶体验

开发体验

接口设计

设计原则------ write less, do more主要API英文名很短,很容易记忆参数传递灵活接口调用方便便捷的链式调用 

jQuery好用在哪

应用场景

Github搜索    AlloyPhoto

dorsyClip   http://honghu91.github.io/dorsyClip/

Q&A

团队    AlloyTeam邮箱    AlloyTeam@qq.com博客    http://www.alloyteam.com

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

作者    dorsy(王斌)邮箱    dorsywang@tencent.com

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

基础图形图形的基本绘制基本风格基础变换像素级操作

链式调用

灵活参数顺序

功能设计

代码架构

iPresst

具体应用场景

PC浏览器的HTML5项目或网站內嵌浏览器內核的桌面软件客戶端Win8 Metro应用Mobile App

多图层操作

Layer2

Layer1

Layer3

合成的图像

圖層之間相互不影響

4. 高斯模糊5. 调节色相、饱和度,勾选着色6. 以叠加的方式混合图层

复古效果原文步骤:1. 去色2. 新建图层,填充50%的灰度3. 添加杂色

与PS对应的  17  种混合模式

混合模式

对象名: AlloyImage 或 $AI

适配不同风格

初始化AlloyImage对象

友好参数

拓展支持

更容易拓展的滤镜更容易拓展的组合效果更容易使用的数学模块库

快速傅利叶变换矩阵运算Lagrange插值顏色模式互換……

定位

专业

直方图多图层操作混合模式基础调节功能Alteration滤镜Filter原生接口支持ctx多线程支持useWorker

重播 分享 评论
×
×

iPresst

版本:1.0

Copyright © iPresst.com. All Rights Reserved.

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