cornerstone.js使用记录(一)

4,589 阅读1分钟

做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']; //全部类型,源码在下图

image.png

cornerstone.loadAndCacheImage

//这个函数会先调用 loadImageFromImageLoader这个函数,这个函数又会调用WADOImageLoader中的 loadImage, 感兴趣可以自己深入了解
// 返回的img 内容
//查看 displayImage源码
  • loadImageFromImageLoader

image.png

  • loadImage

image.png

  • promise img

image.png

  • displayImage

image.png

目前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>