vue-konva - Add filters to image - vue.js

Question

I am using vue-konva with vuejs and I can't appy konva filters on my elements.
I have implemented my component like this :
<template>
<div>
<v-stage ref="stage" :config="configKonva">
<v-layer ref="layer">
<v-image ref="maskelement" :config="imageConfig" />
<v-circle :config="configCircle"></v-circle>
</v-layer>
</v-stage>
</div>
</template>
<script>
export default {
name: 'mySvg',
data() {
const img = new Image();
img.src = 'myImagePath.png';
return {
configCircle: {
x: 500,
y: 200,
radius: 70,
fill: 'red',
stroke: 'pink',
strokeWidth: 4,
},
imageConfig: {
x: 0,
y: 0,
image: img,
width: 1181,
height: 1181,
filters: [
Konva.Filters.Mask,
],
threshold: 200,
},
};
},
};
</script>
I have also tryed to add a sceneFunc attribute to imageConfig like this :
imageConfig: {
x: 0,
y: 0,
image: img,
width: 1181,
height: 1181,
sceneFunc: (context, elem) => {
elem.filters([Konva.Filters.Mask]);
elem.threshold(200);
},
},
But as soon as there is a sceneFunc attribute, my component won't display
How should I use filters with vuejs?

Answer 1

You can use this code to apply cache to the image:
<template>
<v-stage :config="{
width: 300,
height: 300
}">
<v-layer>
<v-image :config="{
image: this.image,
filters: this.filters,
blur: 100,
scaleX: 0.3,
scaleY: 0.3
}" ref="image"></v-image>
</v-layer>
</v-stage>
</template>
<script>
import VueKonva from 'vue-konva'
import Vue from 'vue';
Vue.use(VueKonva)
export default {
name: "App",
data() {
return {
image: null,
filters: [Konva.Filters.Blur]
}
},
created() {
var img = new Image();
img.src = './logo.png';
img.onload = () => {
this.image = img;
this.$nextTick(() => {
const node = this.$refs.image.getStage();
node.cache();
node.getLayer().batchDraw();
})
}
}
};
</script>