itk.js读取dicom文件，vtk.js进行渲染

最新推荐文章于 2024-02-20 16:38:47 发布

原创

最新推荐文章于 2024-02-20 16:38:47 发布 · 2.7k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css3

该博客介绍了如何利用itk.js和vtk.js库读取DICOM文件并进行体渲染。首先，通过axios获取DICOM文件的blob数据，然后将数据转换为File对象。接着，使用readImageDICOMFileSeries读取系列文件，并通过vtkITKHelper将ITK图像转换为VTK图像。最后，在全屏渲染窗口中设置渲染器、体积渲染器和体渲染映射，调整样本距离并渲染图像。

itk.js读取dicom文件时，我们只需要用到

readImageDICOMFileSeries即可

其余的均为vtk.js中调用

let files_paths = [];
//path为dicom文件
files_paths.push(path);
const fetchFiles = files_paths.map((file_path, index) => {
    const path = file_path;
    return axios.get(path, { responseType: 'blob' }).then((response) => {
        const jsFile = new File([response.data], `${index}.dcm`);
        return jsFile;
    });
});

Promise.all(fetchFiles).then((path) => {
    readImageDICOMFileSeries(path).then(({ webWorker, image }) => {
        imageData = vtkITKHelper.convertItkToVtkImage(image);
        //下面的操作放在promise.all中，否者会报错
        const view3d = document.getElementById('view3d');
        const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
            container:view3d,
            background: [0, 0, 0],
        });
        const renderer = fullScreenRenderer.getRenderer();
        const renderWindow = fullScreenRenderer.getRenderWindow();

        c