KineticJS: How to convert a Stage into a HTML5 Canvas Element?

Question

I have a KineticJS stage with a lot of layers.

I found this post: How to copy a kineticjs stage to another canvas

It says that I get a canvas element from a layer as

var canvasElement = layer.getCanvas().getElement();

Is it also possible to export a stage into a canvas?

Answer 1

In your use case you can do this:

1. In hard way you can create custom canvas element (or Kinetic.Layer), then conver Stage to Image, draw the image to canvas (layer) then pass it to plugin.

2. But this way should also work. I just saw plugin source. It is very simple (js part). I edited it:

   stage.toDataURL({
       callback : function(data) {
           var imageData = data.replace(/data:image\/png;base64,/,'');
           return cordova.exec(function() {
               // done callback
           }, function() {
               // fail callback
           }, "Canvas2ImagePlugin","saveImageDataToLibrary",[imageData])
       }
   });