带有 Pixastic 的灰度切换按钮答案

【问题标题】：Grayscale toggle button with Pixastic带有 Pixastic 的灰度切换按钮
【发布时间】：2013-05-28 17:00:34
【问题描述】：

我有一个脚本，它必须处理图像并且（以及其他）能够转换为灰度并再次转换为非灰度。

我为此使用了 Pixastic，到目前为止，在我的概念证明 (http://www.gportdev.nl/klanten/dgsw/hbhg/) 中一切都很好。

我想要的是让灰度按钮在灰度和非灰度之间切换，但我不知道如何实现这一点。我应该克隆画布元素并在这两个元素上应用 Pixastic，还是有更好的解决方案？

谢谢！

【问题讨论】：

标签： jquery pixastic

【解决方案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>
     }
 }

【讨论】：