1

I've been experimenting with Konva with Vue-Konva in a Vue.js test application. I got it to draw objects as described no problem. However I can't seem to understand how to save what I have on the stage to an image or utilize the "toDataURL" function. All I get is "toDataURL" is not a function. I'm sure it's just a matter of how to structure to execute it.

Here is my template:

<v-stage ref="stage" :config="configKonvaStage">
  <v-layer ref="layer">
    <v-Line :config="configTopSide"></v-Line>
    <v-Line :config="configRightSide"></v-Line>
    <v-Line :config="configBottomSide"></v-Line>
    <v-Line :config="configLeftSide"></v-Line>
    <v-Rect :config="configRect"></v-Rect>
  </v-layer>
</v-stage>

My config data is as follows:

configKonvaStage: {
      x: 0,
      y: 0,
      width: 400,
      height: 400,
    }

Like I said this all works fine. However I can't figure out how to initiate the "toDataURL" or the "toImage" functions of Konva.

I tried the following:

$KonvaImg = this.$refs.stage.getStage().toImage({...})

and $$KonvaImg = this.$refs.stage.getStage().toDataURL({...})

The Error I get is:

*konva.js?c4b2:1094 Konva warning: Unable to get data URL. Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported*

Do I need to create a Canvas element and assign the Konva stage to it? It seems that would defeat some of the benefits of using Konva. Also is the stage equivalent to the Canvas?

user1110938
  • 153
  • 4
  • 11
  • Oops, the $$KonvaImg is a typo of course. This is the correct line of code. $KonvaImg = this.$refs.stage.getStage().toDataURL({...}) – user1110938 Feb 11 '18 at 11:17
  • 1
    Okay, with some research now I understand that error is a cross domain issue. Which at least points me in a path where I believe I can address it. However it would be good if someone can at least verify that I was at least correct in using .getStage() to access the Konva functions within Vue. – user1110938 Feb 11 '18 at 11:34
  • 2
    API looks correct. That is a cross-domain issue. https://stackoverflow.com/questions/13674835/canvas-tainted-by-cross-origin-data – lavrton Feb 11 '18 at 13:33

0 Answers0