Question

0

83

Views

gpu.js how to find needed pixels in a canvas by rgb?

I'm new to image processing. I found the "gpu.js" package and it seems to be very powerful for any kind of image operations in the browser, but there is not much information on google about it and I don't understand how to use it properly.

What I'm trying to do now: I've drawn a canvas with a black (0,0,0) background. I also overlaid a few pixels of different colors on it. I want to get the coordinates (x, y) of all exact RGB pixels on the canvas but I am stuck on this and I don't even see is it possible.

The code for canvas:

const draw = async () => {
      const canvas = document.createElement('canvas');
      canvas.width  = window.innerWidth;
      canvas.height = window.innerHeight;
      canvas.style.backgroundColor = 'rgb(0,0,0)'
      document.body.appendChild(canvas);

      const ctx = canvas.getContext('2d');
      ctx.fillStyle = "rgb(234,0,255)";
      ctx.fillRect(100,100,1,1);

      ctx.fillStyle = "rgb(0,0,255)";
      ctx.fillRect(600,600,1,1);

      ctx.fillStyle = "rgb(0,255,0)";
      ctx.fillRect(600,450,1,1);

      ctx.fillStyle = "rgb(0,254,253)";
      ctx.fillRect(230,230,1,1);

      ctx.fillStyle = "rgb(140,8,9)";
      ctx.fillRect(230,118,1,1);
    }
    draw();

    const gpu = new GPU({mode: "gpu"});

* {
      margin: 0;
      padding: 0;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>GPU</title>
  <script src="https://cdn.jsdelivr.net/npm/gpu.js@latest/dist/gpu-browser.min.js"></script>
  <style>
    
  </style>
</head>
<body>
 
</body>
</html>

For example I'd like to find coordinates of pixels with colors rgb(234,0,255) and rgb(140,8,9)

What should I do to achieve it?

about 4 years ago · Santiago Trujillo

Answer question

0

83

gpu.js how to find needed pixels in a canvas by rgb?

Find remote jobs

Andres GPT