<!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 파일을 선택하면 div에 표시됩니다. .
재인쇄: https://www.cnblogs.com/-NETer-P/p/14030015.html