read the .vti file

Web
1

I used this demo to import the downloaded headsq.vti file into Times 404 again via reader.seturl.
my code:

reader.setUrl(`http://172.22.150.37:8000/img/headsq.vti`, { loadData: true }).then(() => {
            const fileContents = writer.write(reader.getOutputData());
        
            // Try to read it back.
            const textEncoder = new TextEncoder();
            writerReader.parseAsArrayBuffer(textEncoder.encode(fileContents));
            renderer.resetCamera();
            renderWindow.render();
        
            const blob = new Blob([fileContents], { type: 'text/plain' });
            const a = window.document.createElement('a');
            a.href = window.URL.createObjectURL(blob, { type: 'text/plain' });
            a.download = 'headsq.vti';
            a.text = 'Download';
            a.style.position = 'absolute';
            a.style.left = '50%';
            a.style.bottom = '10px';
            document.body.appendChild(a);
            a.style.background = 'white';
            a.style.padding = '5px';
 });

image path:

image
image1248×410 41.7 KB

got error:
image
image1176×140 44.9 KB

How can I directly use the downloaded VTI file ?

2

The reader you are using (vtkHttpDataSetReader) relies on a “deconstructed” dataset format, where metadata and data are separated. What you’ve downloaded is a single vti file. What you need is to download the file with fetch or something similar.

const response = await fetch(http://172.22.150.37:8000/img/headsq.vti`)
const arraybuffer = response.arraybuffer()
const reader = vtkXMLImageDataReader.newInstance()
reader.parseAsArrayBuffer(arraybuffer)
4

Thank you very much, it has shown properly. But it is much larger than the original preservation, and the location is not right, please restore the original location

image
image1380×652 43.8 KB

5

The following code works for me

    const __BASE_PATH__ = "https://kitware.github.io/vtk-js";
    const reader = vtkHttpDataSetReader.newInstance({ fetchGzip: true });
    reader
      .setUrl(`${__BASE_PATH__}/data/volume/LIDC2.vti`, { loadData: true })
      .then(() => {
        const data = reader.getOutputData();