行使CamanJS在Web页面上处理赏罚图像

过滤器同时被应用到原来的图层和新图层. 此外，你可以为新的图层设置其它一些像不透明度（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 是一个非常有用的图片操作库，带有很多滤镜，还有不断发展中的功能，而本教程仅仅讲述了一个皮毛。

延伸阅读：

• 只要60行代码：搞定Javascript版俄罗斯方块
• 浅谈基于JavaScript的DDOS攻击
• 网页性能之html css javascript
• 为Web开发人员准备的10个最佳JavaScript库

（编辑：网站开发网_安阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!