AlloyImage - 基于HTML5技术的专业图像处理库
功能特性
强大功能
- 基于多图层操作 -- 一个图层的处理不影响其他图层
- 与PS对应的17种图层混合模式 -- 便于PS处理教程的无缝迁移
- 多种基本滤镜处理效果 -- 基本滤镜不断丰富、可扩展
- 基本的图像调节功能 -- 色相、饱和度、对比度、亮度、曲线等
便捷开发
- 简单快捷的API -- 链式处理、API简洁易用、传参灵活
- 多种组合效果封装 -- 一句代码轻松实现一种风格
- 友好参数支持 -- 中、英文参数双向支持，降低专业词汇记忆门槛
- 接口一致的单、多线程支持 -- 单、多线程切换无需更改一行代码，多线程保持快捷API特性
- 可预见的错误友好提醒 -- 对一些可能出现错误的地方提醒，方便开发与调试
丰富扩展
- 方便的添加功能扩展 -- 轻松添加滤镜插件
- 为扩展提供数学封装 -- 封装了一些数学模块供扩展调用
建议使用场景
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文件
变更历史
AlloyImage 1.2开发版代码 获取
在release目录下获取开发版
AlloyImage 1.2 开发中
- 更改代码架构，分离Filter
- 添加工具方法支持：色系提取
- 添加下载文件方法
- 添加 棕褐色 滤镜
- 添加 色调分离 滤镜
- 添加 Gamma 调节
- 更改代码，分离Alteration
- 添加仿射变换（缩放、平移、旋转）、裁切
- 增加可选颜色调节
- 曲线命令支持通道调节
- 优化IOS下性能，修复变形的bug
新增API 1.2以上
###$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();
AlloyImage 1.1
- 优化代码，组合效果处理性能提升80%
- 添加木雕组合效果
AlloyImage 1.0
目录结构
--build 构建目录 一些项目的构建工具
--combined 中间构建合成的项目代码，用于测试和发布
--demo demo文件
--doc 目录文档
--release 已发布的文件版本
--res 一些测试用的静态资源
--src 项目JS源码
alloyimage.base.js core文件 base文件
--module 模块文件
--alteration 调节模块
--filter 滤镜插件--test 测试文件