Performance: Slow Rerenders, if Image has Filters

Hey,

first of all: Thanks for your amazing work.

I am currently try to apply filters to a user uploaded image, which I handle as HTMLImageElement internally.

If I try to apply filter to an image, I ran into some performance problems. My draw needs almost 3s and it seems, that the Stage size is not relevant. Also, if I remove image filters, everything works fine.

I also appended a screenshot and the profiler files.

filtercache.txt

This is one of the elements, which I am using. Other ones are quite similar. KImage is Image from Konva.

import { Brighten } from 'konva/lib/filters/Brighten';
import { HSL } from 'konva/lib/filters/HSL';
import { Contrast } from 'konva/lib/filters/Contrast';

const imageFilters = [
    Brighten,
    Contrast,
    HSL,
];

<Stage
    ref={stageRef}
    className={className}
    width={containerDimensions.width}
    height={containerDimensions.height}
    x={containerDimensions.width * 0.5}
    y={containerDimensions.height * 0.5}
    offsetX={containerDimensions.width * 0.5}
    offsetY={containerDimensions.height * 0.5}
    opacity={0.2}
    scaleX={containerScale}
    scaleY={containerScale}
    rotation={transform.angle}
>
    <FastLayer>
        <KImage
            ref={ref => {
                ref?.cache();
                ref?.getLayer()?.batchDraw();
            }}
            x={backgroundImg.width * transform.scale / 2 - (backgroundImg.width * transform.scale - containerDimensions.width) / 2 + transform.x}
            y={backgroundImg.height * transform.scale / 2 - (backgroundImg.height * transform.scale - containerDimensions.height) / 2 + transform.y}
            offsetX={backgroundImg.width / 2 }
            offsetY={backgroundImg.height / 2 }
            scaleX={transform.scale}
            scaleY={transform.scale}
            image={backgroundImg}
            filters={imageFilters}
            brightness={getBrightnessFromPercentage(effects.brightness)}
            contrast={getContrastFromPercentage(effects.contrast)}
            saturation={getSaturationFromPercentage(effects.saturation)}
        />
    </FastLayer>
</Stage>

Can you give me a hint what to try next?

Best, Johann

[lavrton]

You don’t need to recache if you change:

1. transform (such as position, rotation or scale)
2. or filter properties (such as brightness).

You will have to recache on other changes that affect the image itself (like stroke, or shadow).

[lavrton]

Also in some cases you may try to use CSS filters (the usually faster). Take a look here for a related demo: https://lavrton.com/case-study-image-labeling-for-machine-learning/