Pixastic: Effects not working

Question

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="pixastic.custom.js"></script>
<script type="text/javascript">
    $(document).ready(function()    {
    $('#image').pixastic("desaturate");
});
</script>
</head>

<body>
    <img id="image" src="test2.jpg"/>
</body>

</html>

This is the code that i'm working with and when i load the page in the browser, image does not desaturate. Can anyone please help me rectify what's wrong with the code!

I figured out what was the problem.... I was trying to access the files locally. Images were not desaturating because of some "Security Error" due to local access to files. I installed Xampp to create a local server on my PC and then ran the file...and voila Pixastic started working. — Shekhar, Jul 02 '11 at 07:31
I'm not sure, but I think you might be allowed to answer your own questions... — , Jul 02 '11 at 08:20

score 1 · Answer 1 · edited Feb 07 '14 at 15:38

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]);

    });
});

score 1 · Answer 2 · answered Nov 12 '11 at 19:10

This is moving the goal posts slightly but I had a project recently where I needed to do a lot of canvas image manipulation and started off with pixastic however i did run into a lot of issues and couldnt find a lot of documentation around. I moved to using http://camanjs.com/ and it was all a lot easier and i had a lot fewer issues. The library is very easy to impliment as a replacement for Pixastic.

Hope it helps Alex

ps worth mentioning that theres a lot of very cool presets too: http://camanjs.com/examples/presets

score 1 · Accepted Answer · answered Feb 26 '12 at 21:52

OK, so caman not working out?

Heres and example of the desaturate filter working:

http://jsfiddle.net/PCbvb/7/

Things to bear in mind with pixastic:

(1) you should try the : $(whatever).pixastic("desaturate",{average : false}); (average:false bit)

(2) canvas only works when the image is on the same domain as the script using it.

Hope that helps.

Alex

score 0 · Answer 4 · answered Jan 19 '12 at 18:13

I figured out what was the problem.... I was trying to access the files locally. Images were not desaturating because of some "Security Error" due to local access to files. I installed Xampp to create a local server on my PC and then ran the file...and voila Pixastic started working.

Pixastic: Effects not working

4 Answers4