React Next.js TS Konva

Hej, jag vill börja med att säga att jag är väldigt ny inom programmering över lag.

Finns det någon här som vet hur man implementerar kontrast-filter med Konva eller css?

Jag har testat både Konva och vanlig hederlig CSS för att implementera filter och jag får inte det att fungera. Bilden laddas upp som användaren väljer och Rect, Stage, Circle, Layer fungerar som väntat, men just filter funkar inte. Det känns som jag missar något fundamentalt som gör att det inte fungerar.

Jag har kommenterat ut all css i global.css och lagt in en annan css för att tillämpas på <Stage och den fungerar.

Jag har testat style på className av <Image som tillhör Konva eftersom jag inte får Konvas egna filter att fungera. Jag har även console.log och med Konvas filter blir det bara null.

Kan det vara sättet bilden laddas upp på som inte stämmer?

Mycket tacksam för all hjälp jag kan få!

'use client'
import { useState, useRef, ChangeEvent, useEffect } from 'react';
import { Circle, Layer, Stage, Image, Rect} from 'react-konva';
import Konva from 'konva';


type CircleType = {
  x: number;
  y: number;
  color: string;
};

export default function Home() {
  const [image, setImage] = useState<HTMLImageElement | null>(null);
  const [circles, setCircles] = useState<CircleType[]>([]);
  const stageRef = useRef<any>(null);
  

  const stageWidth = 500;
  const stageHeight = 500;
  

  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = () => {
        const img = new window.Image() as HTMLImageElement;
        img.src = reader.result as string;
        img.onload = () => {

           // Create a new Konva Image instance
        const konvaImage = new Konva.Image({ image: img });

        // Cache the image
        konvaImage.cache();


          setImage(img);
        };
      };
      reader.readAsDataURL(file);
    }
  };

  const handleClickAddCircle = (color: string) => {
    if (image) {
      const centerX = stageWidth / 2;
      const centerY = stageHeight / 2;
      setCircles([...circles, { x: centerX, y: centerY, color }]);
    }
  };

  return (
    <main className='flex min-h-screen flex-col items-center justify-between p-24'>
      <input type="file" onChange={handleFileChange} accept="image/*" />
      <div className='stage-container'>

        <Stage
          width={stageWidth}
          height={stageHeight}
          className='my auto bg-white'
          ref={stageRef}
        >
          <Layer>
             {/* Lägg till en rektangel för att fungera som bakgrund */}
             <Rect
              width={stageWidth}
              height={stageHeight}
              fill="black"
            />
            {image &&
            <Image 
            image={image} 
            width={stageWidth} 
            height={stageHeight}
            filters={[Konva.Filters.Contrast]} // Lägg till kontrastfiltret här
            contrast={-50} // Ange kontrastvärdet här
            />}
            
            {circles.map((circle, index) => (
              <Circle
                key={index}
                x={circle.x}
                y={circle.y}
                radius={20}
                stroke={circle.color}
                strokeWidth={5} // Ange en lämplig tjocklek för konturen
                draggable
                
                onDragEnd={(e) => {
                  const newCircles = [...circles];
                  newCircles[index] = { ...circle, x: e.target.x(), y: e.target.y() };
                  setCircles(newCircles);
                }}
              />
            ))}
          </Layer>
        </Stage>
        <div>
          <button onClick={() => handleClickAddCircle('green')}>Green</button>
          <button onClick={() => handleClickAddCircle('blue')}>Blue</button>
          <button onClick={() => handleClickAddCircle('yellow')}>Yellow</button>
        </div>
      </div>
    </main>
  );
}