<!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>
The JS libraries that need to be introduced in the above code are all from the GitHub open source project cornerstone.js.
After running, click the button in the upper left corner to select the dcm file to load and it will be displayed in the div.
Reprinted to: https://www.cnblogs.com/-NETer-P/p/14030015.html