Search code examples
htmlcanvaskineticjspixastic

combine kineticjs and pixastic to apply image effect

I'm trying to use some features from the pixastic libary and combine it with kineticjs. One of which is to apply the sepia effect in pixastic to an image created with kineticjs.

I have a jsfiddle setup here:

http://jsfiddle.net/SkVJu/28/

I thought the following would work:

function sepia() {
    Pixastic.process(darth, "sepia");
    layer.draw();
}

but the image just stays the same. Have i missed something or is this not even possible to combine the both libraries together?

Solution

  • My guess is that you can't apply a Pixastic function directly onto a Kinetic.Image object, as it is slightly different than a regular image object.

    Alternatively, you need to grab the original source of the image, then you can run the Pixastic effects on that image, and then set the Kinetic.Image object with the new affected image after.

    function sepia() {
  var sepia = Pixastic.process(darth.attrs.image, "sepia");
  darth.setImage(sepia);
  layer.draw();
}

    Here's the full code: jsfiddle

    Note: You'll have to run this on your local server, as it won't work on jsfiddle (the pixastic library can't be loaded as an external resource, without a CDN host)

    2nd Note: You had to declare var layer outside of the imageObj.onload function, or else your sepia() function could not access the layer from inside the imageObj.onload. You can see how I did it in the jsfiddle.