Filters with images

Hey all, been loving Konva I’ve got a question about filters with images. Basically I need to load multiple images onto a layer in a stage and remove black bg by having a colour threshold and then fill white pixels as a colour. Also on scroll on a div these images would change to the next images in the list that I’ve already cached the image data

I’ve managed to get the Konva setup working with regular Konva.js without react loading the images, caching and adding filters within the onload, then redrawing.

Can we apply filters and threshold to multiple Konva <Image /> without having to add a custom component with onload state and lifecycle methods? I have the pixels/image already so I don’t need to load from a url.

The second FastLayer here contains the images I wish to manipulate with filters and the imaged change on scroll.

<Stage width={width} height={height}>
  <FastLayer>
    <Image x={x} y={y} image={image.getImage()} />
  </FastLayer>
  <FastLayer>
    <Image x={x} y={y} image={arrayImage[0]} />
    <Image x={x} y={y} image={arrayImage[1]} />
  </FastLayer>
</Stage>

[lavrton]

Do not create <canvas> elements inside render() function. It is possible that element can be “rendered” many times. Instead create canvas somewhere in lifecycle methods.

Somethis like this:

export default class CustomImage extends React.Component {
  state = {
    rawCanvas: null
  }
  componentDidMount() {
     const rawCanvas = document.createElement('canvas');
     this.setup(rawCanvas, this.props.image, this.props.threshold);
     this.setState({
       rawCanvas
     });
  }
  setup = (rawCanvas, image, threshold) => {
    const imageCanvas = image;
    const { width, height } = imageCanvas;
    const ctx = rawCanvas.getContext('2d');
    rawCanvas.height = width;
    rawCanvas.width = height;
    const manipulatedImageData = imageCanvas.getOverlay(color, threshold);
    const data = new ImageData(manipulatedImageData, width, height);
    ctx.putImageData(data, 0, 0);
  };
  render() {
    const { size, x, y, opacity } = this.props;
    if (!image) return null;
    return <Image opacity={opacity} size={size} x={x} y={y} image={this.state.rawCanvas} />;
  }
}

[lavrton]

@jamesg1 right, you have to call cache manually, but you can add filters inside render() function.

I am closing the issue. Add a comment if you still have questions.