How to revert an image in pixastic when an element is clicked?

Question

I just tried following code to blur an image , it works well. But i want to revert back when an element is clicked, how can I do this ?

$(window).bind("load",function() {

         $(".testclass").pixastic("blurfast", {amount:0.9});
    $(".clickclass").click(function(e){
        // this statement should revert the image
                });
    }
);

evancohen · Answer 1 · 2012-06-04T01:47:05.573

0

I've never used it, but give this a try:

$(".clickclass").click(function(e){
      $(this).pixastic("blurfast", {amount:0}); //This should remove the blur
});

EDIT: Another stab in the dark:

$(".clickclass").click(function(e){
      Pixastic.revert(this);
 })

edited Jun 04 '12 at 01:47

answered Jun 04 '12 at 01:24

evancohen

677
1
5
9

i tried that edited one as well , it doesn't work. it would be great to find an alternative way to blur an image instead of using pixastic plugin – Srivi Jun 04 '12 at 02:03

score 0 · Answer 2 · answered Feb 07 '14 at 15:07

adding [0] made a big difference. Definitely did the trick for me. Give it a try

Pixastic.revert($(this).find('.imageUrl')[0]);

Another thing is i had to create a VAR as pixastic creates a duplicate canvas

This is my whole function

$(function () {

        $('.col1.w1').mouseenter(function () {


            var origImg = ($(this).find('.imageUrl'));
            if (origImg.is('img')) {
                Pixastic.process(origImg[0], 'blurfast', { amount: 2 });
            }


        });
        $('.col1.w1').mouseout(function () {
            var origImg = ($(this).find('.imageUrl'));
            Pixastic.revert($(this).find('.imageUrl')[0]);


        });
    });

How to revert an image in pixastic when an element is clicked?

2 Answers2