Кнопка переключения оттенков серого с Pixastic

Question

У меня есть сценарий, который должен укомплектовать изображение и (среди прочих), чтобы иметь возможность конвертировать в оттенки серого и обратно в оттенки серого.

Я использую Pixastic для этого, и все это отлично работает в моем доказательстве концепции (http://www.gportdev.nl/klanten/dgsw/hbhg/).

Что бы мне хотелось, это получить кнопку оттенков серого для переключения между оттенками серого и без оттенков серого, но я не знаю, как это реализовать. Должен ли я клонировать элемент холста и применять Pixastic для обоих элементов, или есть лучшее решение для этого?

Спасибо!

Answer 1

У меня есть что-то похожее ... Я смазываю свой образ, когда он завис. Я полагаю, что для вас это должно быть такое же понятие, как и мое .. но вместо того, чтобы навести курсор, у вас будут события щелчка.

То, что я сейчас работаю, это если я наводил на .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> 
    } 
}