首页 > 其他分享> > 使用医学影像开源库cornerstone.js解析Dicom图像显示到HTML中

使用医学影像开源库cornerstone.js解析Dicom图像显示到HTML中

2021-03-08 10:30:05 作者：互联网

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DicomTest</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/cornerstone.min.css">
    <script src="js/cornerstone.min.js"></script>
    <script src="js/dicomParser.min.js"></script>
    <script src="Imageloader/cornerstoneWADOImageLoaderCodecs.js"></script>
    <script src="imageloader/cornerstoneWADOImageLoaderWebWorker.js"></script>
    <script src="imageloader/cornerstoneWADOImageLoader.js"></script>
</head>
<body>
    <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">加载到窗口中</button>
        </div>
        <div id="loadProgress">医疗影像Dicom解析加载</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;' onm ousedown='return false;'>
            <div id="dicomImage" style="width:512px;height:512px;top:0px;left:0px; position:absolute">
            </div>
        </div>
    </div>
    <script type="text/javascript">
        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}%`;
        });
    </script>
</body>

</html>

上面代码中需要引入的JS库，均来自GitHub开源项目cornerstone.js
运行后，点击左上角按钮选择dcm文件进行load 可显示到div中

转载至：https://www.cnblogs.com/-NETer-P/p/14030015.html

标签：function,Dicom,js,getElementById,医学影像,element,document,cornerstone,加载
来源： https://blog.csdn.net/asd54090/article/details/114522911