AlloyImage - 基于HTML5技术的专业图像处理库

功能特性

强大功能

1. 基于多图层操作 -- 一个图层的处理不影响其他图层
2. 与PS对应的17种图层混合模式 -- 便于PS处理教程的无缝迁移
3. 多种基本滤镜处理效果 -- 基本滤镜不断丰富、可扩展
4. 基本的图像调节功能 -- 色相、饱和度、对比度、亮度、曲线等

便捷开发

1. 简单快捷的API -- 链式处理、API简洁易用、传参灵活
2. 多种组合效果封装 -- 一句代码轻松实现一种风格
3. 友好参数支持 -- 中、英文参数双向支持，降低专业词汇记忆门槛
4. 接口一致的单、多线程支持 -- 单、多线程切换无需更改一行代码，多线程保持快捷API特性
5. 可预见的错误友好提醒 -- 对一些可能出现错误的地方提醒，方便开发与调试

丰富扩展

1. 方便的添加功能扩展 -- 轻松添加滤镜插件
2. 为扩展提供数学封装 -- 封装了一些数学模块供扩展调用

建议使用场景

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 开发中

1. 更改代码架构，分离Filter
2. 添加工具方法支持：色系提取
3. 添加下载文件方法
4. 添加 棕褐色 滤镜
5. 添加 色调分离 滤镜
6. 添加 Gamma 调节
7. 更改代码，分离Alteration
8. 添加仿射变换（缩放、平移、旋转）、裁切
9. 增加可选颜色调节
10. 曲线命令支持通道调节
11. 优化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

1. 优化代码，组合效果处理性能提升80%
2. 添加木雕组合效果

AlloyImage 1.0

目录结构

--build 构建目录 一些项目的构建工具

--combined 中间构建合成的项目代码，用于测试和发布

--demo demo文件

--doc 目录文档

--release 已发布的文件版本

--res 一些测试用的静态资源

--src 项目JS源码

alloyimage.base.js core文件 base文件

--module 模块文件

  --alteration     调节模块

   --filter         滤镜插件

--test 测试文件

这些产品使用了AlloyImage

AlloyDesigner

AlloyClip

AlloyPhoto