Search code examples
javascripthtmlcanvaskineticjs

KineticJS: How do I Crop an Image?

I use KineticJs and want to crop an existing image. I tried the following: 

var image = new Kinetic.Image({}); // some kinetic image
var layer = new Kinetic.Layer();
var stage = new Kinetic.Stage({
            container: "iPhone",
            width: 1000,
            height: 1000
        });

image.crop({
  x: 0,
  y : 0,
  width : 100,
  height : 100
});

image = image.crop();


layer.add(image);
layer.draw();
stage.add(layer);

The former does not work. How do I crop an existing image with KineticJs?

Solution

  • You should pass javascript object with x, y, width and height properties to crop function:

    image.crop({
  x: 10,
  y : 10,
  width : 66,
  height : 60
});

    http://jsbin.com/zubek/2/edit