apply the camanJS filter on the original image

Question

If I apply a filter on my image with camanJS it all works good but when I click on a second filter it needs to go back to the original image and apply it on that image, but currently it puts the second filter on the image that still has the first filter on it.

This is my html part:

<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>

I create a canvas with id photoCanvas this is used to show to image and I have a list with different filters that trigger the following javascript part if clicked on:

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

I tried to tell the program that it needs to use a specific image to apply the filter on but it keeps stacking the filters.

How can I fix this so it does not stack all the filters, but resets the image to the original and then apply the new filter ?

Answer 1

what you can do it simply the follow:

change this part of your code (actually you should just add a line):

YOUR CODE:

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

HOW YOU NEED TO CHANGE IT:

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();
    }
});

Hope now it works cool:))

Please let me know:)

Best Dinuz