{"id":13849012,"url":"https://github.com/AlloyTeam/AlloyImage","last_synced_at":"2025-07-12T14:30:57.837Z","repository":{"id":5446560,"uuid":"6639684","full_name":"AlloyTeam/AlloyImage","owner":"AlloyTeam","description":"基于HTML5的专业级图像处理开源引擎。An image processing lib based on html5.","archived":false,"fork":false,"pushed_at":"2019-05-09T10:10:01.000Z","size":18727,"stargazers_count":3032,"open_issues_count":17,"forks_count":598,"subscribers_count":257,"default_branch":"master","last_synced_at":"2024-11-21T04:34:07.719Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://alloyteam.github.io/AlloyImage/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlloyTeam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-11-11T15:13:21.000Z","updated_at":"2024-11-20T10:19:13.000Z","dependencies_parsed_at":"2022-08-10T09:02:27.940Z","dependency_job_id":null,"html_url":"https://github.com/AlloyTeam/AlloyImage","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2FAlloyImage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2FAlloyImage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2FAlloyImage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2FAlloyImage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlloyTeam","download_url":"https://codeload.github.com/AlloyTeam/AlloyImage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225825268,"owners_count":17529905,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T19:01:05.621Z","updated_at":"2024-11-22T00:31:36.956Z","avatar_url":"https://github.com/AlloyTeam.png","language":"JavaScript","readme":"[AlloyImage](http://alloyteam.github.com/AlloyPhoto/) - 基于HTML5技术的专业图像处理库\n===========================\n\n### 功能特性\n\n#### 强大功能\n1. 基于多图层操作             -- 一个图层的处理不影响其他图层\n2. 与PS对应的17种图层混合模式 -- 便于PS处理教程的无缝迁移\n3. 多种基本滤镜处理效果       -- 基本滤镜不断丰富、可扩展\n4. 基本的图像调节功能         -- 色相、饱和度、对比度、亮度、曲线等\n\n\n#### 便捷开发\n1. 简单快捷的API              -- 链式处理、API简洁易用、传参灵活\n2. 多种组合效果封装           -- 一句代码轻松实现一种风格\n3. 友好参数支持               -- 中、英文参数双向支持，降低专业词汇记忆门槛\n4. 接口一致的单、多线程支持   -- 单、多线程切换无需更改一行代码，多线程保持快捷API特性\n5. 可预见的错误友好提醒       -- 对一些可能出现错误的地方提醒，方便开发与调试\n\n\n#### 丰富扩展\n1. 方便的添加功能扩展         -- 轻松添加滤镜插件\n2. 为扩展提供数学封装         -- 封装了一些数学模块供扩展调用\n\n### 建议使用场景\n1.桌面软件客户端内嵌网页运行方式\n        \u003e\u003e\u003e打包webkit内核: 用户较大头像上传风格处理、用户相册风格处理(处理时间平均\u003c1s)\n\n2.Win8 Metro应用\n        \u003e\u003e\u003e用户上传头像，比较小的图片风格处理后上传（Win8下IE10支持多线程）\n\n3.Mobile APP\n        \u003e\u003e\u003eAndriod平台、IOS平台小图风格web处理的需求，如phoneGap应用, 在线头像上传时的风格处理、mobile web端分享图片时风格处理等\n\n### 如何构建源码？\n\n首先使用git clone复制一份AlloyPhoto的代码到本地：\n```sh\n git clone git://github.com/AlloyTeam/AlloyPhoto.git\n```\n然后使用npm安装[modjs](https://github.com/modulejs/modjs)：\n```sh\n npm install -g modjs\n```\n安装成功后:\n```sh\ncd AlloyPhoto \u0026\u0026 mod dist\n```\n构建成功后会在 `./js/combined`目录下生成`alloyimage.js`文件\n\n### 变更历史\n#### AlloyImage 1.2开发版代码 获取\n\u003e 在release目录下获取开发版\n\n#### AlloyImage 1.2 开发中\n1. 更改代码架构，分离Filter\n2. 添加工具方法支持：色系提取\n3. 添加下载文件方法\n4. 添加 棕褐色 滤镜\n5. 添加 色调分离 滤镜\n6. 添加 Gamma 调节\n7. 更改代码，分离Alteration\n8. 添加仿射变换（缩放、平移、旋转）、裁切\n9. 增加可选颜色调节\n10. 曲线命令支持通道调节\n11. 优化IOS下性能，修复变形的bug\n\n\n##### 新增API 1.2以上\n\n\u003e###$AI 或 AlloyImage\n初始化一个AlloyImage对象\u003cbr /\u003e\n增加新的参数适配 AIObj $AI(HTMLImageObj img[, Number width, Number height]);\u003cbr /\u003e\n{img} 图片元素\u003cbr /\u003e\n{width} 缩放的宽度 可选\u003cbr /\u003e\n{height} 缩放的高度 可选\u003cbr /\u003e\n如果width 或height一个为null，则使用等比缩放，如果都没有，使用img宽度\ntips: 在IOS下请使用width参数来缩放相册中的图片，IOS下不使用缩放，图片太大可能无法绘制到Canvas上\u003cbr /\u003e\n\n示例\n```javascript\nvar ps = $AI(img, 600).save('jpg', 0.6);\n```\n\n\u003e###save\n将合成图片保存成base64格式字符串\u003cbr /\u003e\nbase64String save(String filetype [, Number comRatio]);\u003cbr /\u003e\u003cbr /\u003e\n{filetype}  图片格式类型，支持png,jpg,gif等\u003cbr /\u003e\n{comRatio}  对于jpg格式的图片，图片压缩比率或者图片质量，0 - 1的小数\u003cbr /\u003e\u003cbr /\u003e\n返回  base64的字符串\n\n示例\n```javascript\nvar string = AlloyImage(img).save('jpg', 0.8);\n```\n\u003e###saveFile\n将合成图片下载到本地\u003cbr /\u003e\nvoid saveFile(String fileName[, Number comRatio]);\u003cbr /\u003e\u003cbr /\u003e\n{fileName}  图片文件名，如果不带后缀，默认为png格式\u003cbr /\u003e\n{comRatio}  对于jpg格式的图片，图片压缩比率或者图片质量，0 - 1的小数\u003cbr /\u003e\u003cbr /\u003e\n返回  空\n\n示例\n```javascript\nimg.onclick = function(){\n        AlloyImage(this).saveFile('处理后图像.jpg', 0.8);\n}\n```\n\n\u003e###download\n功能与使用同saveFile\n\n\u0026nbsp;\n\n\u003e###transform\n进行仿射变换\u003cbr /\u003e\nAIObj transform(Array Matrix); \u003cbr /\u003e\u003cbr /\u003e\n{Matrix} 变换矩阵 数组 [a1, a2, b1, b2, dx, dy]\u003cbr /\u003e\n如水平翻转 [-1, 0, 0, 1, 0, 0]\u003cbr /\u003e\n示例\n```javascript\n//将图层垂直翻转\nAlloyImage(img).transform([1, 0, 0, -1, 0, 0]).show();\n```\n\n\u0026nbsp;\n\u003e###scaleTo\n将图层或合成图像缩放到指定宽高\u003cbr /\u003e\nAIObj scaleTo(Number width, Nubmer height);\u003cbr /\u003e\u003cbr /\u003e\n{width} 宽度\u003cbr /\u003e\n{height} 高度\u003cbr /\u003e\n如果不指定某一参数，则使用等比缩放\n\u003cbr /\u003e\u003cbr /\u003e\n返回 AIObj\n\n示例\n```javascript\n//将图层缩放放到100px * 100px\nAlloyImage(img).scaleTo(100, 100).show();\n\n//将图层等比缩放到高50px\nAlloyImage(img).scaleTo(null, 100).show();\n```\n\u003e###scale\n将图层或合成图像缩放指定倍数\u003cbr /\u003e\nAIObj scale(Number xRatio, Nubmer yRatio);\u003cbr /\u003e\u003cbr /\u003e\n{xRatio} 横向缩放倍数\u003cbr /\u003e\n{yRatio} 纵向缩放倍数\u003cbr /\u003e\n如果不指定某一参数，则使用等比缩放\n\u003cbr /\u003e\u003cbr /\u003e\n返回 AIObj\n\n示例\n```javascript\n//将图层缩放放2 * 2倍\nAlloyImage(img).scale(2, 2).show();\n\n//将图层等比缩放3倍\nAlloyImage(img).scale(3).show();\n```\n\u003e###rotate\n将图层或合成图像旋转一定的角度\u003cbr /\u003e\nAIObj rotate(Numbe degree);\u003cbr /\u003e\u003cbr /\u003e\n{degree} 顺时旋转角度，以度为单位\u003cbr /\u003e\n\u003cbr /\u003e\u003cbr /\u003e\n返回 AIObj\n\n示例\n```javascript\n//将图层旋转30度\nAlloyImage(img).rotate(30).show();\n\n```\n\n\u003e###clip\n将图层或合成图像裁剪\u003cbr /\u003e\nAIObj rotate(Numbe x0, Number y0, Number width, Number height);\u003cbr /\u003e\u003cbr /\u003e\n{x0} 起始横坐标\u003cbr /\u003e\n{y0} 起始纵坐标\u003cbr /\u003e\n{width} 裁剪图像宽度\u003cbr /\u003e\n{height} 裁剪图像高度\u003cbr /\u003e\n\u003cbr /\u003e\u003cbr /\u003e\n返回 AIObj\n\n示例\n```javascript\n//将图层从(30, 30)开始裁剪宽100px高100px的图像，并获取图像base64代码\nvar imgString = AlloyImage(img).clip(30, 30, 100, 100).save('jpg', 0.8);\n\n```\n\n\u003e###drawRect\n画出合成像的直方图\u003cbr /\u003e\nvoid drawRect(String seletor, String channel);\u003cbr /\u003e\u003cbr /\u003e\n{seletor} 直方图绘制的wrapper\u003cbr /\u003e\n{channel} 要绘制的通道， 比如 'RG', 'GB', 默认为'RGB'\n\u003cbr /\u003e\u003cbr /\u003e\n返回 空\n\n示例\n```javascript\nvar imgString = AlloyImage(img).drawRect('#p');\n\n```\n\n## 预览、撤销、重做\n\u003e###doView\n保存view的中间结果，下次使用view将会根据上次doView之前的结果进行处理，与undoView结合，可进行撤销操作\u003cbr /\u003e\nAIObj doView();\u003cbr /\u003e\n返回 AIObj\u003cbr /\u003e\n示例参照undoView方法\n\n\u0026nbsp;\n\n\u003e###undoView\n撤销上次view的执行结果\nAIObj undoView();\n返回 AIObj\n\n示例\n```javascript\nvar layer = $AI(img);\nlayer.view(\"setHSI\", 10, 0, 0).show();\n\n// 再次调节 这次还是基于原图调节\nlayer.view(\"setHSI\", -10, 0, 0).show();\n\n//调节好了 保存这次结果\nlayer.doView();\n\n// 基于上次的调节结果进行计算\nlayer.view(\"brightness\", 10, 0, 0).show();\n\n// 不满意 撤销亮度调节操作\nlayer.undoView().show();\n\n// 回到最原始的图像\nlayer.undoView().show();\n\n```\n\n\n\n\n\n#### AlloyImage 1.1\n1. 优化代码，组合效果处理性能提升80%\n2. 添加木雕组合效果\n\n#### AlloyImage 1.0\n\n### 目录结构\n\u003e--build  构建目录  一些项目的构建工具\n\n\u003e--combined  中间构建合成的项目代码，用于测试和发布\n\n\u003e--demo      demo文件\n\n\u003e--doc       目录文档\n\n\u003e--release   已发布的文件版本\n\n\u003e--res       一些测试用的静态资源\n\n\u003e--src       项目JS源码\n\n\u003e\u003e    alloyimage.base.js   core文件 base文件\n\n\u003e\u003e    --module             模块文件\n\n\u003e\u003e       --alteration     调节模块\n\n\u003e\u003e        --filter         滤镜插件\n\u003e--test      测试文件\n\n### 这些产品使用了AlloyImage\n\n[AlloyDesigner](http://alloyteam.github.io/AlloyDesigner/)\n\n[AlloyClip](https://github.com/AlloyTeam/AlloyClip)\n\n[AlloyPhoto](https://github.com/AlloyTeam/AlloyPhoto)\n","funding_links":[],"categories":["UI","JavaScript"],"sub_categories":["其它"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlloyTeam%2FAlloyImage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAlloyTeam%2FAlloyImage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlloyTeam%2FAlloyImage/lists"}