Performance decrease after forEachLayerAtPixel function calling

[Shekenix]

Description
Perormance decreasing when clicking on ImageLayer and getting color by forEachLayerAtPixel function.
The problem mainly appears in full-screen mode in.
Tested on Chrome.

To Reproduce

1. See my testing video to check how to reproduce issue (look on CPU - procesor usage before and after calling forEachLayerAtPixel function. Chrome on the list of tasks) https://radar-opadow.pl/foreachlayeratpixel-issue.mp4
2. Go to https://codesandbox.io/s/angry-shtern-b8mm1 to check source code
3. Click on fullscreen page mode in codesandbox.io or go to https://b8mm1.csb.app to reproduce issue

This example only contains one ImageLayer, but my original application has many ImageLayers and the problem is more serious.

Thank you, in advance, for your support and reply.
Best regards.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Shekenix]

I found solution for this issue getting advanced research.

Find the following file:

ol/renderer/canvas/Layer.js

In the function CanvasLayerRenderer.prototype.getDataAtPixel you get image data by whole context. This solution decrease performance due to scanning of all pixels. To achieve a better performance, first you should crop canvas to 1px image (drawing new 1px image) and finally get that pixel using getDataImage.

I have checked this solution and received much better performance result.

This is my working example:

 CanvasLayerRenderer.prototype.getDataAtPixel = function (pixel, frameState, hitTolerance) {
        var renderPixel = applyTransform(this.inversePixelTransform, pixel.slice());
        var context = this.context;
        var data;
        try {
            var x = Math.round(renderPixel[0]);
            var y = Math.round(renderPixel[1]);
            var newCanvas = document.createElement("canvas");
            var newContext = newCanvas.getContext('2d');
            newCanvas.width = 1;
            newCanvas.height = 1;
            newContext.clearRect(0, 0, 1, 1);
            newContext.drawImage(context.canvas, x, y, 1, 1, 0, 0, 1, 1);
            data = newContext.getImageData(0, 0, 1, 1).data;
            //data = context.getImageData(Math.round(renderPixel[0]), Math.round(renderPixel[1]), 1, 1).data;
        }
        catch (err) {
            if (err.name === 'SecurityError') {
                // tainted canvas, we assume there is data at the given pixel (although there might not be)
                return new Uint8Array();
            }
            return data;
        }
        if (data[3] === 0) {
            return null;
        }
        return data;
    };

Check this solution and please, improve this function.

Regards.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Shekenix]

Why didn't you improve this feature. It could help many people?