0

I would like to take image data (RGBA) from react-three-fiber

like this code on HTML

var myCanvas = document.createElement("canvas");
myCanvas.width = texture.image.width; 
myCanvas.height = texture.image.height;
var myCanvasContext = myCanvas.getContext("2d"); // Get canvas 2d context
myCanvasContext.drawImage(texture.image, 0, 0); // Draw the texture
var texels = myCanvasContext.getImageData(0,0, width, height); // Read the texels/pixels back

However, I cannot access Canvas to drawImage or getImageData.

const ref = React.useRef();
    
React.useEffect(() => {
        if (ref) {
       //error
       ref.current.getContext("2d");
        }
      }, []);
    
    <Canvas
      dpr={[1, 1.5]} //pixelRatio
      ref={ref}
    >
    <Particles />
    </Canvas>

and I tried to use useThree. there is no method to get imageData

  const {
    gl,
  } = useThree();

lastly, I tired to get an image using useLoader as a texture

 const map = useLoader(TextureLoader, "/scroll_images/img1.jpg");

so, how can I get the imageData?

hello
  • 21
  • 1
  • 3

1 Answers1

0

In your first example, try useLayoutEffect instead of useEffect. Refs are not actually populated until the first DOM render happened. Unlike useEffect, useLayoutEffect waits until this occurred.

React.useLayoutEffect(() => {
    ref.current.getContext("2d"); // <-- hopefully doesnt error
}, []);

In your second example I think its because you need to pass gl={{ preserveDrawingBuffer: true }} prop to your Canvas. Then you can use gl.domElement.toDataURL('image/png') or similar.

adsy
  • 8,531
  • 2
  • 20
  • 31
  • thank you for your comment! even if I try useLayoutEffect, `THREE.WebGLRenderer: Error creating WebGL context.` , `The above error occurred in the component:` errors occurred. Not only that, after passing `gl={{ preserveDrawingBuffer: true }}`, I could get some data about image but not I want. I want to access the image's pixel data like Uint8ClampedArray (RGBA) – hello Aug 11 '22 at 21:21
  • Hmmm. What about `gl.domElement.getContext("2d")` – adsy Aug 11 '22 at 21:24
  • :( it returns null... – hello Aug 11 '22 at 22:24