用cornerstone.js写个dcm影像显示的demo
时间: 2023-12-16 10:06:28 浏览: 88
好的,以下是一个用cornerstone.js写的简单的dcm影像显示的demo,您可以参考代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo: Dicom Image Display with Cornerstone.js</title>
<style>
#dicomImage {
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<h1>Demo: Dicom Image Display with Cornerstone.js</h1>
<p>Select a DICOM image file to display:</p>
<input type="file" id="fileInput">
</div>
<div>
<h3>DICOM Image:</h3>
<canvas id="dicomImage"></canvas>
</div>
<script src="https://unpkg.com/cornerstone-core/dist/cornerstone.js"></script>
<script src="https://unpkg.com/cornerstone-math/dist/cornerstoneMath.js"></script>
<script src="https://unpkg.com/cornerstone-tools/dist/cornerstoneTools.js"></script>
<script src="https://unpkg.com/cornerstone-wado-image-loader/dist/cornerstoneWADOImageLoader.js"></script>
<script>
const fileInput = document.getElementById('fileInput');
const dicomImage = document.getElementById('dicomImage');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file);
cornerstone.loadImage(imageId).then((image) => {
cornerstone.displayImage(dicomImage, image);
});
});
</script>
</body>
</html>
```
此代码将创建一个简单的页面,其中有一个文件上传按钮,用于选择要显示的DICOM图像文件。一旦选择了文件,代码将使用Cornerstone.js和CornerstoneWADOImageLoader.js加载和显示图像。
请注意,此代码仅用于演示目的,实际应用中可能需要更多的错误处理和用户交互。
阅读全文