React-vtk-js capture image of viewer

Hi There,

Is it possible to capture an image of the viewer when using react-vtk-js? I’ve tried typical methods to capture an image of a dom node, but it just shows as a blank viewer with the background image.



Is your image capture method fishing out the canvas’ webgl context and calling readPixels on it?

How about calling call vtkRenderWindow.captureImages, and paste the image in the right place within your whole DOM image?

ViewProxy has a usage example:

I haven’t tried that. I was just trying to capture the containing div with dom-to-image. I will see about this method. Thanks!

I was able to solve this problem by doing the following:

const viewerRef = React.useRef(null);

// Call this function to capture image
async function captureImage() {
    // Get the render window from the viewer ref
    const renderWindow = viewerRef.current?.getRenderWindow().get();
    // Capture in image (encoded base64 string in png format).  
    const imageUri = await renderWindow.captureImages()[0];
    // From there, I pass the imageUri to a Python API for decoding / saving
    // but this can be accomplished with TS/JS as well

return <View ref={viewerRef}>
   {/* ... */}
1 Like

Thank you for posting back a solution =)

1 Like