vue + vtk.js读取CT序列，显示3d影像（三个面显示）

最新推荐文章于 2024-06-09 09:44:19 发布

AwoCT

最新推荐文章于 2024-06-09 09:44:19 发布

阅读量2.9k

点赞数 2

分类专栏： vue vtkjs 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_39480297/article/details/127285145

版权

vtk.js官网示例中，显示CT序列，都是以vti文件格式为例进行读取。但是在实际项目中，一般都是以.dcm为后缀的dicom影像，目前在vtk.js官网中，没有找到直接读取dicom序列的API。故，需要用到itk.js(itk-wasm)来读取dicom序列，vtk.js渲染显示影像。

itk-wasm 在[vue + vtkJs + itkJs进行dcom影像预览]一文中有配置说明

效果图

在这里插入图片描述

代码：

/** html  */
<template>
  <div class="posrel wh100" :style="{ background: '#000' }">
    <input ref="3dFile" type="file" multiple name="" id="" class="posabs" :style="{ 'z-index': 2 }" @change="handleFile">
    <div class="posabs r-0 p-20" :style="{ background: '#fff', width: '300px', 'z-index': 2 }">
      <div class="flex align_items_center">
        <span :style="{ width: '110px' }">Slice I</span>
        <el-slider class="flex_1" v-model="sliceI.val" :min="sliceI.min" :max="sliceI.max" @input="updateSliceI"></el-slider>
      </div>
      <div class="flex align_items_center">
        <span :style="{ width: '110px' }">Slice J</span>
        <el-slider class="flex_1" v-model="sliceJ.val" :min="sliceJ.min" :max="sliceJ.max" @input="updateSliceJ"></el-slider>
      </div>
      <div class="flex align_items_center">
        <span :style="{ width: '110px' }">Slice K</span>
        <el-slider class="flex_1" v-model="sliceK.val" :min="sliceK.min" :max="sliceK.max" @input="updateSliceK"></el-slider>
      </div>
      <div class="flex align_items_center">
        <span :style="{ width: '110px' }">Color level</span>
        <el-slider class=