Pixastic을 사용한 그레이 스케일 토글 버튼

Question

나는 그레이 스케일로 변환하고 다시 그레이 스케일로 변환 할 수 없도록 이미지를 조작해야하는 스크립트가 있습니다.

저는 이것을 위해 Pixastic을 사용하고 있습니다. 개념 증명 (http://www.gportdev.nl/klanten/dgsw/hbhg/)에서이 모든 것이 훌륭하게 작동합니다.

회색 음영과 회색 음영 사이를 전환하는 회색 음영 단추를 얻는 것이 좋겠지 만이를 구현하는 방법을 모르겠습니다. canvas 요소를 복제하고 Pixastic을 두 요소 모두에 적용해야합니까, 아니면 더 좋은 해결책이 있습니까?

감사합니다.

Answer 1

나는 비슷한 것을 가지고 있습니다. 나는 맴돌 았을 때 내 이미지를 bluring하고 있습니다. 나는 내 생각과 똑같은 컨셉이어야한다고 생각합니다. 그러나 마우스를 가져 가면 클릭 이벤트가 생깁니다.

내가 지금하고있는 것은 이미지 아래의 .productText에 마우스를 올려 놓으면 ... 또한 이미지가 흐리게 보이기를 바랍니다.

$(document).ready(function() { 
        blurEvent(); 
      }); 

function blurEvent() { 
    $('.imageUrl').load(function() { 
     $('.imageUrl').each(function() { 
      this.onmouseover = function() { 
       var canvas1 = Pixastic.process(this, "blurfast", { amount: 2 }); 
        canvas1.onmouseout = function() { 
         Pixastic.revert(this); 
        } 
       } 
      }); 
     }); 
    } 

HTML :

<!--MY HTML--> 
<div class="col1 w1 modelCount-@Model.Count() @name model-@counter"> 

@{if (product.Type == "Product") 
    { 
     <div class="xlFont whiteFont productImage productImageH"> 
      <img class="imageUrl" src="@product.ImageUrl" /> 
     </div> 
     <div class="productText productTextH"> 
      <div class="mFont padding10 padBotNone">@product.Name</div> 
      <div class="sFont padding10 padTopNone">@product.FromText</div> 
      <button class="margL10 displayNone">MoreInfo</button> 
     </div> 
    } 
}