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 <🎜 Untuk kedua-duanya parameter >saiz dan kekuatan , anda boleh merujuk kepada dokumentasi CamanJS untuk pemahaman yang mendalam tentang semua penapis.

Laksanakan kawalan gelangsar

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

Caman.Filter.register('oldpaper', function() {
 this.pinhole();
 this.noise(10);
 this.orangePeel();
 this.render();
});

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

this.render(function () {
 this.save('png');
});