AlloyImage(AI)是一个基于html5技术的JS图像处理库,集成了一些方便快捷的图像处理API,您可以将它引用到您的网页中,结合css3等技术,做出一些之前无法做到的优美效果,或者,提供一个用JS编写的在线图像处理工具等。
功能特性
强大功能
基于多图层操作 — 一个图层的处理不影响其他图层
与 PS 对应的17种图层混合模式 — 便于PS处理教程的无缝迁移
多种基本滤镜处理效果 — 基本滤镜不断丰富、可扩展
基本的图像调节功能 — 色相、饱和度、对比度、亮度、曲线等
便捷开发
简单快捷的 API — 链式处理、API简洁易用、传参灵活
多种组合效果封装 — 一句代码轻松实现一种风格
友好参数支持 — 中、英文参数双向支持,降低专业词汇记忆门槛
接口一致的单、多线程支持 — 单、多线程切换无需更改一行代码,多线程保持快捷API特性
可预见的错误友好提醒 — 对一些可能出现错误的地方提醒,方便开发与调试
丰富扩展
方便的添加功能扩展 — 轻松添加滤镜插件
为扩展提供数学封装 — 封装了一些数学模块供扩展调用
建议使用场景
1.桌面软件客户端内嵌网页运行方式 >>>打包webkit内核: 用户较大头像上传风格处理、用户相册风格处理(处理时间平均<1s)
2.Win8 Metro应用 >>>用户上传头像,比较小的图片风格处理后上传(Win8下IE10支持多线程)
3.Mobile APP >>>Andriod平台、IOS平台小图风格web处理的需求,如phoneGap应用, 在线头像上传时的风格处理、mobile web端分享图片时风格处理等
设计理念
简单代码做复杂事情—-It seems like so simple!
1.接口调用简单
2.提供进一步封装的组合效果方便调用
3.基于AI编写的alloyPhoto,完整展示AI的能力与接口,以及调用方法Demo展示,更易于学习
特点
1.图层功能,提供图层的添加,删除,交换图层顺序等功能,且包含与PS相对应的17种图层混合模式
2.图像的基本调节功能,包括亮度、对比度,色相、饱和度、明度调节
3.多种滤镜功能,去色、反相、高斯模糊、锐化、浮雕效果、查找边缘、马赛克、腐蚀等
4.处理后文件的保存,处理完成之后,可以将文件输出为base64形式间接使用和保存
5.高级组合效果,如素描,lomo,复古,素描等复合效果 如一个素描效果的实现
var img = new Image();
img.src = "pic.jpg";
img.onload = function(){
//素描效果
AlloyImage(this).act("灰度处理").add(//添加一个图层上去
AlloyImage(this).act("灰度处理").act("反色").act("高斯模糊",5) , "颜色减淡"
).act("锐化").show();
};
API 参考
初始化一个AlloyImage对象
用img创建一个对象(图层)
AlloyImage(img) 或 new AlloyImage(img)
img可以是new Image()创建的对象,也可以是DOM树中的image元素,但在创建AlloyImage对象前确保 img已经被onload成功,否则可能导致抛出异常
var img = document.getElementsByTagName("img")[0];
img.onload = function(){
var AlloyImageObj = AlloyImage(this);
};
创建一个纯色或透明的对象(图层)
AlloyImageObj AlloyImage(Number width,Number height,String fillStyle)
其中,width是图层宽度,height是图层高度,fillStyle是填涂的颜色,可以是#233322型,也可以是rgb(23,23,23),甚至可以是rgba(23,23,23,0),或”red”这样的字符串
一个AlloyImage对象可以看做是一个图层,也可以看做是一个工作文件
act
说明:对单个图层进行效果处理
语法:AlloyImageObj act(String method,Args arg,…)
其中 method有以下可选参数
参数
友好参数
功能
附加参数
用法示例
brightness
亮度
调节亮度与对比度
亮度,对比度
act(“brightness”,10,20)
setHSI
色相/饱和度调节
调节图像色相与饱和度
色相,饱和度,明度,是否着色模式(可选)
act(“setHSI”,10,0,10,true)
curve
曲线
调节灰度曲线
节点x的坐标数组,节点y的坐标数组
act(“curve”,[0,65,128,255], [0,120,220,255])
toGray
灰度处理
将图像处理为灰度图像
无
act(“toGray”)
toThresh
灰度阈值
将图像二值化
阈值
act(“toThresh”,128)
toReverse
反色
将图像进行反相操作
无
act(“toReverse”)
gaussBlur
高斯模糊
将图像进行高斯模糊
模糊大小
act(“gaussBlur”,10)
sharp
锐化
将图像进行锐化
锐化大小
act(“sharp”,10)
mosaic
马赛克
将图像进行马赛克处理
马赛克大小
act(“mosaic”,10)
embossment
浮雕效果
将图像进行浮雕效果处理
无
act(“embossment”)
corrode
腐蚀
将图像进行腐蚀效果处理
无
act(“corrode”)
noise
添加杂色
在图像上添加杂色
杂色数量
act(“noise”,10)
darkCorner
暗角
在图像四角添加暗角
暗角大小0-10, 暗角增加的暗度0-255
act(“darkCorner”, 3, 200)
dotted
喷点
在图像中添加白色的点
无
act(“dotted”)
add
说明:合并一个图层到本图层上去
语法:AlloyImageObj add(AlloyImageObj new[,String model [,Number dx,Number dy,String alpha,String channel]])
本方法将会进行图层合并操作,会将新图层new以高于本图层的顺序,以model的混合模式,以相对本图层左上角为坐标原点的dx,dy偏移量合并到本图层,并返回合并后的图层对象
参数说明:第一个参数为必须参数,其他全部为可选参数,并且除了第一个必须要是图层对象外,其他参数位置全部可以随意调(alloyPhoto很多api参数很灵活)
model的模式有17种,其效果和Photoshop中效果对应
“正常”,”颜色减淡”,”变暗”,”变亮”,”正片叠底”,”滤色”,”叠加”,”强光”,”差值”,”排除”,”点光”,”颜色加深”,”线性加深”,”线性减淡”,”柔光”,”亮光”,”线性光”,”实色混合”
alpha代表透明度,要求为Sring类型,并且需要带%号,比如”20%”,”0%”,”100%”(可以不写,默认值)
dx,dy分别为Number类型
channel为混合通道,表示以哪些通道混合,比如”RB”,代表混合R、B通道
用例:
下面的例子表示m2图层反色处理后,和m图层以正常(可以不写)的混合模式,20%的透明度,只混合B通道的选项进行合并操作
//...some code here
m.add(
m2.act("反色") , "正常","20%","B"
).replace(this);
show
说明:将当前图层以canvas元素显示出来 语法:AlloyImageObj show([String cssSelector[,Boolean isFast]])
设定了cssSelector之后,将会在cssSelector元素内追加canvas元素显示图层,如果没有cssSelector,将会在文档后追加canvas元素显示图层,isFast是快速显示标记,如果设定isFast为true,则图像将会以快速模式显示出来,可用于中间处理过程(图像品质降低)
replace
说明:将本图像替换image显示 语法:AlloyImageObj replace(Image img)
使用该方法后,img将会被本图像代替
var img = document.getElementsByTagName("img")[0];
img.loadOnce(function(){//loadOnce添加为alloyPhoto添加
/*
防止用onload事件注册后 replace会改变img的src导致onload事件再次触发形成循环
*/
var ps = AlloyImage(this);
ps.act("反色").replace(this);
});
clone
说明:复制图层对象
语法:AlloyImageObj clone()
使用该方法后,将会返回一个图层副本。我们都知道,基于js对象都是引用传递,所以,此方法构造一个与原图层无关的图层副本
如 var layer2 = layer.clone();
view
说明:预览模式下处理
语法:AlloyImageObj view(String method,Args arg,…)
此方法和act很相似,但此方法可以记录view之前的状态,配合excute和cancel使用来执行或取消处理
excute
说明:执行预览模式下的操作
语法:AlloyImageObj excute()
cancel
说明:取消预览模式下所做的处理
语法:AlloyImageObj cancel()
ctx
说明:调用原生Canvas API
语法:AlloyImageObj ctx(Function func)
func为对图层的处理函数,其内部this指向canvas的context
如
var img = document.getElementsByTagName("img")[0];
img.loadOnce(function(){//loadOnce添加为alloyPhoto添加
/*
防止用onload事件注册后 replace会改变img的src导致onload事件再次触发形成循环
*/
var ps = AlloyImage(this);
ps.ctx(function(){
this.fillStyle = "red";
this.fillRect(0, 0, 100, 100);
}).replace(this);
});
多图层操作
addLayer
说明:添加一个图层到本图层上去,不进行合并操作,不会对本图层产生影响
语法:AlloyImageObj addLayer(AlloyImageObj new[,String model [,Number dx,Number dy]])
addLayer方法与add的方法不同出在于,add方法会将new图层合并到本图层去,返回一个合并后的图层,addLayer方法会将一个图层挂载到本图层,返回的对象为一个复合的图层,不会本图层和new图层,但对new 图层的后续处理会影响复合图层的显示,add方法则不会
swap
说明:交换两个图层的顺序
语法:AlloyImageObj swap(Number indexA,Number indexB)
indexA、indexB分别表示图层顺序所代表的图层,使用该方法后,将会改变两图层的顺序
deleteLayers
说明:删除一个或多个图层
语法:AlloyImageObj deleteLayers(Array indexArr)
删除图层顺序为indexArr数组中的图层
复合效果
ps
说明:调用一个组合动作构成的复合效果
语法:AlloyImageObj ps(String effect)
effect具体可选值如下
method值
友好值
备注
softenFace
美肤
美化肤色
sketch
素描
无
softEnhancement
自然增强
使图片效果增强
purpleStyle
紫调
无
soften
柔焦
无
vintage
复古
无
gray
黑白
无
lomo
仿lomo
无
strongEnhancement
亮白增强
无
strongGray
灰白
无
lightGray
灰色
无
warmAutumn
暖秋
无
carveStyle
木雕
无
rough
粗糙
无
var img = document.getElementsByTagName("img")[0];
img.loadOnce(function(){//loadOnce添加为alloyPhoto添加
/*
防止用onload事件注册后 replace会改变img的src导致onload事件再次触发形成循环
*/
var ai = AlloyImage(this);
ai.ps("自然增强").replace(this);
});
使用多线程处理New
开启多线程
注:alloyimage1.1及以下版本不支持此功能,如需要使用可以用多线程测试link中引用的alloyimage版本或者git上最新源码,多图层处理中的API(addLayer, swap, deleteLayers)暂时不支持此功能.
用法: $AI.useWorker(String path); 或者 AlloyImage.useWorker(String path);
说明: 其中,path参数为alloyimage文件相对当前html文档的路径
不需要更改原AI代码,只需要使用AI代码前加上此句即可,删除此句,便是传统单线程.加上就是多线程.
window.onload = function(){
var img = document.getElementById("pic");
//此句为开启多线程
$AI.useWorker("js/combined/alloyimage.js");
$AI(img).ps("素描").show("#m");
};
使用回调
用法: AlloyImageObj complete(Function callback);
说明: 处理完之后的回调
注意: 此方法单线程同样支持
window.onload = function(){
var img = document.getElementById("pic");
//此句为开启多线程
$AI.useWorker("js/combined/alloyimage.js");
$AI(img).ps("素描").show("#m").complete(function(){
console.log("img OK");
});
};
demo
1.鼠标滑上变彩色,移开灰度
var pics = document.getElementsByTagName("img");
for(var i = 0;i < pics.length;i ++){
pics[i].loadOnce(function(){
/*
防止用onload事件注册后 replace会改变img的src导致onload事件再次触发形成循环
*/
var picTranseObj = AlloyImage(this);//创建一个AlloyImage对象
var origin = picTranseObj.clone();//克隆原始对象做为副本
var grayPic = picTranseObj.act("灰度处理");//灰度后的图像
grayPic.replace(this);
this.onmouseover = function(){
origin.replace(this);//显示原始图像
};
this.onmouseout = function(){
grayPic.replace(this);//显示灰度图像
};
});
}
2.lomo风格图像
var pics = document.getElementsByTagName("img");
for(var i = 0;i < pics.length;i ++){
pics[i].loadOnce(function(){
/*
防止用onload事件注册后 replace会改变img的src导致onload事件再次触发形成循环
*/
var m = AlloyImage(this).add(
AlloyImage(this) , "滤色"
).add(
AlloyImage(this) , "柔光"
);
var m2 = m.clone();
m.add(
m2.act("反色") , "正常","20%","B"
).replace(this);
});
}
3.复古风格
var pics = document.getElementsByTagName("img");
for(var i = 0;i < pics.length;i ++){
pics[i].loadOnce(function(){
/*
防止用onload事件注册后 replace会改变img的src导致onload事件再次触发形成循环
*/
var m = AlloyImage(this).act("灰度处理").add(
AlloyImage(this.width,this.height,"#808080")
.act("添加杂色")
.act("高斯模糊",4)
.act("色相/饱和度调节",32,19,0,true),
"叠加"
).show();
});
}
更多效果及API后续添加,敬请期待