<!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中
