Grayscale toggle button with Pixastic

Question

I have a script that has to maniplate an image and (among others) to be able to convert to grayscale and back again to none-grayscale.

I am using Pixastic for this, and it all works great so-far in my proof of concept (http://www.gportdev.nl/klanten/dgsw/hbhg/).

What I would like though, is to get the grayscale button to toggle between grayscale and none-grayscale, but I am not sure how to implement this. Should I clone the canvas element and apply Pixastic on both elements, or is there a better solution for this?

Thanks!

Answer 1

I have something similar... i am bluring my image when hovered on. I suppose for you it should be the same concept as mine.. but instead of hover u will have click events.

What i am now working on is if i hover on the .productText just below the image... i would also like the image to blur then too.

$(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 [email protected]() @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>
     }
 }