Question

我正在开发一个网站，用户可以通过设置搜索字词来执行图片搜索。然后，基于用户可以选择或修改的一些参数来显示图像，例如位置，大小等。我想要提供的可能性之一是将混合模式应用于图像。经过一些研究和测试，我选择了camanJS library来应用这些混合效果。该库的工作方式是混合模式只能应用于图层，您可以将图像堆叠在另一个图像中，如：

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

以便混合模式应用于单个画布内的图层中。我的问题是：如果我有一个图像数组，我怎么能堆叠这些函数，一个在另一个内部，与我的数组中的图像数量一样多？

谢谢！

Answer 1

假设您在阵列中有3个图像，并且想要对每个图像应用不同的camanjs效果，那么它非常简单。

var images = [“＃image1”，“＃image2”，“＃image3”];

数组包含每个图像的div id。

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

camanJS - 根据图像数组大小堆叠图层

1 个答案: