You may want to ask that now that css has ready-made functions to support basic image operations,Why do we still want to use a javascript library like this for this.

Well, in addition to browser support,There are many benefits to using camanjs.It gives us more filters and options for manipulating images.You can create advanced filters in your images,In turn, each of these pixels is controlled.You can use its built-in blending mode and layer system.And it also allows you to perform cross-domain operations on images,And you can save the images generated by the operation.

Now let's start exploring the features provided by camanjs!

Introduce necessary documents

To get started with camanjs, you need to simply introduce this library to your page. In addition to the core features of this minimized version of cdn I'm referencing,All plugins are combined into one file:

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

The syntax of the camanjs function has changed slightly from version 3 to 4.So please make sure that when following this tutorial for practical operation,The version you have introduced is at least 4.

Image manipulation via html attributes

camanjs can be used to manipulate images using the data-caman attribute.The following code shows you how to set a filter with a brightness of "10".And a filter with a contrast of "30" is applied to an image:

<img data-caman="brightness (10) contrast (30)"

Eighteen other filters that can be applied with similar syntax are packaged into this library.


<img data-caman="love () hazydays ()"

Manipulating images with javascript

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

caman ("#your-image-id", function () {
 this.brightness (40);
 this.contrast (-10);
 this.sincity ();
 this.render ();

Implementing controls in an image editor

Filters can be used to trigger button clicks without much adjustment. Something likevintage (), lomo (),andsincity ()A filter like this requires no parameters.Other filters like contrast () and noise () require an integer value as a parameter.This value determines the strength of the filter.

Complex filters like tiltshift (), posterize (), and vignette () require more than one parameter.The following code block demonstrates how to perform 3 filter operations with 3 buttons.You can write code for other filters like this.

Here is the html:

<button>tilt shift</button>

Here is the javascript/jquery code that applies the filter to the button click:

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 accept another likestartradiusandradiusfactor.vignette ()YessizeandstrengthThese two parameters,You can refer tocamanjs documentationfor a deeper understanding of all filters.

Implementing the slider control

Likebrightness, contrast, andhueThis requires relatively more precise control over the value of the filter,Using the range value input slider works just fine.You will see,Implementing the slider control is only slightly different than the button control. You can use the following html to create the range slider:

   <label for="hue">hue</label>
 <input name="hue" type="range" min="0" max="300" value="0"&​​gt;
   <label for="contrast">contrast</label>
 <input name="contrast" type="range" min="-20" max="20" value="0"&​​gt;

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

applyfilters ()The function is called whenever the value of the input range slider changes.This function stores the values ​​of all range sliders with corresponding variables.To edit the image,These values ​​are then passed as parameters to the corresponding filters.

Each time I call this.revet (false) when applying these filters, the canvas when it comes back to its original state.Using revert ensures that the filter operates on the original image,And their effects will not be chaotic. The false parameter value passed in can avoid intermittent flickering during image restoration.

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

Create custom filters in camanjs

One of the cool features of many other features of this library is,You can extend it by creating your own filters and plugins. There are two ways to create custom filters.You can combine built-in filters with corresponding values,Or you can create your own filters from scratch.

Here is the jquery code to create your own filter:

caman.filter.register ("oldpaper", function () {
 this.pinhole ();
 this.noise (10);
 this.orangepeel ();
 this.render ();

To create a filter from scratch,You need some extra work,This is because there are several bugs, you can read about this in the open issues section of the github repository.

Layers and blending modes

In addition to filters,camanjs also brings an advanced layering system.This thing gives you more graphics manipulation capabilities and options.Don't want layers in photoshop,Layers in camanjs can be nested.It uses blending mode to apply layers to their parent nested layers.The default is general blend mode.camanjs has a total of ten mixed modes,Includes commonly used ones like multiply, exclusion, and overlay.

Here is the jquery code to create a custom filter using layers and blend modes:

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

The filter is applied to both the original layer and the new layer. In addition, you can set other properties such as opacity and blend mode for the new layer. I have filled this layer with a fixed color,But you can also fill it with another image by calling this.overlayimage ("image.jpg").

Manipulating cross-domain images

If you need to manage images under a different domain name,You can use the php proxy provided with camanjs. To be able to use this feature,You need to place this php script on your server. The script will serve as a proxy to provide your browser with image data from a remote data source,To circumvent editing restrictions.After that you need to add the following line to your javascript:

caman.remoteproxy=caman.io.useproxy ("php");

Save edited image

camanjs has a built-in mechanism for saving images after editing.Using the current implementation,A call to this.save (png) opens a pop-up box for file downloads,And you will need to rename the file,And add a png or jpg extension. This is because when calling this function,Browsers redirect the encoding of the image to base64, and they don't know the type of the file. The code block given below will save the image:

this.render (function () {
 this.save ("png");

demo and complete code

camanjs javascript library web page image processing

As an exercise,You can try to improve the user experience,Such as mark the filter applied on the current picture or modify the save button to avoid the problem of renaming.

As we see, camanjs is a very useful image manipulation library,With many filters,And evolving features,And this tutorial is just about a fur.

The above content is relatively long.But the introduction is very detailed,Read with patience,Useful for learning to use camanjs to process images on web pages.

  • Previous jQuery implements tab effect code for scrolling
  • Next Solution to recover sql server 2000 accidentally deleted data