Sunday, 25 July 2021

How can I get a pixel's color at a specific coordinate of an Image/Bitmap given a base64 string in React-Native (Expo managed)?

I'm creating an Expo project using React Native and want to find the color of a pixel at x and y coordinates. The image will be the picture taken from the Expo camera module represented in base64.

<Camera ref={cR} style= type={type} onCameraReady={() => {
if (cR){ 
    cR.current.takePictureAsync({base64: true}).then((data) => {
        const source = `data:image/jpeg;base64,${data}`;
        //Is there a way to achieve something like below (note that Image is just a made-up function)?
        /* -----------------------------------------------
            var img = Image(source);
            console.log(img.getPixel(x, y)); // Should output an rgb object/array or hex code
             
        */ -----------------------------------------------
            
    });
}
}}>

Is there a simple way to do something as shown in the comment?

Note: I have already tried using 3rd party libraries, such as

, but they use native modules in react native, and don't work with an Expo managed project.



from How can I get a pixel's color at a specific coordinate of an Image/Bitmap given a base64 string in React-Native (Expo managed)?

No comments:

Post a Comment