PACS web项目医学影像阅片工具CornerstoneJs使用心得

接触过医学影像的程序员一定对cornerstonejs这一个工具不陌生，cornerstone有一套相对完整的体系，cornerstone是这个体系的最底层，我们主要应用到的是cornerstonetools这一个工具类，cornerstonetools里面包含了很多图像编辑工，我们主要通过cornerstonetools来操作医学影像图像。

官方说明

1. cornerstone官方文档
2. cornerstonetools官方文档
3. cornerstonetools工具实例
4. cornerstone体系源码
5. cornerstonetools应用实例(需要)

开始

      hammerjs   // 管理浏览器鼠标手势事件 cornerstonetools支持触屏操作，所以引入了hammerjs
      dicom-parser //dicomParser 是一个轻量级库，用于在基于现代 HTML5 的 Web 浏览器 (IE10+),Node.js 和 Meteor 中解析 DICOM P10 字节流
      cornerstone-core //cornerstone图像解析及图像绘制核心库
      cornerstone-tools //cornerstone具体工具实现应用集合
      cornerstone-math  //cornerstone的数学库，实现包括几何计算、矩阵计算、维向量计算之类的数学逻辑计算
      cornerstone-wado-image-loader //针对不同的编码协议来解析dicom图像二进制数据流

HTML创建渲染节点

VUE创建渲染节点

原生JS引入工具

VUE引入工具

import Hammer from "hammerjs";
import dicomParser from "dicom-parser";
import cornerstone from "cornerstone-core";
import cornerstoneTools from "cornerstone-tools";
import cornerstoneMath from "cornerstone-math";
import cornerstoneWADOImageLoader from "cornerstone-wado-image-loader";

工具初始化操作

cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.Hammer = Hammer;

引入并添加工具

//引用试例 想要应用更多工具请前往官网查看
const LengthTool = cornerstoneTools.LengthTool; //长度工具
const AngleTool = cornerstoneTools.AngleTool; //角度工具
cornerstoneTools.addTool(LengthTool);
cornerstoneTools.addTool(AngleTool);
//激活工具
cornerstoneTools.setToolActive("LengthTool", { mouseButtonMask: 1 });
//mouseButtonMask：1 代表鼠标左键使用工具

初始化tools工具并获取dom节点渲染图像

//初始化
 cornerstoneTools.init({
    globalToolSyncEnabled: true,
  });
// 获取imageId
const imageId = "wadouri:https://9z04x8ykjr.codesandbox.io/000000.dcm";
//获取dom节点并渲染数据
const element = document.getElementById("imageBox");
cornerstone.enable(element);
 cornerstone.loadAndCacheImage(imageId).then((image) => {
    cornerstone.displayImage(element, image);
  });

这些操作可以创建出一个简单的医学影像原片工具，后面有机会再详细讲讲如何自定义工具