加入收藏 | 设为首页 | 会员中心 | 我要投稿 网站开发网_马鞍山站长网 (https://www.0555zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程 > 正文

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

发布时间:2016-11-11 14:36:23 所属栏目:编程 来源:开源中国社区
导读:副标题#e# 不久前我要找一个可以在个人项目中进行 使用 的图形操作库。我所找到最理想的一个库就是 CamanJS 了, 它是一个基于JavaScript的canvas操作库。 你可能会想问既然CSS已经有现成的功能可以支持基础的 图像 操作了,为什么我们还会想要为此 使用 一

在 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();
  • });

(编辑:网站开发网_马鞍山站长网)

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