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

最新推荐文章于 2024-02-20 16:38:47 发布

LuckyTHP

最新推荐文章于 2024-02-20 16:38:47 发布

阅读量2.5k

点赞数

文章标签： DICOM 医疗影像 Cornerstone.js JavaScript WADO Image Loader

本文链接：https://blog.csdn.net/asd54090/article/details/114522911

版权

<!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;' onmousedown='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

LuckyTHP

关注

0
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
1
评论
使用医学影像开源库cornerstone.js解析Dicom图像显示到HTML中

<!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/bo
复制链接

扫一扫