CamanJS: Image Replacement

Question

I use CamanJS to add some image processing features to my site, it is a simple and excellent library, but its documentation is somehow poor.

I upload the image to my website, then I apply all the effects to the downloaded image (it is not saved on the server, I change 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 that I am reloading a new image. Apparently, CamanJS saves the first shot, and the new image is not displayed. when I read about this question, the only place I found the answer for this is here: CamanJS - changing the main canvas after applying filters / manipulations

but I am sorry that the answer was not so clear to me. so I have to ask about it again. I suggested using the answer reloadCanvasData(), but I did not know exactly how to use it, I tried so many ways, but everything went in vain! I tried:

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

and

Caman.reloadCanvasData(); 

and etc.

Can someone provide a working example? thank

Answer 1

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

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

Answer 2

I thought I would help those who came here to see how to replace the PIXEL data, and not just the uploaded 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();
                });

That way you can process the image at the pixel level and then put it back in camanjs.

Answer 3

HTML-. Second Image.with camanjs

-

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

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