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...