Petua untuk bekerja dengan imej pada halaman web menggunakan CamanJS_jquery

Anda mungkin ingin bertanya mengapa kami ingin menggunakan perpustakaan JavaScript seperti ini kerana CSS sudah mempunyai fungsi sedia untuk menyokong operasi imej asas.

Nah, selain sokongan pelayar, terdapat banyak faedah menggunakan CamanJS. Ia memberi kami lebih banyak penapis dan pilihan untuk memanipulasi imej. Anda boleh membuat penapis lanjutan pada imej anda untuk mengawal setiap piksel di dalamnya. Anda boleh menggunakan mod campuran terbina dalam dan sistem lapisan. Dan ia juga membolehkan anda melakukan operasi merentas domain pada imej dan menyimpan imej yang dijana oleh operasi.

Sekarang, mari kita mula meneroka ciri yang ditawarkan oleh CamanJS!

Perkenalkan fail yang diperlukan

Untuk mula menggunakan CamanJS, hanya import perpustakaan ke halaman anda Versi CDN minimum yang saya petik mempunyai semua pemalam digabungkan menjadi satu fail sebagai tambahan kepada fungsi teras:

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

Dari versi 3 hingga 4, sintaks fungsi CamanJS telah berubah sedikit. Jadi sila pastikan bahawa semasa mengikuti tutorial ini untuk operasi sebenar, versi yang anda import ialah 4 atau lebih tinggi.

Manipulasi imej melalui atribut HTML

CamanJS boleh digunakan untuk memanipulasi imej menggunakan atribut data-caman. Kod berikut menunjukkan kepada anda cara menggunakan penapis dengan kecerahan "10" dan kontras "30" pada imej:

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

18 penapis lain yang boleh digunakan dengan sintaks yang serupa turut dibungkus dalam pustaka ini.

Contohnya:

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

Memanipulasi imej dengan JavaScript

Anda juga boleh memilih untuk memanipulasi imej dengan menulis beberapa baris JavaScript. Hasil daripada menggunakan operasi JavaScript adalah sama seperti menggunakan atribut data-caman.

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

Melaksanakan kawalan dalam penyunting imej

penapis boleh digunakan untuk mencetus klik butang tanpa banyak pelarasan seperti vintage(), lomo(), dan sinCity() Penapis tidak memerlukan parameter. Penapis lain seperti contrast() dan noise() memerlukan nilai integer sebagai hujah. Nilai ini menentukan kekuatan penapis.

Penapis kompleks seperti tiltShift(), posterize(), dan vignette() memerlukan lebih daripada satu parameter. Blok kod di bawah menunjukkan cara menggunakan 3 butang untuk melaksanakan 3 operasi penapis. Anda juga boleh menulis kod seperti ini untuk penapis lain.

Berikut ialah HTML:

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

Berikut ialah kod JavaScript/jQuery yang menggunakan penapis pada klik butang:

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() turut menerima parameter tambahan seperti startRadius dan radius , Factor.vignette() mempunyai saiz dan kekuatan , anda boleh merujuk kepada dokumentasi CamanJS untuk pemahaman yang mendalam tentang semua penapis.

Laksanakan kawalan gelangsar

Untuk penapis seperti

kecerahan, kontras dan warna yang memerlukan kawalan yang agak lebih tepat ke atas nilainya, menggunakan peluncur input nilai julat boleh berfungsi dengan baik. Seperti yang anda akan lihat, melaksanakan kawalan gelangsar hanya berbeza sedikit daripada kawalan butang Anda boleh membuat peluncur julat menggunakan HTML berikut:

<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>

Blok kod jQuery berikut mengendalikan semua operasi:

$('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 Javascript库 Web页面 图像处理

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

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

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