vue-konva 如何保存带有图像和线条的图层，如 jpg、png

Question

图层上有带图像和线条的v组，舞台是这样的：

<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>

在我的函数中，我尝试从舞台获取 dataurl 以保存 img:

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

如果我点击按钮，我得到 e.target.toDataURL is not a function

如何获取 dataURL 以保存图像？

Answer 1

这对我有用

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

vue-konva 如何保存带有图像和线条的图层，如 jpg、png

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

save-image

vue.js

konva

vue-konva