在原始图像上应用camanJS过滤器

apply the camanJS filter on the original image

本文关键字：camanJS 过滤器 应用 原始 图像      更新时间：2023-09-26

如果我用camanJS在我的图像上应用过滤器，它都工作得很好，但是当我点击第二个过滤器时，它需要回到原始图像并将其应用于该图像，但目前它将第二个过滤器放在仍然有第一个过滤器的图像上。

这是我的html部分:

<table>
        <tr>
            <td><div id="photo"><canvas id="photoCanvas" width="500" height="500">Uw browser ondersteund geen canvas</canvas></div></td>
            <td><div id="filterContainer">
                    <h4>Please select your photo effect.</h4>
                    <ul id="filters">
                        <li> <a href="#" id="normal">Normal</a> </li>
                        <li> <a href="#" id="vintage">Vintage</a> </li>
                        <li> <a href="#" id="lomo">Lomo</a> </li>
                        <li> <a href="#" id="clarity">Clarity</a> </li>
                        <li> <a href="#" id="sinCity">Sin City</a> </li>
                        <li> <a href="#" id="sunrise">Sunrise</a> </li>
                        <li> <a href="#" id="pinhole">Pinhole</a> </li>
                    </ul>
                </div></td>
        </tr>
    </table>

我创建了一个id为photoCanvas的画布，用于显示图像，我有一个带有不同过滤器的列表，如果点击它会触发以下javascript部分:

$(function() {
Caman("#photoCanvas", "./images/183411_1871156496150_3955828_n.jpg", function () {
    this.render();
});
var filters = $('#filters li a');
//    originalCanvas = $('#canvas'),
//    photo = $('#photo');   
filters.click(function(e){
    e.preventDefault();
    var f = $(this);
    if(f.is('.active')){
        // Apply filters only once
        return false;
    }
    filters.removeClass('active');
    f.addClass('active');
    // Listen for clicks on the filters
    var effect = $.trim(f[0].id);
    Caman("#photoCanvas", "images/183411_1871156496150_3955828_n.jpg", function () {
        // If such an effect exists, use it:
        if( effect in this){
            this[effect]();
            this.render();
        }
    });
});
});

我试着告诉程序，它需要使用一个特定的图像来应用过滤器，但它一直叠加过滤器。

我怎样才能解决这个问题，使它不堆叠所有的过滤器，而是将图像重置为原始图像，然后应用新的过滤器?

你可以这样做:

更改这部分代码(实际上你应该只添加一行):

代码:

Caman("#photoCanvas", "images/183411_1871156496150_3955828_n.jpg", function () {
    // If such an effect exists, use it:
    if( effect in this){
        this[effect]();
        this.render();
    }
});

如何修改:

Caman("#photoCanvas", "images/183411_1871156496150_3955828_n.jpg", function () {
    // If such an effect exists, use it:
    if( effect in this){
        //NOTE THIS IS THE LINE THAT I ADD FOR YOU:
        this.revert();
        this[effect]();
        this.render();
    }
});

希望现在它工作酷:))

请告诉我:)

最好Dinuz

相关文章：