React-vtk-js capture image of viewer

Alex · March 21, 2024, 2:57am

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.

Thanks,
Alex

PaulHax · March 21, 2024, 4:25pm

Hello!

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?

github.com

Kitware/vtk-js/blob/master/Sources/Rendering/Core/RenderWindow/index.js#L138


      
                  }
                });
              });
              results.str = Object.keys(results)
                .map((keyName) => `${keyName}: ${results[keyName]}`)
                .join('\n');
          
              return results;
            };
          
            publicAPI.captureImages = (format = 'image/png', opts = {}) => {
              macro.setImmediate(publicAPI.render);
              return model._views
                .map((view) =>
                  view.captureNextImage ? view.captureNextImage(format, opts) : undefined
                )
                .filter((i) => !!i);
            };
          }
          
          // ----------------------------------------------------------------------------

ViewProxy has a usage example:

github.com

Kitware/vtk-js/blob/master/Sources/Proxy/Core/ViewProxy/index.js#L302-L316


      
          publicAPI.captureImage = ({ format = 'image/png', ...opts } = {}) =>
            model.renderWindow.captureImages(format, opts)[0];
          
          // --------------------------------------------------------------------------
          
          publicAPI.openCaptureImage = (target = '_blank') => {
            const image = new Image();
            return publicAPI.captureImage().then((imageURL) => {
              image.src = imageURL;
              const w = window.open('', target);
              w.document.write(image.outerHTML);
              w.document.title = 'vtk.js Image Capture';
              window.focus();
            });
          };

Alex · March 23, 2024, 1:14am

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!

Alex · April 1, 2024, 4:23pm

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}>
   {/* ... */}
</View>

PaulHax · April 1, 2024, 4:53pm

Thank you for posting back a solution =)