正文

基于cornerstone.js的dicom医学影像查看浏览功能

IP云
IP云V管理员/3 阅读
11/12
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、全部代码

最近由于项目需求，需要医学影像.dcm文件的预览功能，功能完成后，基于原生Demo做一个开源分享。

心急的小伙伴可以先看如下基于原生js的全部代码：

一、全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/hammerjs@2.0.8/hammer.js"></script>
    <script src="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js"></script>
    <script src="https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.min.js"></script>
    <script src="https://unpkg.com/cornerstone-wado-image-loader@4.1.3/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>
    <script src="https://unpkg.com/cornerstone-web-image-loader@2.1.1/dist/cornerstoneWebImageLoader.min.js"></script>
    <script src="https://unpkg.com/cornerstone-tools@6.0.7/dist/cornerstoneTools.js"></script>
    <script src="https://unpkg.com/dicom-parser@1.8.13/dist/dicomParser.min.js"></script>
</head>

<body>
    <!-- 用于加载图片的div区域 -->
    <div id="dicomImage" style="width: 512px;height: 512px;"></div>

</body>

<script>

    // 注册并挂载cornerstone及其cornerstoneTools，固定操作
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneTools.external.Hammer = Hammer;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    // imageId就是cornerstone要求的.dcm图片地址,例如：var imageId = "wadouri:http://127.0.0.1:6699/ctdcm1.dcm";
    var imageId = "wadouri: http://http://127.0.0.1:6699/media/dicm/0a291d1b12bd813e3796f14b329_haAJH2K.dcm";
    // 初始化cornerstoneTools工具
    cornerstoneTools.init();
    // 获取要用于加载图片的div区域
    var element = document.getElementById('dicomImage');
    //激活获取到的用于图片加载的区域
    cornerstone.enable(element);
    // 从cornerstoneTools库中获取窗宽,窗高工具
    const WwwcTool = cornerstoneTools.WwwcTool;
    //添加获取到的窗宽,窗高工具
    cornerstoneTools.addTool(WwwcTool);
    // 绑定工具操作功能到鼠标左键
    cornerstoneTools.setToolActive('Wwwc', {
        mouseButtonMask: 1
    })
    //使用loadAndCacheImage()方法加载并缓存图片，然后使用displayImage()方法显示图片。
    cornerstone.loadAndCacheImage(imageId).then(function (image) {
        cornerstone.displayImage(element, image);
    })

</script>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/hammerjs@2.0.8/hammer.js"></script>
    <script src="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js"></script>
    <script src="https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.min.js"></script>
    <script src="https://unpkg.com/cornerstone-wado-image-loader@4.1.3/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>
    <script src="https://unpkg.com/cornerstone-web-image-loader@2.1.1/dist/cornerstoneWebImageLoader.min.js"></script>
    <script src="https://unpkg.com/cornerstone-tools@6.0.7/dist/cornerstoneTools.js"></script>
    <script src="https://unpkg.com/dicom-parser@1.8.13/dist/dicomParser.min.js"></script>
</head>

<body>
    <!-- 用于加载图片的div区域 -->
    <div id="dicomImage" style="width: 512px;height: 512px;"></div>

</body>

<script>

    // 注册并挂载cornerstone及其cornerstoneTools，固定操作
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneTools.external.Hammer = Hammer;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    // imageId就是cornerstone要求的.dcm图片地址,例如：var imageId = "wadouri:http://127.0.0.1:6699/ctdcm1.dcm";
    var imageId = "wadouri: http://http://127.0.0.1:6699/media/dicm/0a291d1b12bd813e3796f14b329_haAJH2K.dcm";
    // 初始化cornerstoneTools工具
    cornerstoneTools.init();
    // 获取要用于加载图片的div区域
    var element = document.getElementById('dicomImage');
    //激活获取到的用于图片加载的区域
    cornerstone.enable(element);
    // 从cornerstoneTools库中获取窗宽,窗高工具
    const WwwcTool = cornerstoneTools.WwwcTool;
    //添加获取到的窗宽,窗高工具
    cornerstoneTools.addTool(WwwcTool);
    // 绑定工具操作功能到鼠标左键
    cornerstoneTools.setToolActive('Wwwc', {
        mouseButtonMask: 1
    })
    //使用loadAndCacheImage()方法加载并缓存图片，然后使用displayImage()方法显示图片。
    cornerstone.loadAndCacheImage(imageId).then(function (image) {
        cornerstone.displayImage(element, image);
    })

</script>

</html>