在 React-Native（Expo 托管）中給定 base64 字符串，如何在圖像/位圖的特定坐標處獲取像素的顏色？

Question

我正在使用 React Native 創建一個 Expo 項目，並希望在 x 和 y 坐標處找到像素的顏色。 該圖像將是從以 base64 表示的Expo 相機模塊拍攝的照片。

<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
             
        */ -----------------------------------------------
            
    });
}
}}>

有沒有一種簡單的方法來做評論中所示的事情？

注意：我已經嘗試過使用 3rd 方庫，例如

• 反應原生像素顏色
• React Native 獲取像素
• React Native 獲取像素顏色

，但它們在 react native 中使用本機模塊，並且不適用於 Expo 管理的項目。

編輯

我現在使用 expo-gl 中的 GLView 並使用 Expo-2d-context 作為“畫布”類型的方法：

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

現在我唯一的問題是使用 drawImage 將圖像繪制到Expo2dCanvas 。 我不知道要為第一個參數（即資產）傳遞什么。

Answer 1

我讓它與這個庫get-pixels 一起工作。 從我所看到的它適用於 JPEG 和 PNG 圖像，並且它不使用本機模塊。 希望對你有效。

這是代碼：

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

這不是 React Native 特定的解決方案，但它應該適用於您擁有 JS 和 DOM 的任何地方。

