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>

这是我正在使用的代码，当我在浏览器中加载页面时，图像不会降低饱和度。任何人都可以帮我纠正代码的错误！

Answer 1

这是稍微移动目标帖子，但我最近有一个项目，我需要做很多画布图像处理，并开始与pixastic然而我遇到了很多问题，并没有找到很多文档。我转而使用http://camanjs.com/，这一切都变得容易多了，我的问题也少得多。该库非常容易被视为Pixastic的替代品。

希望它有所帮助亚历

值得一提的是，还有许多非常酷的预设： http://camanjs.com/examples/presets

Answer 2

好的，所以caman没有锻炼？

Heres和desaturate过滤器工作的例子：

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

pixastic要记住的事情：

（1）你应该尝试：$(whatever).pixastic("desaturate",{average : false});（平均值：假位）

（2）canvas仅在图像与使用它的脚本位于同一域时起作用。

希望有所帮助。

亚历

Answer 3

添加[0]带来了很大的不同。绝对是我的伎俩。试一试。

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

另一件事是我必须创建一个VAR，因为pixastic会创建一个重复的画布。

这是我的全部功能

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

    });
});

Answer 4

我想出了问题是什么......我试图在本地访问这些文件。由于本地访问文件导致某些“安全错误”，图像没有去饱和。我安装了Xampp在我的电脑上创建一个本地服务器，然后运行该文件......瞧，Pixastic开始工作。

Pixastic：效果不起作用

4 个答案: