Tips for working with images on web pages using CamanJS_jquery

You may want to ask why we would want to use a JavaScript library like this since CSS already has ready-made functions to support basic image operations.

Well, besides browser support, there are many benefits to using CamanJS. It gives us more filters and options for manipulating images. You can create advanced filters on your images to control every pixel in them. You can use its built-in blending modes and layer system. And it also allows you to perform cross-domain operations on images and save the images generated by the operations.

Now, let’s start exploring the features CamanJS has to offer!

Introduce necessary files

To start using CamanJS, simply import the library into your pages. The minimal CDN version I quoted has all the plugins combined into a single file in addition to the core functionality:

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

From version 3 to 4, the syntax of CamanJS functions has changed slightly. So please make sure that when following this tutorial for actual operation, the version you import is 4 or above.

Image manipulation through HTML attributes

CamanJS can be used to manipulate images using the data-caman attribute. The following code shows you how to apply a filter with a brightness of "10" and a contrast of "30" to an image:

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

18 other filters that can be applied with similar syntax are also packaged in this library.

For example:

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

Manipulate images with JavaScript

You can also choose to manipulate an image by writing a few lines of JavaScript. The result of using JavaScript operations is the same as using the data-caman attribute.

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

Implementing a control in an image editor

filters can be used to trigger button clicks without much adjustment. Some are like vintage(), lomo(), and sinCity() The filter requires no parameters. Other filters like contrast() and noise() require an integer value as argument. This value determines the strength of the filter.

Complex filters such as tiltShift(), posterize(), and vignette() require more than one parameter. The code block below demonstrates how to use 3 buttons to perform 3 filter operations. You can also write code like this for other filters.

The following is the HTML:

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

Here’s the JavaScript/jQuery code that applies the filter to button clicks:

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() also accepts additional parameters like startRadius and radius , Factor.vignette() has <🎜 For the two parameters >size and strength , you can refer to the CamanJS documentation for an in-depth understanding of all filters.

Implement slider control

brightness, contrast, and hue that require relatively more precise control over their values, using the range value input slider can work well. As you'll see, implementing a slider control is only slightly different than a button control. You can create a range slider using the following 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>

The following jQuery code block handles all operations:

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