使用CamanJS在Web页面上处理图像的技巧


Posted in Javascript onAugust 18, 2015

使用CamanJS在Web页面上处理图像的技巧

你可能会想问既然CSS已经有现成的功能可以支持基础的图像操作了,为什么我们还会想要为此使用一个像这样的 JavaScript 库呢。

好吧,除了有浏览器的支持,使用 CamanJS 有许多的好处。它为我们操作图像提供了更多的过滤器和选项。你可以在你的图像中创建高级过滤器,进而控制其中的每一个像素。你可以使用其内置的混合模式和图层系统。而它也能让你进行图像的跨域操作,并可以对操作产生的图像进行保存。

现在,就让我们来开始探索 CamanJS 所提供的特性吧!

引入必要的文件

要开始使用 CamanJS,需要简单的将这个库引入到你的页面中. 我所引用的这个最小化的 CDN 版本除了核心功能之外,所有的插件都被组合到了一个文件中:

<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js">
</script>

从版本3到4,CamanJS 函数的语法发生了一点小小的改变。因此请确保在跟随这个教程进行实际操作时,你所引入的版本在4以上。

通过HTML属性进行图像操作

CamanJS 可以被用来利用 data-caman 属性对图像进行操作。如下代码向你展示了如何将一个亮度为“10”的过滤器,以及一个对比度为“30”的过滤器应用到一张图片上:

<img data-caman="brightness(10) contrast(30)"
   src="yourimage.jpg" alt="CamanJS Javascript库 Web页面 图像处理">

其它可以用类似的语法加以运用的 18 个过滤器也被打包到了这个库里面。

例如:

<img data-caman="love() hazyDays()"
   src="yourimage.jpg" alt="CamanJS Javascript库 Web页面 图像处理">

通过 JavaScript 操作图像

你也可以选择通过写几行 JavaScript 来操作一张图像。使用 JavaScript 操作的结果跟使用 data-caman 属性所产生的结果是一样的。

Caman('#your-image-id', function () {
 this.brightness(40);
 this.contrast(-10);
 this.sinCity();
 this.render();
});

实现一个图像编辑器中的控件

过滤器其实不需要做过多的调整就可以用在按钮点击的触发上. 一些像 vintage(),lomo(), 以及 sinCity() 这样的过滤器不需要参数。其它像 contrast() 和 noise() 过滤器则需要一个整型值作为参数。这个值决定了过滤器的强度。

复杂的过滤器如 tiltShift(),posterize(), 以及 vignette() 则需要不止一个参数。下面的代码块演示了如果用3个按钮进行3种过滤器操作。针对其它的过滤器也可以像这样写代码。

下面是HTML:

<canvas id="canvas"></canvas>
<button id="vintagebtn">Vintage</button>
<button id="noisebtn">Noise</button>
<button id="tiltshiftbtn">Tilt Shift</button>

下面是将过滤器应用到按钮点击上的 JavaScript/jQuery 代码:

var vintage = $('#vintagebtn');
var noise = $('#noisebtn');
var tiltshift = $('#tiltshiftbtn');
  vintage.on('click', function(e) {
 Caman('#canvas', img, function() {
  this.vintage();
  this.render();
 });
});
  noise.on('click', function(e) {
 Caman('#canvas', img, function() {
  this.noise(10);
  this.render();
 });
});
  tiltshift.on('click', function(e) {
 Caman('#canvas', img, function() {
  this.tiltShift({
   angle: 90,
   focusWidth: 600
  }).render();
 });
});

tiltshift() 也接受另外的像 startRadius radius 这样的参数, Factor.vignette() sizestrength 这两个参数,你可以参考 CamanJS 文档 来深入理解所有的过滤器。

实现滑块控件

brightness, contrast, 和 hue 这样需要相对更精确控制取值的过滤器,使用范围值输入滑块就可以很好的工作。你将会看到,实现滑块控件只比按钮控制有稍微的不同. 你可以使用下面的HTML来创建范围滑块:

<form id="silderInput">
   <label for="hue">Hue</label>
 <input id="hue" name="hue" type="range" min="0" max="300" value="0">
   <label for="contrast">Contrast</label>
 <input id="contrast" name="contrast" type="range" min="-20" max="20" value="0">
</form>

下面的jQuery代码块处理所有了操作:

$('input[type=range]').change(applyFilters);
  function applyFilters() {
 var hue = parseInt($('#hue').val());
 var cntrst = parseInt($('#contrast').val());
    Caman('#canvas', 'image.jpg', function() {
   this.revert(false);
   this.hue(hue);
   this.contrast(cntrst);
   this.render();
  });
}

applyFilters() 函数在输入范围滑块的值发生改变时都会被调用。这个函数用对应变量存储了所有范围滑块的值。为了对图像进行编辑,这些值随后会被作为参数传递到对应的过滤器。

每次我都会在应用这些过滤器时调用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在Web页面上处理图像的技巧

CamanJS Javascript库 Web页面 图像处理

作为练习,你可以尝试改善下用户体验,如标记下当前图片上应用的滤镜或修改下保存按钮来避免需要重命名的问题。

就像我们看到的, CamanJS 是一个非常有用的图片操作库,带有很多滤镜,还有不断发展中的功能,而本教程仅仅讲述了一个皮毛。

以上内容比较长,但是介绍的都很详细,耐心阅读,对学习使用CamanJS在Web页面上处理图像很有帮助。

Javascript 相关文章推荐
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
红米手机抢购的js代码
Mar 10 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
jQuery实现大图轮播
Feb 13 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 #Javascript
JS实现可调整倒计时间代码分享
Aug 18 #Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 #Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 #Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 #Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 #Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 #Javascript
You might like
星际争霸中的对战模式介绍
2020/03/04 星际争霸
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
php 邮件发送问题解决
2014/03/22 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
领导班子三严三实对照检查材料
2014/09/25 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
2014年民政工作总结
2014/11/26 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
SQL Server表分区删除详情
2021/10/16 SQL Server