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

前端处理图像一直以来都是开发中的弱项。本篇笔记分享的是腾讯技术团队开源的基于HTML5技术的专业图像处理库,希望对广大学习前端开发或从事前端开发的兄弟们有所帮助。

基于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,复古,素描等复合效果 如一个素描效果的实现

  1. var img = new Image();
  2. img.src = "pic.jpg";
  3. img.onload = function(){
  4.       //素描效果
  5.       AlloyImage(this).act("灰度处理").add(//添加一个图层上去
  6.             AlloyImage(this).act("灰度处理").act("反色").act("高斯模糊",5) , "颜色减淡"
  7.       ).act("锐化").show();
  8. };

源码及开发文档:

此处为隐藏的内容!
发表评论并刷新,才能查看

 

 

 

波波

发表评论

您必须 登录 才能发表留言!