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<

你可能感兴趣的:(vue,vtkjs,vue.js,javascript,前端)