Is there any way to get color at specific point on canvas, like we use eye-dropper tool.

[laxman-stan]

I need this to get color of a pixel on a on a group of two rectangle those have different gradients and blend mods.

[wcandillon]

This is an interesting question, you can a access pixel colors via RuntimeShaders: https://shopify.github.io/react-native-skia/docs/image-filters/runtime-shader/

This is a technic we use in the latest Skia tutorial: https://www.youtube.com/watch?v=xNZCQvtnhIU

Would that fit your use-case? Do you have an example from an app that exists in the real world that implements such feature? I would love to take a look

[laxman-stan]

Yes we can use runtimeShader, but how do we access color value of particular pixel on JS side?
I dont know about any existing app that do this, but we are planing to do for our app
Our design something look like this I cant share actual design

(Image has twp overlays of theme gradients)

Its something similar to music player app that show gradient background beneath the cover image
But here we want to user to select any two colors for the background gradient.
we can do this with runtime shader in single canvas but the profile component in placed in separate canvas. Thats why I need values on JS thread.

While there is a hacky way of taking a canvas snapshot, it would be beneficial to explore if there are more optimal solutions available.

[Teeeyyy]

@wcandillon please help with these

[wcandillon]

We can definitely offer something there. Could you send a send a small and clear example/use-case for this? If we provide this feature, we want to make sure we offer the right API for it.

[Glazzes]

I think an ideal API for this feature could be to make part of the canvas ref itself, such as following:

const ref = useCanvasRef();
ref.current?.getColorAt(x, y); // preferably a value in ready to use state, like a hex or rgba format

....
<Canvas ref={ref}>
</Canvas>

Right now the only way I can think of achieving this feature is to screenshot the canvas and save the resulting image to the device storage, then analyse the image with OpenCV.

[Teeeyyy]

Thank you @wcandillon

I am trying to implement a color picker like the image below

I have been able to display the image and move the circular preview around with code below but i want to get the color of the pixel as you move the circular preview.

const image = useImage(require("./assets/images/shoes.jpeg"));
const cx = useValue(100);
const cy = useValue(100);

const touchHandler = useTouchHandler({
onActive: ({ x, y }) => {
    cx.current = x;
    cy.current = y;
    // Get Pixel color
},
onStart: ({ x, y }) => {
    cx.current = x;
    cy.current = y;
    // Get Pixel color
},
});

I really hope react-native-skia would help me implement this feature and I woud forever be grateful for your help.
Thank you

[timoisalive]

I'm actually interested about the same functionality as @Teeeyyy.

I have a color picker image on which user moves the finger around to see an eye-dropper kind of color circle.

So practically something like getColorAt(imageRef, xPos, yPos).

I have it implemented on web as below:

Screen.Recording.2023-05-12.at.11.47.32.mov

[rayronvictor]

You can use the Magnifying Glass example:
#2419

[Glazzes]

Hi @wcandillon, I wonder how is this feature going? I have recently built an equivalent to Telegram's eye dropper feature under the color picker section however I can not get the color to JS side to use it somewhere else, I can get the color I want from the shader and display it at the most outer ring of the circular shape (the whole circle is a shader) but yeah I can not use it at all.

I recently see a readPixels function in the image methods but I don't know if one can convert such pixels into colors.

recording_20240629_200019.mp4

[ajp8164]

Hi @wcandillon, I wonder how is this feature going? I have recently built an equivalent to Telegram's eye dropper feature under the color picker section however I can not get the color to JS side to use it somewhere else, I can get the color I want from the shader and display it at the most outer ring of the circular shape (the whole circle is a shader) but yeah I can not use it at all.

I recently see a readPixels function in the image methods but I don't know if one can convert such pixels into colors.

recording_20240629_200019.mp4

Hi @Glazzes - Can you share your repo with this implementation?

There appears to be a few libraries that can return the pixel color in an image at an x,y coordinate. Have you tried any of those?

[Glazzes]

Currently such code only exists on my machine, but I will upload it soon, nonetheless I have just figured out how to get the color using only skia and get it to the JS side.

Hi there, I've recently built an eyedropper using Skia and maybe you will find this as useful as I did, first you will need to take a snapshot of your canvas, once you get the image you may want to use readPixels method like this

const pixels = image.readPixels(x, y, {
    colorType: ColorType.RGBA_F32,
    alphaType: AlphaType.Premul,
    height: 1,
    width: 1,
});

console.log(pixels[0] * 255, pixels[1] * 255, pixels[2] * 255);

Where x and y is the position relative to the top left corner of the image based on the image dimensions, not the ones rendered in the screen but the ones of the image object, use image.width() and image.height() methods.

[ajp8164]

Ah - this is what had been thinking about as well. I was looking at view shot to take a full screen shot.

[Glazzes]

I need this to get color of a pixel on a on a group of two rectangle those have different gradients and blend mods.

Hi there, I've recently built an eyedropper using Skia and maybe you will find this as useful as I did, first you will need to take a snapshot of your canvas, once you get the image you may want to use readPixels method like this

const pixels = image.readPixels(x, y, {
    colorType: ColorType.RGBA_F32,
    alphaType: AlphaType.Premul,
    height: 1,
    width: 1,
});

console.log(pixels[0] * 255, pixels[1] * 255, pixels[2] * 255);

Where x and y is the position relative to the top left corner of the image based on the image dimensions, not the ones rendered in the screen but the ones of the image object, use image.width() and image.height() methods.

[Glazzes]

@ajp8164 You can find my implementation here https://github.com/Glazzes/reanimated3-animations/tree/main/Telegram%20Color%20Picker/src/eyedropper