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)?

user_15815468 0
Viewed 1104

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={{flex: 1}} 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.

Edit

I'm now using a GLView from expo-gl and using Expo-2d-context for a "canvas" type approach:

<GLView style={{flex: 1}} onContextCreate={(gl) => {
    var x = 50;
    var y = 50;
    var ctx = new Expo2DContext(gl);
    // how to define imag as an image that can be passed into drawImage?
    ctx.drawImage(imag, 0, 0, imag.props.width, imag.props.height);
    const imageData = ctx.getImageData(x, y, 1, 1);
    console.log(imageData);
}}/>

Now my only problem is drawing an image to Expo2dCanvas using drawImage. I don't know what to pass for the first argument (which is the asset).

expo react-native reactjs image-manipulation javascript
1 Answers

I got it working with this library get-pixels. from what I saw it works with both JPEG and PNG images and it does not use native modules. Hope it works for you.

here is the code:

const getPixels = require("get-pixels");
const util = require("util");
const string =
  "data:image/png;base64, --- data ---";

const base64toBuffer = Buffer.from(string.substring(22), "base64");

async function getPixelAt(x, y, buffer, format) {
  const getPixelsPromisse = util.promisify(getPixels);

  pixels = await getPixelsPromisse(buffer, `image/${format}`);
  const pixelAt = [];

  for (let i = 0; i <= 3; i++) {
    pixelAt.push(pixels.get(x, y, i));
  }

  return pixelAt;
}

getPixelAt(0, 0, base64toBuffer, "png").then((pixel) => console.log(pixel));
user_143621820
Related