基于cornerstone.js解析本地dicom

最新推荐文章于 2025-11-04 16:54:38 发布

原创最新推荐文章于 2025-11-04 16:54:38 发布 · 6.7k 阅读

CC 4.0 BY-SA版权

本文档介绍如何利用cornerstone.js库解析本地DICOM数据。首先，引导读者查阅官方GitHub文档以理解原理。接着，详细说明了前端集成步骤，包括引入CSS和JS文件，特别是调整WebWorker和codes文件的路径。最后，提供了必要的引用和源码示例，适用于使用bootstrap框架的项目。

1.原理这种东西最好去看gethub上官方文档
地址：https://github.com/cornerstonejs/cornerstone
2.前期准备：
（1）在文件里添加cornerstone的css文件
在这里插入图片描述
（2）添加js文件

这个文件只需添加红框中的两个

3.重点！！！
在WADIOImageloader文件中会引用WebWorker文件和codes文件，这里的路径必须修改为你放着这两个文件可以引用的位置

4.引用
引用这4个就行

<link href="./css/bootstrap.min.css" rel="stylesheet">
<script src="./js/cornerstone.min.js"></script>
<script src="./js/dicomParser.min.js"></script>
 <script src="./ImageLoader/cornerstoneWADOImageLoader.js"></script>

5.源码
这里我使用了bootstrap框架，也可以不要
前端：

<div class="container">
            <div class="row">
                <input class="col-sm-8" type="file" id="dcmfile">
                <button class="col-sm-3 btn" type="button" id="downloadAndView">load and View</button>
            </div>
            <div id="loadProgress">Image Load Progress:</div>
            <div style="width:512px; height:512px; position:relative; color:white; display:inline-block; border-style:solid; border-color:black;"
                oncontextmenu="return false" class='disable-selection noIbar' unselectable='on' onselectstart='return false;'
                onmousedown='return false;'>
                <div id="dicomImage" style="width:512px;height:512px;top:0px;left:0px; position:absolute">
                </div>
            </div>
        </div>

重点js：

        var loaded = false;
        cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
        // 加载和显示图像
        function loadAndViewImage(imageId) {
            var element = document.getElementById('dicomImage');
            cornerstone.loadAndCacheImage(imageId).then(function (image) {
                var viewport = cornerstone.getDefaultViewportForImage(element, image);
                cornerstone.displayImage(element, image, viewport);
            }, function (err) {
                alert(err);
                console.log(err);
            });

        }

        var element = document.getElementById('dicomImage');
        cornerstone.enable(element);

        // 监听 downloadAndView 按钮 拼接url 调用 loadAndViewImage 函数
        document.getElementById('downloadAndView').addEventListener('click', function (e) {
			const file =  document.getElementById('dcmfile').files[0];
            const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file);
            // 调用这个函数加载像,和激活工具
            loadAndViewImage(imageId);
        });

        // Dicom 加载 进度
        cornerstone.events.addEventListener('cornerstoneimageloadprogress', function (event) {
            const eventData = event.detail;
            const loadProgress = document.getElementById('loadProgress');
            loadProgress.textContent = `Image Load Progress: ${eventData.percentComplete}%`;
        });
在这里插入代码片

转载请贴链接