同步操作将从 MichaelJou/AlloyImage 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
####强大功能
####便捷开发
####丰富扩展
###建议使用场景 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 测试文件
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。