在 React-Native（Expo 托管）中给定 base64 字符串，如何在图像/位图的特定坐标处获取像素的颜色？

Question

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

• React Native Pixel Color
• React Native Get Pixel
• React Native Get Pixel Color

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

Answer 1

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

Answer 2

This isn't a React Native specific solution, but it should work anywhere you have JS and a DOM.

1. Create an <img> element and set its src to the dataURI
2. Create a <canvas> element, and get its context
3. Draw the <img> onto the <canvas>
4. Read the pixel data from <canvas>

 const dataURI = 'data:image/png;base64,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'; (async () => { async function pixelValue(dataURI, x, y) { const p = new Promise((resolve, reject) => { // Create an `<img>` to load the dataURI in const img = document.createElement('img'); img.onload = () => { // Get `natural` size of image const width = img.naturalWidth; const height = img.naturalHeight; // Create `<canvas>` and set it to the same dimensions as the image const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; // Get the `<canvas>` `context` const ctx = canvas.getContext('2d'); // Draw the `<img>` onto the canvas ctx.drawImage(img, 0, 0, width, height); // Get the pixel data at `x` and `y` const imageData = ctx.getImageData(x, y, 1, 1); // Resolve the promise with the `imageData.data` array with pixel data represented as `[r,g,b,a]` resolve(imageData.data); } // Reject the promise if the image fails to load img.onerror = reject; // Invokes loading of the image img.src = dataURI; // NOT NEEDED document.body.appendChild(img); // Append to body }); return p; } const pixel = await pixelValue(dataURI, 130, 140); console.log(pixel); // Uint8ClampedArray(4) [192, 192, 0, 255] (rgba) })();