1. 創建一個<img>元素並將其src設置為 dataURI
2. 創建一個<canvas>元素，並獲取其context
3. 將<img>繪制到<canvas>
4. 從<canvas>讀取像素數據

 const dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAACgCAMAAADUx0IOAAAAAXNSR0IArs4c6QAAAMBQTFRFV6SQpFp2a1yflZpfe3t7VFRU+fn5bW1t4ODguLi3dnZ2X19fWVtZ////zc3N09NSwMDAkbuur7V2wMAAqKiopax2oKGhpLQuvJGjnp2cnqZYmJiYa6qhlJSUhJWekJCQWKaOi4uLioeEAMC/BL6og4OCWo6mrWmFgXaxgICApXFZE7oTg4MApll5AMAAbF6sl0aXZ2dnZ1moZGRkvwC/TU1NQkJCvAMUvgACMzMzKxChJycnGRkZAAG+CgoLAAAAIO1e8gAAAA10Uk5T9/f5/Pz8/f3+/v7+/sgwt+kAAAxFSURBVHja7Z0Le6M2FobTMXdfqiYaXMJQCrvajrZ7Y7ywS6Dw///VKkLhaA0U24BFpvNCbHEeYp3z5ZMAJc/Mw56Da+Cwb0E1gCFs1UC0B2rAhKhRQljfAzmE8z2gQ7gwIKzVwB4Ia8CC8EA9h249D51vqN6VAMG4AGhEgGUc4MwhQPnNAdc4oLrNAQnHPAEIsCG6tRFwAlyIHkwIewjQIBwigECYICCAsIYAD8LJAcJYCncT56D+xM2E81BzMtpCMLRdaGpS2KO9p4QhtDE0iS+fDQx84HX9uDf3k9WcCQJMTUxlP+MCdDP45oBvDvjmgNkFICQmhFDqfX0O+N3EYg+jg2Uw9gyDYR0Q9uI/ggNiF1nGfgDDQi75ih1APGTsR7GQR75GBxD3ANWPYBxccm8HRC0hhrbUjG053Nv2/N5w6EZRgIz9VRgoiCK3vx9/uB8IAwOJvwlgcKwAsKGJw7YZ/vCpFzdocd3eD/Hxa/VWVV8EPNgYNpaz6u8HfwI+PgID9UAztAzOgxh4o0OA/vBzy8NfgJ/GrElsA54grxHgVQIyOgSkVDbPLR/Hh4C151wsgHadAFgu/0YBQIJhAX5YVgAPotpNDsCs/AkCMAw8owO8OzvAY51MEEBg+b8nwIodEB/2+ykCAIf4PTqAuX+iAIDhXjIHPK/JARh+/BMEAA74fTnAN/azCAAYgZI54EYB7D0wTQDAsN+NA8hhP6MAwIEsMQdgju1iF4sdQZOF8dvRkABwho05nmcLxD2gxV91Xd9dvlvyjx7xzbY9D2PeD2SI+x3w6MI5UI9UZpvtA1ObKZ5plL7tLjQ9rW06QwK0Z2hRRDWNmuXZL2Wwv58EqltKR/QDyQ4MAY22qWO5nratdR6HJw8Bwq3pVPXMAhxqWYHZJsG5BeCJQf3zOgConJE5YIoA0+8DoP6ZHQBU2pSrwNIOgPrndgBQaoMCKHdABPXP7gCgjNbqgKio6+UcABTROucAAvUv4gAgJ2t0AGGfuKwDgPT+c8C4AKe6XtoBgLmgA+htDnDqenEHAFWfAM83CWBzEAaQ3AQkAT79BNi4IQoairrBYe0QHQ67rCgyBmty0qzhIMj6j1NxiLIsrxll0PCmcyb6tX8CHkGAx/F6kM256XH4E+2YJA1RQ143+KjhTRCMGipxbKMGcVihBlscl6gBi+MCNXjiOLehe9Ls5HGpx+FxAYhZ31sAhM8zJI+L/l6AcgEEHQHKpQUoOwKgaDYBpg+BtL6/A5DdEUDZEHBqEKC4mwDIu6cDyO8IQHKWUcSSv6sDGESJA7pzQFIz7jEH2GcC4HU4gJQ1I7peAHuqAxBZxRxwquuZ5gD7WgHwGq4C3AAKrgKceLoDLMsy2Ffgt9jQxBAOZAF8CGOz4kQ2A9korxp8xA9RIY6xzUFlVfPNbkCVAIm1b3FYIpvjitMLcexXDbnNwbaUuCyAlPhAPVbDQ8UFzUgcE7FhqUnidpMFiCGOn844/qmXP/+jn3/385//9vLy2xlShpEsAISH6slqLu01j8MABR7VCvBZHgILLIiMXwWOagV4kQVY/vcCXQHiJyUCAMsKMH4fcFQtwMuyQ2B0DnhSJAAQK3XARr0AHxQ4AAQ4qhfgRakDnpQJABCFc8BmDQI4MzuAXv4soD2vQYAv0xxgciLPbbGlJoQ9WQBX8DRFgJ93v+5+Tf7FuUEAwBXIy+JSPai/nsjkwNPgDQ6gkwRI+UNOUTPSSQKoWxHaTBSAMYcAH5StCD2vQ4AvylaEjusQ4EWZA57WIcBv5O5zwMoEUOWAzVoE+HAPB6xZgC+KHPC8FgFeFM0Bx7UIMIsDSAuGpgthKjuAcFYjwAt5JZYFGK2nFaDg7Nz+e2cX6DwL4Lxk6GVLlkN7B80ig3ZaApIAWQmcoCnC0ndWJSPPz8JZk4/8LDBez7bgTFgQISX/zpoDxTCqJlw1e1WwN0Fat1QgQHO2+NLrlrwGuv1AuCTLrQoDHQHifgG6lUJ4WADgFgHiJVeEhh1QjSQmKNcjwLwrQnG1FgdUkZI1wTgvGNuiJc2gLYXzFNonKZzA92wLwISmXvR+YJaehfPoHg748buWXyYIACRQzFYO3yzA5y8tnxeYA378e8sv40MgUzAEZAHmd0BXALKaOaCM1TigXNlVYFkH0K4D1nMfQCY4QMwlXotrQ9v2AFkAl1PwbEQ5eVEVeV6yAHupiqRsQmVZlFn5+s4PdkXFtqLnVriAm+iCbfw440Fxdtm04VYYNMo9no8sgAeg/nrEfHz5snjHATSvgfzglbVjmXVFrVNdeoeUhYLS09Ow9HeZl7J3b5fFWuEWVNsm5nYnCZBuE83Ut6bupM5pp6Vkq2v6Ntlqu1OS0p2ZJLpp6tpWd3Y7Td+ZLLxLpc7p9UNAu/pxuCtApkwA/ZTokgAZvWEIzCDA7hoB9AUF0BcTwINojwDJWhxwungIzOsAZy0OcBQ5IFqLAyJFDojLdTigjBU5gGbrcEBGFTmA6utwgE6XdcCwAM46HODM6wB6uQPiVTigIpMc4HDC8WVkWQBXkE9xgGYyNMc0E4dOESB3G7AswHg9ocOBp8EbHEB3ExzA6j0lJzMxna1jniYIoFOGivUAhnObA0CAZAYBKEPBegCHVBMcMJMAJVHoAJqqd0C6qAPGBHDUO8Chd3EA6ReAlKodUMZKHUB11Q5IqRIHAKodQKlaB9BcrQNyylB4FaCEqHVANJcDIgBLzbhtxrIA8tnFmQDkTICg9LeZp587YNcVYNcIoHMBnFcBXl9SrREg0R0QYHtqBChwBMgCjNcz+I+r+zY0cQDIAgSAndScqnlhW95LlpwSDn8H/H7QoRfjDGRLicsCBMBAPT3/uDrhXwS3TepCeGgO8EhZywwLwEsXX3zjDb+fQz/GngEYsTs0BKCI3nqmL4jAKafLBOAFi/phT3zPZzvAD7yuA1CfAAgyXPz3AnRQAFJeJACvV2gA+0lU3W5CAqgaySoYexmDLC2Ad4kDqHmZAFC8vPsdA3TnADQwBGwoScGaIJxC8tuHwElYXryId++iOcCADJWsCsNnOhc7oOsCnwMagANQZxY4E8ClK3EAJemFDmBfHQdA1d51DrDoahxASXmNA8AGDF8AIsAcAOMfdQUwIroaB1DqXO4AgZDhJAzgnQ2DcQfYlLGOq8Ar6cUOENsbPiBPhGhYAMh4FgfYDaPLyJ4sgAeIU7CeZWmzm0BWtORpP6bpNDvbGOLIDIMg5FsQYuvwuvHdaMEiQw+4blkc2Zy3hyGt1yee1uuA7/4KxLTB3fdg1tdR9QX1fQ/eW4ZSKh8kAaR6cH89E9YDegWgqF+A6ez2XWzaJ8CS6wHjAlBrLgHGHWDR2wTwKDCXA6QFUuteDrAIvbsDyLgDiG/cxwFGQFfkgI+0JcTGPRxguCFdpQNoGHp3cIDhhyAAWdMcQFli7uIOMFwartcBrAtjIQdA/ayftc4B4WsfxpIOMHxKF3HA9DvBNrHAWM4BBu8h4q9z3Qm6+HVjuGLDqG26tgvtAQF+hDPEh+DH7984/m0Gju3HPYoebCmrAQGkxPvqgfbYH0ld4QASBM07OT4twpES+srgVWCJVeErh4Bg87QAG6mflpkFmH4VEJCn2SGUMeKAqStC0+8DWvDMw+DIUnlPDqDuvMNgQwcEUOyA7n2A3OtsJjhSSt+fAxibeSSImw98Z3PAHJcDmPzVO4Be7wCQYHr5VP0cQK+fAwTPE8tf2AEGxwpH//v9VwF+aXZZgABwXTjbDttmgD9+/3QDx49YygrL/UhhWYB/tnyWEu+tB/5CpOZkIYB7m5H9/391E4pdOsXzzr8zChmBG0bx1TZ4jtvuOUP9RDwX/urKGYYtdn89Vz8ODwwld3QIEJ9ee0k4bs77Ie7IXEN4PxAeHQJ3FUBAno8XFP9MrugHwosI4HU+Z3JiGxChr/jNTP0MJK7WAXD2hslwfDpC4UdW+qbt5+t1ABlP7I/hgP7E/gAOoN8c8M0B63dAJ7FZfzKr6acVIOGYp6QFATaETzYCpDCG6MFMWjwEaBAOEBBDmCAggLCGADcBDhDG44mj/sRFsuJpENfAof8/fMUQtmog2gM1YELUKPt/zZVDON8DOoQLA8JaDeyBEKKVBeGBeg7deroCVO9KgKAGBgRAIwIs4wBnDgHKSxwAvDMHGOtwwP8AkTna5VkEuwcAAAAASUVORK5CYII='; (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) })();