VTK.js显示层析数据

VTK.js 是一个用于在现代网页浏览器中进行3D可视化的强大JavaScript库。它由Kitware开发,灵感来源于流行的VTK(Visualization Toolkit)项目,但专为Web环境设计。VTK.js允许用户创建、操作和显示3D模型、数据集和交互式可视化内容。它利用WebGL进行高性能渲染,支持多种数据格式,并提供丰富的交互功能,适用于科学可视化、医学图像处理、GIS、工业设计和游戏开发等多个领域。通过VTK.js,开发者可以在网页上轻松实现复杂的数据可视化,将专业级的可视化工具带到浏览器中。

Examples

先用python代码将一组bmp转为3D numpy并降采样,再保存为.vti格式文件

python 复制代码
import os
import vtk
from vtk.util.numpy_support import numpy_to_vtk
import numpy as np
from PIL import Image
from scipy.ndimage import zoom

def read_bmp_stack(folder_path, downsample_factor=10):
    """读取文件夹中的 BMP 图片,并转换为 3D numpy 数组,同时进行降采样"""
    file_list = sorted([f for f in os.listdir(folder_path) if f.endswith('.bmp')])
    if not file_list:
        raise ValueError("No BMP files found in the folder")
    
    sample_image = Image.open(os.path.join(folder_path, file_list[0]))
    width, height = sample_image.size
    depth = len(file_list)
    
    volume_data = np.zeros((depth, height, width), dtype=np.uint8)
    
    for i, file_name in enumerate(file_list):
        img = Image.open(os.path.join(folder_path, file_name)).convert('L')
        volume_data[i, :, :] = np.array(img)
    
    # 进行降采样
    downsampled_data = zoom(volume_data, (1/downsample_factor, 1/downsample_factor, 1/downsample_factor), order=1)
    
    return downsampled_data

def save_vti(volume_data, output_file):
    """将 3D numpy 数据保存为 .vti 文件,并确保 <DataArray> 直接包含数据"""
    depth, height, width = volume_data.shape
    
    image_data = vtk.vtkImageData()
    image_data.SetDimensions(width, height, depth)
    image_data.SetSpacing(1.0, 1.0, 1.0)  # 更新间距以匹配降采样比例
    
    flat_data = volume_data.flatten(order='C')  # C-order 保证正确的数据存储顺序
    vtk_array = numpy_to_vtk(flat_data, deep=True, array_type=vtk.VTK_UNSIGNED_CHAR)
    
    image_data.GetPointData().SetScalars(vtk_array)
    # image_data.GetCellData().SetScalars(vtk_array)

    
    writer = vtk.vtkXMLImageDataWriter()
    writer.SetFileName(output_file)
    writer.SetInputData(image_data)
    writer.SetDataModeToBinary()  # 确保 <DataArray> 直接包含数据
    writer.SetCompressorTypeToZLib()  # 启用压缩
    writer.Write()
    print(f"VTI file saved: {output_file}")

if __name__ == "__main__":
    folder_path = "../../adata/3dbmps"  # 替换为你的BMP文件夹路径
    output_vti_file = "3dbmp4s.vti"  # 输出的 VTI 文件名
    
    volume_data = read_bmp_stack(folder_path, downsample_factor=4)
    save_vti(volume_data, output_vti_file)

不同降采样程度可获得不同大小的vti文件

使用VTK.js库显示vti文件内容

支持先将DICOM文件集转成VTK.JS或VTI格式,再显示出来

DICOM into VTK.JS or VTI files

GitHub - KitwareMedical/dicom-exporter: DICOM file converter in Python

bash 复制代码
cd dicomexporter 
dicom-exporter E:/Working/adata/CircleofWillis E:/Working/adata/dicomtovti.vti
// or
dicom-exporter E:/Working/adata/CircleofWillis E:/Working/adata/dicomtovti.vtkjs
相关推荐
2501_920931701 小时前
React Native鸿蒙跨平台实现推箱子游戏,完成玩家移动与箱子推动,当所有箱子都被推到目标位置时,玩家获胜
javascript·react native·react.js·游戏·ecmascript·harmonyos
layman05282 小时前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔2 小时前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html
AI老李2 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·postcss
_OP_CHEN2 小时前
【前端开发之CSS】(一)初识 CSS:网页化妆术的终极指南,新手也能轻松拿捏页面美化!
前端·css·html·网页开发·样式表·界面美化
啊哈一半醒2 小时前
CSS 主流布局
前端·css·css布局·标准流 浮动 定位·flex grid 响应式布局
PHP武器库2 小时前
ULUI:不止于按钮和菜单,一个专注于“业务组件”的纯 CSS 框架
前端·css
方也_arkling2 小时前
Element Plus主题色定制
javascript·sass
电商API_180079052472 小时前
第三方淘宝商品详情 API 全维度调用指南:从技术对接到生产落地
java·大数据·前端·数据库·人工智能·网络爬虫
晓晓莺歌2 小时前
vue3某一个路由切换,导致所有路由页面均变成空白页
前端·vue.js