Use Filters in CamanJs

[alezala]

hi!, how to use nostalgia filter ? and other filters with example

[meltingice]

They're just functions like the normal adjustments are.

Caman("#image-id", function () {
  this.nostalgia();
  this.render();
});

[Renatico]

Somebody. Please, help. There is the beautiful example of camanjs operating at camanjs.com/examples but I couldn't repeat it on my local host? I mean how to operate over the several filters' sliders without constantly reloading main picture into the canvas? I need to invoke the method of revent() in order to get source image as a start point after each iteration of using a slider. So the canvas is blinking while the slider is being moved.

[meltingice]

If you call revert() with false, it won't flash back to the original image, but it will reset the internal pixel data. This makes things like sliders work a lot smoother.

[Renatico]

Thank you, Meltingice! Actually, I've tried to do this but it didn't work for me. But now I do exactly the same - put the value of false as an only revert()'s parameter and it works! I'm so funny but I don't understand why it didn't work early.

[Renatico]

Dear, Meltingice! I would be very glad to get yours advice on some issue.

We have the following construction from the Guides:

Caman("#image-id", function () { this.brightness(5).render(); });

We created the object of Caman and when it was completely created we did some operations from the constructor's callback. But let suppose we need for some complex oop-style javascript's object that has one of its field named "this.caman". How can I create the object of Caman against the "image id" and put the object of Caman into the "this.caman"?

I tried: var ImageEffects = function (imgSrc) { var self = this; self.caman = null; self.setNew(imgSrc); }; ImageEffects.prototype.setNew = function(imgSrc) { var self = this; Caman('#mImage', function() // I have the tag of "img" with id="mImage" in my page { self.caman = this; }); };

And I have got an error: constructor ends its work much more faster than Caman's callback and I constantly get console's error message:

Uncaught TypeError: Object [object global] has no method 'process' caman.full.js:21....

while, for example, brightness(5) is being called via the reference to ImageEffects' object:

var ImEf = new ImageEffects('images/1.jpg'); ImEf.caman.brightness(5).render();

Have you got some ideas? Thanks in advance.

[meltingice]

You have a race condition. The reason that you provide a callback to the Caman() function is because initialization of CamanJS is asynchronous. Thus, when you do:

var ImEf = new ImageEffects('images/1.jpg');
ImEf.caman.brightness(5).render();

CamanJS is not fully initialized yet and you try to render to an incomplete canvas. You will need to wait for initialization one way or another. Either with a callback or some other means.

[Renatico]

Thank you for your response! I will dig it more.

[Renatico]

Dear, Meltingice. I made filters' grid like we have into the examples' page at camanjs.com/examples/. And it's OK. But when I set the value of 'sharpen' to other value than zero, I constantly get an error in Chrome's Developer Tools Console:

Uncaught TypeError: Object #