接触过医学影像的程序员一定对cornerstonejs这一个工具不陌生，cornerstone有一套相对完整的体系，cornerstone是这个体系的最底层，我们主要应用到的是cornerstonetools这一个工具类，cornerstonetools里面包含了很多图像编辑工，我们主要通过cornerstonetools来操作医学影像图像。官方说明cornerstone官方文档 cornerstonetools官方文档 cornerstonetools工具实例 cornerstone体系源码 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); }); 这些操作可以创建出一个简单的医学影像原片工具，后面有机会再详细讲讲如何自定义工具}