CODEWITHSUNDEEP
javascriptreactjsimagekonva
Jesper Kihlberg
Jesper Kihlberg

Reputation: 566

Konva: Calling cache() on an image disables imageSmoothingEnabled=false

I am working on an app that renders pixelated sprites in Konva. I want to be able to apply some filters on the images, and it seems that I need to call cache() on the image, to apply the filter. However, calling cache seems to disable the layer property imageSmoothingEnabled=false so that my images are rendered with smoothing applied:

With call to cache:

const LionImage = () => {
  const [image] = useImage("https://konvajs.org/assets/lion.png");
  const imageRef = React.useRef();
  useEffect(() => {
    imageRef.current.cache();
  }, [image]);
  return <Image image={image} ref={imageRef} width={400} height={400} />;
};

enter image description here

Without call to cache:

const LionImage2 = () => {
  const [image] = useImage("https://konvajs.org/assets/lion.png");
  return <Image image={image} width={400} height={400} />;
};

enter image description here

App render code:

      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer imageSmoothingEnabled={false}>
          <LionImage />
          <LionImage2 />
        </Layer>
      </Stage>

I created a Codesandbox that exemplifies the problem:

https://codesandbox.io/s/image-smoothing-cache-xyoxsu?file=/src/index.js:860-881

How can I render my images with filters and without smoothing?

Upvotes: 0

Views: 635

Answers (1)

Jesper Kihlberg
Jesper Kihlberg

Reputation: 566

Apparently, you can pass a config to the cache method, and adding {imageSmoothingEnabled: false} here solves the issue:

const LionImage = () => {
  const [image] = useImage("https://konvajs.org/assets/lion.png");
  const imageRef = React.useRef();
  useEffect(() => {
    imageRef.current.cache({ imageSmoothingEnabled: false });
  }, [image]);
  return <Image image={image} ref={imageRef} width={400} height={400} />;
};

Upvotes: 1

Related Questions