How to get the color of bitmap pixel?

[romanIlyushin-bc]

getPickingInfo() is returning the color of layer. How can I get the color of pixel on BitmapLayer?

[kylebarron]

I don't believe it's currently possible to do this. The picking engine is focused on picking vector objects, so an entire bitmap is treated as a single object. I think you'd have to customize the picking shaders to pick within the bitmap.

[sraimund]

As a workaround, you can render the bitmap into a separate canvas:

const canvas = document.createElement("canvas");
const canvasContext = canvas.getContext("2d");

const layer = new BitmapLayer({
    id: "BitmapLayer",
    bounds: [-122.519, 37.7045, -122.355, 37.829],
    opacity: 0.5, //the retrieved color stays the same for varying opacities
    image: "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-districts.png",
    pickable: true,
    onClick: ({bitmap, layer}) => {
        if (bitmap) {
            const x = bitmap.pixel[0];
            const y = bitmap.pixel[1];

            canvas.width = bitmap.size.width;
            canvas.height = bitmap.size.height;
            canvasContext.drawImage(layer.props.image.props.data, 0, 0);

            const pixelColor = canvasContext.getImageData(x, y, 1, 1).data;
            console.log('Color at picked pixel:', pixelColor);
        }
    },
});

It does not seem to be possible currently to get the pixel value directly from the ImageBitmap (see stackoverflow).

[lawrencenika]

is there still no method of getting a pixel value from bitmaplayer?

[kylebarron]

https://deck.gl/docs/api-reference/layers/bitmap-layer#pixel-picking

[lawrencenika]

thanks, but 2 questions:

1. I see that readPixelsToArrayWebGL is marked as deprecated here. Is it recommended in that case?
2. See screenshot, as I tried this piece of code in getToolTip() of DeckGL instead of OnClick() of BitmapLayer it failed, what is the diff?
   

[kylebarron]

I don't know, I haven't used it myself.

[ibgreen]

• readPixelsToArrayWebGL is marked deprecated because it won't work in WebGPU. It will become an issue in deck.gl 9.2 but you are best off ignoring that for now.
• What is the type of pickinginfo.layer.props.mage? Is it a Texture? if not that could be where the undefined reference is coming from...

[mohadib]

• readPixelsToArrayWebGL is marked deprecated because it won't work in WebGPU. It will become an issue in deck.gl 9.2 but you are best off ignoring that for now.

Do you have any information on what will replace readPixelsToArrayWebGL? Thanks.