How do I render image from an array containing the rgb format for each pixel of 256x256 size of image. The array is a continuous series of data in 1D form obtained after operations on ndarray.

Web vtk.js
1

Here’s the snippet of a code I tried to perform.

function selectGrid(imageContainer, gridData, width = 256, height = 256) {
  const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
    rootContainer: imageContainer,
    containerStyle: {
      width: `${width}px`,
      height: `${height}px`,
      position: "relative",
      // overflow: 'hidden',
    },
  });
  //   const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
  const renderer = fullScreenRenderer.getRenderer();
  renderWindow = fullScreenRenderer.getRenderWindow();

  // painter filer
  const painter = vtkPaintFilter.newInstance();

  // convert 2D array to vtkImageData
  imageData = vtkImageData.newInstance();
  imageData.setDimensions(width, height, 1);
  const dataArray = vtkDataArray.newInstance({
    values: gridData,
    numberOfCompnents: 3,
  });

  imageData.getPointData().setScalars(dataArray);

  
  // // Adding the selection manipulator to the images
  const iStyle = vtkInteractorStyleManipulator.newInstance();
  renderWindow.getInteractor().setInteractorStyle(iStyle);

  // Widget manager
  const widgetManager = vtkWidgetManager.newInstance();
  widgetManager.setRenderer(renderer);

  const widget = vtkSplineWidget.newInstance();

  const splineHandle = widgetManager.addWidget(widget, ViewTypes.SLICE);

  // renderer.resetCamera();

  // mapper
  const mapper = vtkImageMapper.newInstance();
  mapper.setInputData(imageData);
  mapper.setSliceAtFocalPoint(false);

  // actor
  const actor = vtkImageSlice.newInstance();
  actor.setMapper(mapper);
  renderer.addActor(actor);
  renderWindow.render();