CamanJS: Replacing image

Question

I'm using CamanJS to add some image processing features to my website, it's a simple and great library but still its documentation is somehow poor.

I'm uploading an image to my website, then I'm applying all the effects on the image uploaded (it's not saved on the Server, I'm modifying it on the client side). as shown on the official website (http://camanjs.com/guides/#BasicUsage):

function invertColors() {
    Caman("#original-img", function () {
        this.invert().render();
    });
}

The problem is when I re-upload a new image. apparently CamanJS keeps the first image cashed, and the new image is not shown. when I read about this issue the only place I found an answer for this is here: CamanJS - change underlying canvas after applying filters/manipulations

but I'm sorry the answer was not that clear for me. so I have to ask it again. the answer suggested to use reloadCanvasData() but I didn't know exactly how to use it, I tried so many ways but all went in vain! I tried:

Caman("#original-img", function () {
    this.reloadCanvasData();
});

and:

Caman.reloadCanvasData(); 

etc.

Can anyone provide a working example? Thanks

Answer 1

I thought I'd help those who came here looking at how to replace PIXEL data rather than just a loaded image:

                can1 = document.getElementById("MyCanvas1");
                ctx1 = can1.getContext("2d");
                var c = <do what ever you need and make a new canvas here>
                ctx1.putImageData(c, 0,0);  // <---this replaces the pixeldata

                Caman("#MyCanvas1", function () {  
                    this.render();
                });

This way you can process the image at the pixel level, and then get it back into camanjs.

Answer 2

As a solution what I have done is clear the canvas and have again Inserted an HTML Image tag. before calling Second Image.with camanjs

something like following

function clearCanvas() {
    $('#ImageParentDiv').empty();

    var htmlTag = '<img src="../images/Loading.gif" id="original-img">';
    $('#ImageParentDiv').html(htmlTag);
}

Answer 3

Just call the revert() when you need an original image:

Caman("#original-img", function () {
        this.revert();
        this.render();
    });