Search code examples
javascripthtml5-canvaskineticjssave-image

stage.toDataURL in KineticJS doesn't work

Here is how i decorate the stage:

every time user drag an image outside KineticJS:
    create a image onto where it is dropped
    layer.add(new_image)
    stage.add(layer)
finally:document.getElementById('save').addEventListener('click', function() {
    stage.toDataURL({
        callback: function(dataUrl) {
        window.open(dataUrl);
        }
    });
}, false);

And there is a button with id=save in html

All the image are from my local machine. Any suggestions? THX!!

Solution

  • You shouldn't add the layer to the stage every time an image is added. What you should do is:

     layer.add(new_image);
 layer.draw(); //draws the new image added to the layer

    Also, your toDataURL method looks correct, in fact it looks exactly like this tutorial if you haven't checked it out yet.