I compared Caman 3.3.0 with Caman 4.1.1 and it turns out that the filter does work better on the old version. When the image is bigger that 100 x 100 px then 4.1.1 does not work.
var stage = new Kinetic.Stage({
container: 'container',
width: 640,
height: 640
});
var layer = new Kinetic.Layer();
stage.add(layer);
// create an offscreen canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
// load the star.png
var img = new Image();
img.onload = start;
img.crossOrigin = "anonymous";
img.src = "https://dl.dropboxusercontent.com/u/47067729/Foto%2014.11.14%2000%2007%2046.jpg";
// when star.png is loaded...
function start() {
var tmpWidth = Math.floor(img.width /2);
var w = Math.min(tmpWidth, 640);
var h = img.height * w / img.width;
w = 640;
h = 640;
// draw the star image to the offscreen canvas
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, 0, 0, w, h);
// create a new Kinetic.Image
// The image source is the offscreen canvas
var image1 = new Kinetic.Image({
x: 0,
y: 0,
image: canvas,
draggable: true
});
layer.add(image1);
layer.draw();
}
// lomo the canvas
// then redraw the kinetic.layer to display the lomo'ed canvas
$("#myButton").click(function () {
Caman(canvas, function () {
this.lomo().render(function () {
layer.draw();
});
});
});
I compared Caman 3.3.0 with Caman 4.1.1 and it turns out that the filter does work better on the old version. When the image is bigger that 100 x 100 px then 4.1.1 does not work.
Here is a JSFiddle of what I did: http://jsfiddle.net/confile/7Luh9y75/