vue-konva - Add filters to image

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?

score 1 · Accepted Answer · answered Oct 30 '18 at 03:42

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>

vue-konva - Add filters to image

1 Answers1