开发者

Pixastic: Effects not working

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitle开发者_JAVA百科d 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!


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


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


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

    });
});


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