camanJS - 이미지 배열 크기에 따른 스택 레이어

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