How to crop an image with canvas and KineticJS?

1
2
3
4
5
6
7

var stage = new Kinetic.Stage({
    container: 'container',
    width: 500,
    height: 500
});

var layer = new Kinetic.Layer();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

var imageObj = new Image();
imageObj.onload = function() {
    var image = new Kinetic.Image({
        image: imageObj,
        x: 0,
        y: 0,
        width: 500,
        height: 500
    });

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

imageObj.src = 'path/to/image.jpg';

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

var mask = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 300,
    height: 300,
    fill: 'black'
});

mask.on('mouseover', function() {
    this.opacity(0.5);
    layer.draw();
});

mask.on('mouseout', function() {
    this.opacity(1);
    layer.draw();
});

layer.add(mask);

1
2
3
4
5
6

image.clip({
    x: mask.x(),
    y: mask.y(),
    width: mask.width(),
    height: mask.height()
});

1

layer.draw();