Search code examples
javascriptimagekineticjs

kinetic js image is cropped in memory when dragging

I have applied dragging (built in ability) on my group which consists of image object and 4 anchor objects (shapes).

When I move group all works ok, but when I want to save that image. Image gets cropped as Image(group) is moved away of (0,0) position. If I load image and save it when it is on (0,0) position get full image in file, but if dragged it away from 0,0 than my image gets cropped progressively, when I save it. I observed what toDataURL() is returning and really further I go from 0,0 string gets shorter from toDataURL()

Please can somebody help me.

Thx

Solution

  • If you drag the group, you must define the x,y,width,height properties of toDataURL:

    A Demo: http://jsfiddle.net/m1erickson/Kr3t2/

    var url=group.toDataURL({
    x:group.x(),
    y:group.y(),
    width:group.getWidth(),
    height:group.getHeight()
});