원본 이미지에 camanJS 필터 적용

Question

camanJS를 사용하여 이미지에 필터를 적용하면 두 가지 필터를 모두 클릭해도 원본 이미지로 돌아가서 이미지에 적용해야하지만 현재 그것은 첫 번째 필터가있는 이미지에 두 번째 필터를 넣습니다. 클릭하면 난이 이미지에 표시하는 데 사용됩니다 아이디 photoCanvas와 캔버스를 만들고 나는 다음과 같은 자바 스크립트 부분을 트리거 다른 필터 목록을 가지고

<table> 
     <tr> 
      <td><div id="photo"><canvas id="photoCanvas" width="500" height="500">Uw browser ondersteund geen canvas</canvas></div></td> 
      <td><div id="filterContainer"> 
        <h4>Please select your photo effect.</h4> 
        <ul id="filters"> 
         <li> <a href="#" id="normal">Normal</a> </li> 
         <li> <a href="#" id="vintage">Vintage</a> </li> 
         <li> <a href="#" id="lomo">Lomo</a> </li> 
         <li> <a href="#" id="clarity">Clarity</a> </li> 
         <li> <a href="#" id="sinCity">Sin City</a> </li> 
         <li> <a href="#" id="sunrise">Sunrise</a> </li> 
         <li> <a href="#" id="pinhole">Pinhole</a> </li> 
        </ul> 
       </div></td> 
     </tr> 
    </table> 

:

이 내 HTML 부분입니다

$(function() { 
Caman("#photoCanvas", "./images/183411_1871156496150_3955828_n.jpg", function() { 
    this.render(); 
}); 

var filters = $('#filters li a'); 
// originalCanvas = $('#canvas'), 
// photo = $('#photo'); 

filters.click(function(e){ 

    e.preventDefault(); 

    var f = $(this); 

    if(f.is('.active')){ 
     // Apply filters only once 
     return false; 
    } 

    filters.removeClass('active'); 
    f.addClass('active'); 
    // Listen for clicks on the filters 
    var effect = $.trim(f[0].id); 

    Caman("#photoCanvas", "images/183411_1871156496150_3955828_n.jpg", function() { 
     // If such an effect exists, use it: 
     if(effect in this){ 
      this[effect](); 
      this.render(); 
     } 
    }); 
}); 
}); 

필터를 적용 할 때 특정 이미지를 사용해야하지만 필터를 계속 스태킹해야한다는 것을 프로그램에 알리려고했습니다.

이 문제를 해결하여 모든 필터를 쌓을 수는 없지만 이미지를 원래대로 재설정 한 다음 새 필터를 적용 할 수 있습니까?

Answer 1

당신이 그것을 간단하게 추적 할 수있는 일 :

변화 코드의이 부분을 (실제로는 한 줄을 추가해야합니다) :

코드 : 당신이 필요로하는 방법

Caman("#photoCanvas", "images/183411_1871156496150_3955828_n.jpg", function() { 
    // If such an effect exists, use it: 
    if(effect in this){ 
     this[effect](); 
     this.render(); 
    } 
}); 

IT를 변경하려면 :

Caman("#photoCanvas", "images/183411_1871156496150_3955828_n.jpg", function() { 
    // If such an effect exists, use it: 
    if(effect in this){ 
     //NOTE THIS IS THE LINE THAT I ADD FOR YOU: 
     this.revert(); 
     this[effect](); 
     this.render(); 
    } 
}); 

희망은 지금은 멋진 작동합니다 :))

012 3,516,

은 알려 주시기 바랍니다 :

최저 Dinuz