Search code examples
vue.jssave-imagekonvavue-konva

vue-konva how save layer with image and line like jpg, png

have v-group with image and lines on layer,stage like this:

<button @click="export"></button>
<v-layer ref="layer">
<v-group>
<v-image :config="configBackground"></v-image>
<v-line
v-for="line in lines"
:key="line.id"
:config="{
stroke: 'red',
points: line.points,
}"
/>
</v-group>
</v-layer>

in my function i try get dataurl from stage to save img:

export(e) {
//console.log(e.target.getStage())
let dataURL = e.target.toDataURL()
console.log(dataURL)
// this.download(dataURL, "img.png")
},

If i click button, i get e.target.toDataURL is not a function

How can i get dataURL to save image?

Solution

  • this work for me

    let stage = vm.$refs.stage.getNode()
let dataURL = stage.toDataURL()