Tips for working with images on Web pages using Camanjs _jquery

You might want to ask why we want to use a JavaScript library like this, since CSS already has existing functionality to support the underlying image operation.

Well, in addition to the browser support, there are many benefits to using CAMANJS. It provides us with more filters and options for manipulating images. You can create an advanced filter in your image to control each pixel. You can use its built-in blending mode and layer system. It also allows you to perform cross-domain operation of the image and to save the images that the operation produces.

Now, let's begin to explore the features that CAMANJS offers!

Introduction of necessary documents

To start using CAMANJS, you need to simply bring this library into your page. The minimized CDN version that I'm referencing, in addition to its core functionality, all plug-ins are grouped into a single file:

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

The syntax from version 3 to 4,CAMANJS functions has changed a little bit. So make sure that the version you introduce is more than 4 when you follow this tutorial in the actual operation.

Image manipulation with HTML properties

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

Other 18 filters that can be used in a similar syntax are also packaged into the library.

For example:

Manipulating images through JavaScript

You can also choose to manipulate a single image by writing a few lines of JavaScript. The results of using JavaScript operations are the same as those produced by using the Data-caman property.

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

Implementing a control in an image editor

The filter actually does not need to do too much adjustment can use in the button clicks the trigger. Some filters like vintage (), Lomo (), and sincity () do not require parameters. Other like contrast () and noise () filters require an integer value as an argument. This value determines the strength of the filter.

Complex filters such as Tiltshift (), Posterize (), and vignette () require more than one parameter. The following code block demonstrates 3 kinds of filter actions with 3 buttons. You can also write code like this for other filters.

The following is HTML:

<canvas id= "Canvas" ></canvas>
<button id= "vintagebtn" >Vintage</button>
< Button id= "noisebtn" >Noise</button>
<button id= "tiltshiftbtn" >tilt shift</button>

Here is the Javascript/jquery code that applies the filter to the 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);
  This.render ();
 });
  Tiltshift.on (' click ', Function (e) {
 caman (' #canvas ', IMG, function () {
  this.tiltshift ({
   angle:90,
   focuswidth:600
  }). Render ();
 });

Tiltshift () also accepts other parameters such as Startradius and radius , Factor.vignette () has Size and strength These two parameters, you can refer to the Camanjs document to understand all the filters.

Implementing a Slider control

Like brightness, contrast, and Hue , which require a relatively more precise control over the value of the filter, using the range value input slider can work well. You'll see that implementing the slider control is only slightly different than the button control. You can use the following HTML to create a range slider:

<form id= "Silderinput" >
   <label for= "Hue" >Hue</label> <input id= "hue" name= "Hue" type= "
 Range "min=" 0 "max=" value= "0" >
   <label for= "contrast" >Contrast</label> <input id=
 " Contrast "name=" contrast "type=" range "min=" -20 "max=" "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 ();
  });

The applyfilters () function is invoked when the value of the input range slider has changed. This function stores the values of all range sliders with the corresponding variable. In order to edit the image, these values are then passed as parameters to the corresponding filter.

Every time I call This.revet (false) when I apply these filters, the canvas back to its original state. Using revert ensures that the filters are working with the original image, and their effects are not confusing. The value of the false parameter passed in can avoid intermittent flicker during image restore.

Another detail worth mentioning is that even if I only change one of them at a time, I will also apply all the filters. This is because users do not want to see the contrast being reset when they are adjusting the hue and brightness values.

Create custom filters in Camanjs

A cool feature of many of the other features of this library is that you can extend it by creating your own filters and plug-ins. There are two ways to create a custom filter. You can combine the built-in filters with the corresponding values, or you can create your own filters from scratch.

Here's the JQuery code to create your own filter:

Caman.Filter.register (' Oldpaper ', function () {
 this.pinhole ();
 This.noise (ten);
 This.orangepeel ();
 This.render ();
});

To create a filter from scratch, you need some extra work, because there are a few bugs that you can read about in the open issues section of the GitHub resource pool.

Layers and Blending modes

In addition to the filters, CAMANJS also brings an advanced layer system. This thing gives you more graphics to manipulate and choose from. You don't want layers in Photoshop, CAMANJS layers can be nested. It uses mixed mode to apply layers to their parent nesting layer. The default is a generic blending mode. CAMANJS has a total of 10 blending modes, including such commonly used as overlay (multiply), exclusion (exclusion), and overlay (overlay).

The following is a jquery code that creates a custom filter using layers and blending modes:

Caman.Filter.register (' Greentint ', function () {
 this.brightness ( -10);
   This.newlayer (function () {
  This.setblendingmode ("overlay");
  This.opacity (m);
  This.fillcolor (' #689900 ');
  This.filter.brightness ();
  This.filter.contrast (a);
 });
   This.render ();
});

The filter is also applied to the original layer and the new layer. In addition, you can set other properties such as opacity (opacity) and blending mode for the new layer. I've filled this layer with a fixed color, but you can also fill it with another picture by calling This.overlayimage (' image.jpg ').

Manipulating cross-domain images

If you need to manage images that are located below the domain name, you can use the PHP proxy provided by CAMANJS. To be able to use this feature, you need to place this PHP script on your server. The script will provide your browser with image data from a remote data source as an agent to circumvent editing restrictions. Then you need to add the following line to your javascript:

Copy Code code as follows:

Caman.remoteproxy = Caman.IO.useProxy (' php ');

Save an edited image

CAMANJS built-in the mechanism for saving images after editing. Using the current implementation, a call to This.save (PNG) opens a file-downloaded pop-up box, and you will need to rename the file and add a PNG or JPG extension. This is because when this function is invoked, the browser redirects the encoding of the image to Base64, and they do not know the type of the file. The code block given below saves the picture:

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

Demo with full code

You can take a look at this image editor sample with all the features applied, the screenshot below:

CAMANJS JavaScript Library Web page image processing

As an exercise, you can try to improve the user experience, such as labeling the filter applied on the current picture or modifying the Save button to avoid the need to rename the problem.

As we can see, CAMANJS is a very useful picture-manipulation library with a lot of filters and evolving features, and this tutorial only covers one fur.

The above content is relatively long, but the introduction is very detailed, patient reading, to learn to use CAMANJS on the Web page processing image is helpful.