AlloyImage(AI)是一个基于html5技术的JS图像处理库,集成了一些方便快捷的图像处理API,您可以将它引用到您的网页中,结合css等技术,做出一些之前无法做到的优美效果,或者,提供一个用JS编写的在线图像处理工具等。
功能特性强大功能基于多图层操作--一个图层的处理不影响其他图层与PS对应的17种图层混合模式--便于PS处理教程的无缝迁移多种基本滤镜处理效果--基本滤镜不断丰富、可扩展基本的图像调节功能--色相、饱和度、对比度、亮度、曲线等便捷开发简单快捷的API--链式处理、API简洁易用、传参灵活多种组合效果封装--一句代码轻松实现一种风格友好参数支持--中、英文参数双向支持,降低专业词汇记忆门槛接口一致的单、多线程支持--单、多线程切换无需更改一行代码,多线程保持快捷API特性可预见的错误友好提醒--对一些可能出现错误的地方提醒,方便开发与调试丰富扩展方便的添加功能扩展--轻松添加滤镜插件为扩展提供数学封装--封装了一些数学模块供扩展调用建议使用场景1.桌面软件客户端内嵌网页运行方式打包webkit内核:用户较大头像上传风格处理、用户相册风格处理(处理时间平均1s)
.Win8Metro应用用户上传头像,比较小的图片风格处理后上传(Win8下IE10支持多线程)
.MobileAPPAndriod平台、IOS平台小图风格web处理的需求,如phoneGap应用,在线头像上传时的风格处理、mobileweb端分享图片时风格处理等
设计理念简单代码做复杂事情----Itseemslikesosimple!1.接口调用简单.提供进一步封装的组合效果方便调用.基于AI编写的alloyPhoto,完整展示AI的能力与接口,以及调用方法Demo展示,更易于学习
特点1.图层功能,提供图层的添加,删除,交换图层顺序等功能,且包含与PS相对应的17种图层混合模式.图像的基本调节功能,包括亮度、对比度,色相、饱和度、明度调节.多种滤镜功能,去色、反相、高斯模糊、锐化、浮雕效果、查找边缘、马赛克、腐蚀等.处理后文件的保存,处理完成之后,可以将文件输出为base6形式间接使用和保存5.高级组合效果,如素描,lomo,复古,素描等复合效果如一个素描效果的实现
varimg=newImage();img.src="pic.jpg";img.onload=function(){//素描效果AlloyImage(this).act("灰度处理").add(//添加一个图层上去AlloyImage(this).act("灰度处理").act("反色").act("高斯模糊",5),"颜色减淡").act("锐化").show();};
API参考初始化一个AlloyImage对象用img创建一个对象(图层)AlloyImage(img)或newAlloyImage(img)img可以是newImage()创建的对象,也可以是DOM树中的image元素,但在创建AlloyImage对象前确保img已经被onload成功,否则可能导致抛出异常
varimg=document.getElementsByTagName("img")[0];img.onload=function(){varAlloyImageObj=AlloyImage(this);};
创建一个纯色或透明的对象(图层)AlloyImageObjAlloyImage(Numberwidth,Numberheight,StringfillStyle)其中,width是图层宽度,height是图层高度,fillStyle是填涂的颜色,可以是#型,也可以是rgb(,,),甚至可以是rgba(,,,0),或"d"这样的字符串
一个AlloyImage对象可以看做是一个图层,也可以看做是一个工作文件
act说明:对单个图层进行效果处理语法:AlloyImageObjact(Stringmethod,Argsarg,...)其中method有以下可选参数
add说明:合并一个图层到本图层上去语法:AlloyImageObjadd(AlloyImageObjnew[,Stringmodel[,Numberdx,Numberdy,Stringalpha,Stringchannel]])本方法将会进行图层合并操作,会将新图层new以高于本图层的顺序,以model的混合模式,以相对本图层左上角为坐标原点的dx,dy偏移量合并到本图层,并返回合并后的图层对象参数说明:第一个参数为必须参数,其他全部为可选参数,并且除了第一个必须要是图层对象外,其他参数位置全部可以随意调(alloyPhoto很多api参数很灵活)model的模式有17种,其效果和Photoshop中效果对应"正常","颜色减淡","变暗","变亮","正片叠底","滤色","叠加","强光","差值","排除","点光","颜色加深","线性加深","线性减淡","柔光","亮光","线性光","实色混合"alpha代表透明度,要求为Sring类型,并且需要带%号,比如"0%","0%","%"(可以不写,默认值)dx,dy分别为Number类型channel为混合通道,表示以哪些通道混合,比如"RB",代表混合R、B通道
用例:
下面的例子表示m图层反色处理后,和m图层以正常(可以不写)的混合模式,0%的透明度,只混合B通道的选项进行合并操作
//...somecodehem.add(m.act("反色"),"正常","0%","B").place(this);
show说明:将当前图层以canvas元素显示出来语法:AlloyImageObjshow([StringcssSelector[,BooleanisFast]])设定了cssSelector之后,将会在cssSelector元素内追加canvas元素显示图层,如果没有cssSelector,将会在文档后追加canvas元素显示图层,isFast是快速显示标记,如果设定isFast为true,则图像将会以快速模式显示出来,可用于中间处理过程(图像品质降低)
place说明:将本图像替换image显示语法:AlloyImageObjplace(Imageimg)使用该方法后,img将会被本图像代替
varimg=document.getElementsByTagName("img")[0];img.loadOnce(function(){//loadOnce添加为alloyPhoto添加/*防止用onload事件注册后place会改变img的src导致onload事件再次触发形成循环*/varps=AlloyImage(this);ps.act("反色").place(this);});
clone说明:复制图层对象语法:AlloyImageObjclone()使用该方法后,将会返回一个图层副本。我们都知道,基于js对象都是引用传递,所以,此方法构造一个与原图层无关的图层副本如varlayer=layer.clone();
view说明:预览模式下处理语法:AlloyImageObjview(Stringmethod,Argsarg,...)此方法和act很相似,但此方法可以记录view之前的状态,配合excute和cancel使用来执行或取消处理
excute说明:执行预览模式下的操作语法:AlloyImageObjexcute()
cancel说明:取消预览模式下所做的处理语法:AlloyImageObjcancel()
ctx说明:调用原生CanvasAPI语法:AlloyImageObjctx(Functionfunc)func为对图层的处理函数,其内部this指向canvas的context如
varimg=document.getElementsByTagName("img")[0];img.loadOnce(function(){//loadOnce添加为alloyPhoto添加/*防止用onload事件注册后place会改变img的src导致onload事件再次触发形成循环*/varps=AlloyImage(this);ps.ctx(function(){this.fillStyle="d";this.fillRect(0,0,,);}).place(this);});
多图层操作addLayer说明:添加一个图层到本图层上去,不进行合并操作,不会对本图层产生影响语法:AlloyImageObjaddLayer(AlloyImageObjnew[,Stringmodel[,Numberdx,Numberdy]])addLayer方法与add的方法不同出在于,add方法会将new图层合并到本图层去,返回一个合并后的图层,addLayer方法会将一个图层挂载到本图层,返回的对象为一个复合的图层,不会本图层和new图层,但对new图层的后续处理会影响复合图层的显示,add方法则不会
swap说明:交换两个图层的顺序语法:AlloyImageObjswap(NumberindexA,NumberindexB)indexA、indexB分别表示图层顺序所代表的图层,使用该方法后,将会改变两图层的顺序
deleteLayers说明:删除一个或多个图层语法:AlloyImageObjdeleteLayers(ArrayindexArr)删除图层顺序为indexArr数组中的图层
复合效果ps说明:调用一个组合动作构成的复合效果语法:AlloyImageObjps(Stringeffect)effect具体可选值如下
varimg=document.getElementsByTagName("img")[0];img.loadOnce(function(){//loadOnce添加为alloyPhoto添加/*防止用onload事件注册后place会改变img的src导致onload事件再次触发形成循环*/varai=AlloyImage(this);ai.ps("自然增强").place(this);});
使用多线程处理New开启多线程注:alloyimage1.1及以下版本不支持此功能,如需要使用可以用多线程测试link中引用的alloyimage版本或者git上最新源码,多图层处理中的API(addLayer,swap,deleteLayers)暂时不支持此功能.
用法:$AI.useWorker(Stringpath);或者AlloyImage.useWorker(Stringpath);说明:其中,path参数为alloyimage文件相对当前html文档的路径不需要更改原AI代码,只需要使用AI代码前加上此句即可,删除此句,便是传统单线程.加上就是多线程.
window.onload=function(){varimg=document.getElementById("pic");//此句为开启多线程$AI.useWorker("js/