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

原创

已于 2023-05-24 14:38:30 修改 · 3.8k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2022-05-11 11:43:48 首次发布

该博客介绍如何使用vtk.js库和ITK模块来读取并渲染nii.gz格式的医学图像数据。首先，通过vtkHttpDataAccessHelper获取数据并转换为ArrayBuffer，然后利用vtkITKImageReader的parseAsArrayBuffer方法解析数据。接着，设置颜色转移函数和分段函数以定制图像的色彩表现，并使用vtkVolumeMapper和vtkVolume进行体积渲染。最后，在全屏渲染窗口中展示图像。

我们只需要用到itk中的

readImageArrayBuffer

从这个api我们可以看出，我们需要的是一个ArrayBuffer的数据，那么，我们通过

vtk.js中的vtkHttpDataAccessHelper的方法把数据转换成ArrayBuffer后进行处理，即下面的

import vtkHttpDataAccessHelper from "vtk.js/Sources/IO/Core/DataAccessHelper/HttpDataAccessHelper";

const { fetchBinary } = vtkHttpDataAccessHelper;

fetchBinary(res).then((binary) => {})

主要代码为如下设置

vtkITKImageReader.setReadImageArrayBufferFromITK(readImageArrayBuffer);

const niftiReader = vtkITKImageReader.newInstance();

const mapperNifti = vtkImageMapper.newInstance();

const actorNifti = vtkImageSlice.newInstance();

niftiReader.setFileName("image.nii");

