行使CamanJS在Web页面上处理赏罚图像语言&工具

来源:互联网 / 作者:SKY / 2017-12-01 05:21 / 点击:
不久前我要找一个可以在小我私人项目中举办行使的图形操纵库。我所找到最抱负的一个库就是 CamanJS 了, 它是一个基于JavaScript的canvas操纵库。

CamanJS Javascript库 Web页面 图像处理赏罚

不久前我要找一个可以在小我私人项目中举办行使的图形操纵库。我所找到最抱负的一个库就是 CamanJS 了, 它是一个基于JavaScript的canvas操纵库。

你也许会想问既然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() 有 size 和 strength 这两个参数,你可以参考 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() 函数在输入范畴滑块的值产生改变时城市被挪用。这个函数用对应变量存储了全部范畴滑块的值。为了对图像举办编辑,这些值随后会被作为参数转达到对应的过滤器。

阅读延展

1
3