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

说到预览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<