niftiReader.parseAsArrayBuffer(res).then(() => {

const source = niftiReader.getOutputData();

console.log(niftiReader.getFileName());

最低0.47元/天解锁文章

38 条评论

2201_75635610 2025.02.22
博主您好，我在setfilename那里设置的名称和文件名称也一致，但是在滑动屏幕的时候打印区报错为no input，请问这是怎么回事呀？
- 2201_75635610回复江苏、朱一龙 2025.05.03
  显示不了，我后来把nii文件转成ply渲染的显示的
- 2201_75635610回复江苏、朱一龙 2025.05.03
  显示不了，我后来转成ply显示的
- 江苏、朱一龙回复2201_75635610 2025.04.07
  你那可以显示吗？

冰镇屎壳郎 2024.01.17
/itk/WebWorkers/ImageIO.worker.js 404 (Not Found) 由ImageIO.worker.js第一行发出的报错，是什么原因呢大佬？
- 小江江12回复冰镇屎壳郎 2024.01.29
  嗯，我的是配置了的 config.plugin('clean') .use(CopyPlugin,[{ patterns:[ { from: path.join(__dirname, 'node_modules', 'itk', 'WebWorkers'), to: path.join(__dirname, 'dist', 'itk', 'WebWorkers'), }, { from: path.join(__dirname, 'node_modules', 'itk', 'ImageIOs'), to: path.join(__dirname, 'dist', 'itk', 'ImageIOs'), }, { from: path.join(__dirname, 'node_modules', 'itk', 'MeshIOs'), to: path.join(__dirname, 'dist', 'itk', 'MeshIOs'), }, ] }]);
- 冰镇屎壳郎回复小江江12 2024.01.25
  您这个代码的话，需要在vite.config.js里面额外设置什么吗？
- 冰镇屎壳郎回复小江江12 2024.01.25
  下载了的，这个文件也存在，这个404是由被查找的文件自己报的，相当于说自己找不到自己。他就在node_modules/itk/WebWorkers/ImageIO.worker.js，但是报错是按照"我的本地ip"/itk/WebWorkers/ImageIO.worker.js查找的
- 小江江12回复冰镇屎壳郎 2024.01.19
  404就是找不到文件，看下你下载itk没，如果下载了，查询node_modules对应文件进行寻找

xxxggany 2023.06.22
你好博主，我把评论区官网的例子复制下来什么也没改，就是用Setup语法，运行后渲染窗口什么也没显示，一片空白。代码都放在onMounted（）函数里面，控制台也没报错。试了一下图像链接是能正确访问的，也能正确转换。 onMounted(() => { const container =document.getElementById('container') const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({ container: container, background: [0, 0, 0], }); 。。。。。。。。。。。。。。。
- 小江江12回复xxxggany 2023.06.25
  官方用的是vtkResourceLoader .loadScript( 'https://cdn.jsdelivr.net/npm/itk-wasm@1.0.0-b.8/dist/umd/itk-wasm.js' ) .then(update); 是通过sript加载的，你可以下载it-wasm的代码后，在index.html通过script标签方式进行加载试试。开始试可以直接用地址cdn的地址试；或者以官方的方式进行加载试看下是否会显示进行排查问题。
- xxxggany回复小江江12 2023.06.25
  我vue.config.js没有配置，是直接使用import *as itk from 'itk-wasm'。我查看了一下页面元素，虽然是一片空白，但是canvas标签已经挂载上去了，会不会是itk版本问题？我用的： "itk": "14.0.0", "itk-wasm": "^1.0.0-b.18" 我两个都试了一下是一样的情况。
- 小江江12回复xxxggany 2023.06.25
  我这边进行了官网的复制粘贴到本地vue项目中并且未对vue.config.js配置进行了测试，是可以出来的，具体的原因你可以再看看，估计是你那里没有写对的原因。
- 小江江12回复xxxggany 2023.06.25
  你这个估计得在vue.config.js配置一下itk插件的指向配置

Hypnotic404 2023.05.24
你好，想问一下fetchBinary(res).then((binary) => {})这段代码中{}是不用添加任何代码嘛
- 小江江12回复Hypnotic404 2023.05.25
  看文章最后代码，有完整代码

zaohuanongren_ 2023.05.21
大佬，有偿求代码
- zaohuanongren_回复小江江12 2023.05.25
  谢谢大佬
- 小江江12回复zaohuanongren_ 2023.05.24
  不需要有偿，代码真的和文章差不多了，整体代码修改在文章最后面

zaohuanongren_ 2023.05.19
大佬，能不能发具体代码啊
- 小江江12回复zaohuanongren_ 2023.05.22
  我的写法和官网的有点不一样，但它的代码我也完全复制下来用了，只是修改了文件名称，是可以执行显示的，具体的可以看下评论区，我之前回复过。
- zaohuanongren_回复小江江12 2023.05.19
  谢谢大佬，但是我看他的代码一直报错，能不能看看你的代码[face]emoji:054.png[/face][face]emoji:054.png[/face][face]emoji:054.png[/face][face]emoji:054.png[/face]
- 小江江12回复zaohuanongren_ 2023.05.19
  这个已经发过链接哦，再发一次https://kitware.github.io/vtk-js/examples/ItkWasmVolume.html
- 小江江12回复zaohuanongren_ 2023.05.19
  评论中有贴过具体代码链接，再给你贴一次https://kitware.github.io/vtk-js/examples/ItkWasmVolume.html

小江江12 2023.03.16
其实官方有相关的例子，为了大家不必要的问询，大家可以前往官方例子自行查阅https://kitware.github.io/vtk-js/examples/ItkWasmVolume.html把里面的文件换成nii文件即可
- 小江江12回复wakkkkkkkkkkk265 2023.03.20
  const volumeArrayBuffer = await vtkLiteHttpDataAccessHelper.fetchBinary( '/FLAIR_242df377143b4865a05ad0b4d4cdd0c0.nii.gz' ); const { image: itkImage, webWorker } = await window.itk.readImageArrayBuffer( null, volumeArrayBuffer, 'FLAIR_242df377143b4865a05ad0b4d4cdd0c0.nii.gz' );
- 小江江12回复wakkkkkkkkkkk265 2023.03.20
  我本地试了nii和nii.gz的文件都可以的，而readImageArrayBuffer报错是由于它首次注册时不存在的问题，但不影响它后续的渲染。
- wakkkkkkkkkkk265回复wakkkkkkkkkkk265 2023.03.17
  readImageArrayBuffer报错了
- wakkkkkkkkkkk265回复小江江12 2023.03.17
  但是我试了.mha 和.dcm文件可以，.nii.gz不行啊

十六张纸 2023.02.02
您好，请问有具体一点的代码吗
- 2201_75635610回复十六张纸 2025.02.22
  您好，请问您的no input解决了吗？我也出现这个问题了一旦滑动展示区域就会报错no input[face]emoji:010.png[/face]
- 小黄妖怪回复十六张纸 2023.09.25
  我也是显示no input的问题，请问你解决了吗
- 小江江12回复十六张纸 2023.02.07
  输入文件哪里和博客差不多，唯一要注意的是niftiReader.setFileName("image.nii");这里的名称要和文件名称设置一致
- 十六张纸回复小江江12 2023.02.03
  大佬大佬，再请教输入文件那里怎么写，我今天试了一下都是No input
- 十六张纸回复小江江12 2023.02.03
  好的，谢谢大佬
- 小江江12回复十六张纸 2023.02.03
  vtkITKImageReader.setReadImageArrayBufferFromITK(readImageArrayBuffer);只是借助itk.js中读取影像转为ArrayBuffer数据。
- 十六张纸回复小江江12 2023.02.03
  itk.js是直接读取文件吗，刚刚接触itk.js，那里没太明白
- 小江江12回复十六张纸 2023.02.03
  核心代码已经很详细了哦，整体代码我就不贴了，体数据渲染官方有相关列子。如果你了解vtk.js的渲染流程，加上这个核心代码是很容易出来的。