前端处理图像一直以来都是开发中的弱项。本篇笔记分享的是腾讯技术团队开源的基于HTML5技术的专业图像处理库,希望对广大学习前端开发或从事前端开发的兄弟们有所帮助。
AlloyImage(AI)是一个基于html5技术的JS图像处理库,集成了一些方便快捷的图像处理API,您可以将它引用到您的网页中,结合css3等技术,做出一些之前无法做到的优美效果,或者,提供一个用JS编写的在线图像处理工具等。
设计理念
简单代码做复杂事情----It seems like so simple!
1.接口调用简单
2.提供进一步封装的组合效果方便调用
3.基于AI编写的alloyPhoto,完整展示AI的能力与接口,以及调用方法Demo展示,更易于学习
特点
1.图层功能,提供图层的添加,删除,交换图层顺序等功能,且包含与PS相对应的17种图层混合模式
2.图像的基本调节功能,包括亮度、对比度,色相、饱和度、明度调节
3.多种滤镜功能,去色、反相、高斯模糊、锐化、浮雕效果、查找边缘、马赛克、腐蚀等
4.处理后文件的保存,处理完成之后,可以将文件输出为base64形式间接使用和保存
5.高级组合效果,如素描,lomo,复古,素描等复合效果 如一个素描效果的实现
- var img = new Image();
- img.src = "pic.jpg";
- img.onload = function(){
- //素描效果
- AlloyImage(this).act("灰度处理").add(//添加一个图层上去
- AlloyImage(this).act("灰度处理").act("反色").act("高斯模糊",5) , "颜色减淡"
- ).act("锐化").show();
- };
源码及开发文档:
2020年02月18日 上午12:33 沙发
感谢