每次我都会在应用这些过滤器时调用this.revet(false),来时的canvas回到其原来的状态。使用revert可以确保过滤器所操作的是原来的图像,而它们的效果不会是混乱的. 传入的false参数值可以避免在图像还原过程中的间断闪烁。
值得一提的另外一个细节是即使我一次只改变了它们其中的一个值,我也会将所有的过滤器应用一遍。 这是因为用户不会希望在他们正调整色相和亮度值时看到对比度被重置。
在 CamanJS 中创建定制的过滤器
这个库的许多其它特性中有一个很酷的特性就是,你可以通过创建你自己的过滤器和插件来对它进行扩展. 有两种方法可以来创建定制的过滤器。你可以用对应的值来组合内置的过滤器,或者也可以从头开始创建你自己的过滤器。
下面是创建你自己的过滤器的 jQuery 代码:
Caman.Filter.register('oldpaper', function() { this.pinhole(); this.noise(10); this.orangePeel(); this.render(); });
要从头开始创建过滤器,你需要一些额外的工作,这都是因为存在几个bug,你可以在 GitHub 资源库的开放问题板块 读到有关这个的内容。
图层和混合模式
除了过滤器,CamanJS 还带来了一个高级的图层系统。这个东西给了你更多的图形操作能力和选择。不想 Photoshop 中的图层,CamanJS 中的层可以嵌套。它使用混合模式来将层应用到他们的上级嵌套层。默认是一般的混合模式。CamanJS 总共有十种混合模式,包含有像 叠加(multiply), 排除(exclusion), 和 覆盖(overlay)这些常用的。
如下是使用图层和混合模式创建一个定制过滤器的jQuery代码:
Caman.Filter.register('greenTint', function() { this.brightness(-10); this.newLayer(function() { this.setBlendingMode("overlay"); this.opacity(100); this.fillColor('#689900'); this.filter.brightness(15); this.filter.contrast(10); }); this.render(); });
过滤器同时被应用到原来的图层和新图层. 此外,你可以为新的图层设置其它一些像不透明度(opacity) 和 混合模式 这样的属性. 我已经用一个固定的颜色来填充了这一图层,不过你也可以通过调用 this.overlayImage('image.jpg') 来用另外一张图片对它进行填充.
操作跨域图像
如果你需要管理位于不用域名底下的图像,你可以使用 CamanJS 一并提供了的 PHP 代理。为了能使用这个特性,你需要在你的服务器上面放置这个 PHP 脚本 . 该脚本将作为代理向你的浏览器提供来自远程数据源的图像数据,以规避编辑限制。之后你需要在你的JavaScript中添加下面这一行:
复制代码 代码如下:
Caman.remoteProxy = Caman.IO.useProxy('php');
保存编辑后的图像
CamanJS 内置了编辑后保存图像的机制。使用目前的实现,对 this.save(png) 的调用会打开一个文件下载的弹出框,而你将需要对文件重新命名,并添加一个png或者jpg的扩展名. 这是因为在调用这个函数时,浏览器会将图像的编码重定向到 base64,而它们不知道文件的类型. 下面给出的代码块会保存图片:
this.render(function () { this.save('png'); });
Demo 跟完整代码
你可以看一下这个应用了所有特性的图像编辑器样例,截图如下:
CamanJS Javascript库 Web页面 图像处理
作为练习,你可以尝试改善下用户体验,如标记下当前图片上应用的滤镜或修改下保存按钮来避免需要重命名的问题。
就像我们看到的, CamanJS 是一个非常有用的图片操作库,带有很多滤镜,还有不断发展中的功能,而本教程仅仅讲述了一个皮毛。