vue + vtkJs + itkJs进行dcom影像预览

AwoCT

已于 2023-03-27 17:38:16 修改

阅读量4.8k

点赞数 4

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

于 2022-09-28 17:45:11 首次发布

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

版权

本文介绍了如何在Vue项目中结合vtk.js和itk.js来预览DICOM影像。虽然itk.js的API有限，但通过其与vtk.js的结合，可以实现影像的加载和渲染。首先安装vtk.js和itk的相关包，然后通过itk.js API读取并转换DICOM文件，最后在vtk.js中展示影像。虽然建议在实际开发中使用cornerstone-core，但此方法提供了一种不同寻常的解决方案。

摘要由CSDN通过智能技术生成

说到预览dicom影像，首先，对于前端来说，我们常用的是cornerstone-core库来实现。由于公司QT开发作为主力军，QT在开发过程中，一般采用itk读取影像数据，vtk渲染影像，且itk、vtk库都比较完善。为了节约学习、研究的时间成本，在vue项目开发中采用vtk.js+itk.js来实现影像加载。

缺点是，目前itk.js的API较少，功能单一。
可以先了解itk.js，实际开发中，建议使用cornerstone-core库。

1、安装vtk

npm install @kitware/vtk.js

目前的vtk.js还不能直接进行.dcm文件的加载。需要使用itk.js读取影像，并转换成vtk.js可识别的数据格式，进行界面渲染。

2、安装itk

官网地址：https://wasm.itk.org/examples/webpack.html

将itk-wasm、itk-image-io、itk-mesh-io添加到项目的依赖项中，终端运行：

npm install --save itk-wasm itk-image-io itk-mesh-io

注意项：官网中，需要对webpack进行配置,，若我们的项目采用vue-cli脚手架进行构建，且vue-cli 版本最好是5.x。若vue-cli版本低于5.x时，对于新手来说，配置比较麻烦。

小编是采用vue-cli 5.x进行构建项目，版本号：5.0.8

3、itkJs API调用

和其他常用的插件一样，在使用的界面，引入itk-wasm

import {
    readFile } from 'itk-wasm'

下面是一个测试代码

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <input ref="testFile" type="file" name="" id="" @change="handleFile">
    <p ref="textContent">{
   {
   textContent}}</p>
  </div>
</template>

<script>
import {
    readFile } from 'itk-wasm'
export default {
   
  data () {
   
    return {
   
      textContent: ''
    }
  },
  methods: {
   
    handleFile (evt