做web医疗影像大多数都会用到这个JS文件 cornerstone.js,以及它的生态插件。 废话不多说,上手就干。
//引入必要的js文件
<script src="https://unpkg.com/cornerstone-core@2.3.0/dist/cornerstone.js"></script>
<script src="https://unpkg.com/cornerstone-wado-image-loader@3.3.1/dist/cornerstoneWADOImageLoader.min.js"></script>
<script src="https://unpkg.com/dicom-parser@1.8.7/dist/dicomParser.min.js"></script>
//这三个JS文件是必要的
/**
1. 第一个是最主要JS文件,其他是根据它扩展出来
2. 第二是加载DCM文件
3. 第三个是解析DCM文件
*/
HTML
<div id="dicomImage" style="width: 512px;height: 512px;" oncontextmenu="return false" onmousedown="return false"></div>
JS
cornerstoneWADOImageLoader.external.cornerstone = cornerstone; //把cornerstone注入进去,如果没有这部就会报一个错 --loadImageFromImageLoader: no image loader for imageId
let element = document.querySelector("#dicomImage"); //获取需要渲染元素
let imageId = "wadouri:http://127.0.0.1/download/dx123.dcm"; //详细请看下面
cornerstone.enable(element, { //激活渲染元素, 没有将会报错 --element not enabled
colormap: "" //这个对象可以不传,但你改变颜色后,重置时不传这个元素会报错 -- options.colormap is not read prototype
});
cornerstone.loadAndCacheImage(imageId).then(img => { //加载dcm文件并缓存
cornerstone.displayImage(element, img); //将解析的信息渲染到某个元素上
});
逐步解析这些JS关系
imageId
//wadouri 这个是必须的,没有这个它报 --loadImageFromImageLoader: no image loader for imageId
//但是它不只有这个解析类型
let types = ['wadouri','wadors','dicomweb','dicomfile']; //全部类型,源码在下图
cornerstone.loadAndCacheImage
//这个函数会先调用 loadImageFromImageLoader这个函数,这个函数又会调用WADOImageLoader中的 loadImage, 感兴趣可以自己深入了解
// 返回的img 内容
//查看 displayImage源码
- loadImageFromImageLoader
- loadImage
- promise img
- displayImage
目前DCM解析和渲染基本完成,更多操作需要加强插件能力 如下插件 :
<script src="https://unpkg.com/hammerjs@2.0.8/hammer.js"></script>
<script src="https://unpkg.com/cornerstone-math@0.1.9/dist/cornerstoneMath.min.js"></script>
<script src="https://unpkg.com/cornerstone-tools@5.1.4/dist/cornerstoneTools.js"></script>