camanJS - stack layers according to image array size

Question

i am developing a website in which the user can perform an image search by setting search terms. then the images are shown based on a few parameters the user can select or modify, like position, size, etc. one of the possibilities i want to make available is to apply blending modes to the images. after some research and tests, i chose the camanJS library to apply these blending effects. the library works in such a way that blending modes an only be applied to layers, which you can stack one inside another like:

Caman('#test', imgSource, function () {
   this.newLayer(function () {
      this.setBlendingMode('multiply');
      this.overlayImage(someOtherImgSource);
      this.newLayer(function () {
        this.setBlendingMode('softLight');
        this.overlayImage(evenOtherImgSource);
        //and so on...
      });
   });
   this.render();
});

so that the blending modes are applied in layers inside one single canvas. my question is: if i have an array of images, how could i stack these functions, one inside another, as many times as the number of images in my array?

thanks!

Answer 1

Suppose you have 3 images in array and you want to apply different camanjs effects on each image, then it is very simple.

var images=["#image1","#image2","#image3"];

The array contains div id of each images.

Caman('#test', imgSource, function () {
   this.newLayer(function () {
      this.setBlendingMode('multiply');
      this.overlayImage(images[0]);
      this.newLayer(function () {
        this.setBlendingMode('softLight');
        this.overlayImage(images[1]);
        //and so on...
      });
   });
   this.render();
});