基于HTML5的专业级图像处理开源引擎。An image processing lib based on html5.
OTHER License
1.桌面软件客户端内嵌网页运行方式 >>>打包webkit内核: 用户较大头像上传风格处理、用户相册风格处理(处理时间平均<1s)
2.Win8 Metro应用 >>>用户上传头像,比较小的图片风格处理后上传(Win8下IE10支持多线程)
3.Mobile APP >>>Andriod平台、IOS平台小图风格web处理的需求,如phoneGap应用, 在线头像上传时的风格处理、mobile web端分享图片时风格处理等
首先使用git clone复制一份AlloyPhoto的代码到本地:
git clone git://github.com/AlloyTeam/AlloyPhoto.git
然后使用npm安装modjs:
npm install -g modjs
安装成功后:
cd AlloyPhoto && mod dist
构建成功后会在 ./js/combined
目录下生成alloyimage.js
文件
在release目录下获取开发版
###$AI 或 AlloyImage 初始化一个AlloyImage对象 增加新的参数适配 AIObj $AI(HTMLImageObj img[, Number width, Number height]); {img} 图片元素 {width} 缩放的宽度 可选 {height} 缩放的高度 可选 如果width 或height一个为null,则使用等比缩放,如果都没有,使用img宽度 tips: 在IOS下请使用width参数来缩放相册中的图片,IOS下不使用缩放,图片太大可能无法绘制到Canvas上
示例
var ps = $AI(img, 600).save('jpg', 0.6);
###save 将合成图片保存成base64格式字符串 base64String save(String filetype [, Number comRatio]); {filetype} 图片格式类型,支持png,jpg,gif等 {comRatio} 对于jpg格式的图片,图片压缩比率或者图片质量,0 - 1的小数 返回 base64的字符串
示例
var string = AlloyImage(img).save('jpg', 0.8);
###saveFile 将合成图片下载到本地 void saveFile(String fileName[, Number comRatio]); {fileName} 图片文件名,如果不带后缀,默认为png格式 {comRatio} 对于jpg格式的图片,图片压缩比率或者图片质量,0 - 1的小数 返回 空
示例
img.onclick = function(){
AlloyImage(this).saveFile('处理后图像.jpg', 0.8);
}
###download 功能与使用同saveFile
###transform 进行仿射变换 AIObj transform(Array Matrix); {Matrix} 变换矩阵 数组 [a1, a2, b1, b2, dx, dy] 如水平翻转 [-1, 0, 0, 1, 0, 0] 示例
//将图层垂直翻转
AlloyImage(img).transform([1, 0, 0, -1, 0, 0]).show();
###scaleTo 将图层或合成图像缩放到指定宽高 AIObj scaleTo(Number width, Nubmer height); {width} 宽度 {height} 高度 如果不指定某一参数,则使用等比缩放 返回 AIObj
示例
//将图层缩放放到100px * 100px
AlloyImage(img).scaleTo(100, 100).show();
//将图层等比缩放到高50px
AlloyImage(img).scaleTo(null, 100).show();
###scale 将图层或合成图像缩放指定倍数 AIObj scale(Number xRatio, Nubmer yRatio); {xRatio} 横向缩放倍数 {yRatio} 纵向缩放倍数 如果不指定某一参数,则使用等比缩放 返回 AIObj
示例
//将图层缩放放2 * 2倍
AlloyImage(img).scale(2, 2).show();
//将图层等比缩放3倍
AlloyImage(img).scale(3).show();
###rotate 将图层或合成图像旋转一定的角度 AIObj rotate(Numbe degree); {degree} 顺时旋转角度,以度为单位 返回 AIObj
示例
//将图层旋转30度
AlloyImage(img).rotate(30).show();
###clip 将图层或合成图像裁剪 AIObj rotate(Numbe x0, Number y0, Number width, Number height); {x0} 起始横坐标 {y0} 起始纵坐标 {width} 裁剪图像宽度 {height} 裁剪图像高度 返回 AIObj
示例
//将图层从(30, 30)开始裁剪宽100px高100px的图像,并获取图像base64代码
var imgString = AlloyImage(img).clip(30, 30, 100, 100).save('jpg', 0.8);
###drawRect 画出合成像的直方图 void drawRect(String seletor, String channel); {seletor} 直方图绘制的wrapper {channel} 要绘制的通道, 比如 'RG', 'GB', 默认为'RGB' 返回 空
示例
var imgString = AlloyImage(img).drawRect('#p');
###doView 保存view的中间结果,下次使用view将会根据上次doView之前的结果进行处理,与undoView结合,可进行撤销操作 AIObj doView(); 返回 AIObj 示例参照undoView方法
###undoView 撤销上次view的执行结果 AIObj undoView(); 返回 AIObj
示例
var layer = $AI(img);
layer.view("setHSI", 10, 0, 0).show();
// 再次调节 这次还是基于原图调节
layer.view("setHSI", -10, 0, 0).show();
//调节好了 保存这次结果
layer.doView();
// 基于上次的调节结果进行计算
layer.view("brightness", 10, 0, 0).show();
// 不满意 撤销亮度调节操作
layer.undoView().show();
// 回到最原始的图像
layer.undoView().show();
--build 构建目录 一些项目的构建工具
--combined 中间构建合成的项目代码,用于测试和发布
--demo demo文件
--doc 目录文档
--release 已发布的文件版本
--res 一些测试用的静态资源
--src 项目JS源码
alloyimage.base.js core文件 base文件
--module 模块文件
--alteration 调节模块
--filter 滤镜插件
--test 测试文件