下面我将为大家分享基于cornerstone.js的dicom医学影像查看浏览功能的完整攻略：
简介
DICOM（Digital Imaging and Communications in Medicine）是医学影像和相关信息的国际标准，它定义了医学影像的格式、传输协议以及元数据等信息，被广泛应用于医学领域。在web应用中，通常需要通过浏览器对DICOM医学影像进行查看、分析和处理。而基于cornerstone.js的DICOM医学影像查看浏览功能，可以实现在web浏览器中快速、稳定地查看、浏览DICOM医学影像。
1. 环境准备
首先，我们需要准备工作环境并安装所需依赖。在此之前，我们需要保证本地已经安装了Node.js和npm。
1.1 安装webpack
使用 npm 可以很容易地安装 webpack
npm install webpack --global
1.2 安装cornerstone.js
npm install cornerstone-core --save
1.3 安装cornerstoneWADOImageLoader
npm install cornerstone-wado-image-loader --save
1.4 安装dicom-parser
npm install dicom-parser --save
1.5 安装dicom-rs
npm install dicom-rs --save
2. 加载DICOM数据
使用cornerstoneWADOImageLoader插件可以通过WADO-URI请求来加载DICOM数据。
const imageId =
"wadouri:" +
"https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs/wado?" +
"requestType=WADO&" +
"studyUID=1.2.840.113619.2.55.3.3876812227.629.1237940570.778&" +
"seriesUID=1.2.840.113619.2.55.3.3876812227.629.1237940570.780&" +
"objectUID=1.2.840.113619.2.55.3.2601012505.16384.1476881610.75&" +
"contentType=application/dicom";
const element = document.getElementById('dicomImage');
cornerstone.loadImage(imageId).then((image) => {
cornerstone.displayImage(element, image);
}).catch((err) => {
console.log(err);
});
上述代码中，wadouri协议表示使用WADO-URI请求DICOM数据。请求的URL中必须包含studyUID、seriesUID以及objectUID等信息。
3. 显示DICOM数据
通过调用cornerstoneJs的API可以将DICOM数据渲染到页面上。
const element = document.getElementById('dicomImage');
// 设置viewport
const viewport = cornerstone.getDefaultViewportForImage(element, image);
cornerstone.displayImage(element, image, viewport);
// 调整窗宽窗位调节
const ww = 400;
const wc = 100;
cornerstoneTools.setWindowWidth(ww);
cornerstoneTools.setWindowCenter(wc);
const viewport = cornerstone.getViewport(element);
viewport.voi.windowWidth = ww;
viewport.voi.windowCenter = wc;
cornerstone.setViewport(element, viewport);
上述代码中，我们首先获取了用于显示DICOM数据的DOM元素，然后调用了cornerstone的API将DICOM数据显示出来。同时，我们还可以通过cornerstoneTools的API实现窗宽窗位的调节，在调节完毕后需要调用setViewport方法来更新viewport。
示例
示例一
以下是一个使用cornerstone.js加载和显示DICOM数据的示例：
<!doctype html>
<html>
<head>
<title>Basic DICOM Viewer</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<canvas id="dicomImage"></canvas>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/cornerstone-core/dist/cornerstone.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cornerstone-wado-image-loader/dist/cornerstoneWADOImageLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dicom-parser/dist/dicomParser.js"></script>
<script>
const imageId =
"wadouri:" +
"https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs/wado?" +
"requestType=WADO&" +
"studyUID=1.2.840.113619.2.55.3.3876812227.629.1237940570.778&" +
"seriesUID=1.2.840.113619.2.55.3.3876812227.629.1237940570.780&" +
"objectUID=1.2.840.113619.2.55.3.2601012505.16384.1476881610.75&" +
"contentType=application/dicom";
const element = document.getElementById('dicomImage');
cornerstone.loadImage(imageId).then((image) => {
cornerstone.displayImage(element, image);
}).catch((err) => {
console.log(err);
});
</script>
</html>
在上述代码中，我们首先在HTML中定义了一个canvas标签用于显示DICOM数据。接着，在JavaScript中，我们使用cornerstone的API来加载DICOM数据，最后调用cornerstone的API将DICOM数据显示到canvas中。
示例二
以下是一个使用cornerstone.js实现窗宽窗位调节的示例：
<!doctype html>
<html>
<head>
<title>Window Width/Center</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<canvas id="dicomImage"></canvas>
</div>
<div>
<label for="ww">Window Width</label>
<input type="text" id="ww">
</div>
<div>
<label for="wc">Window Center</label>
<input type="text" id="wc">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/cornerstone-core/dist/cornerstone.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cornerstone-wado-image-loader/dist/cornerstoneWADOImageLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dicom-parser/dist/dicomParser.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cornerstone-tools/dist/cornerstoneTools.js"></script>
<script>
const imageId =
"wadouri:" +
"https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs/wado?" +
"requestType=WADO&" +
"studyUID=1.2.840.113619.2.55.3.3876812227.629.1237940570.778&" +
"seriesUID=1.2.840.113619.2.55.3.3876812227.629.1237940570.780&" +
"objectUID=1.2.840.113619.2.55.3.2601012505.16384.1476881610.75&" +
"contentType=application/dicom";
const element = document.getElementById('dicomImage');
let image;
cornerstone.loadImage(imageId).then((res) => {
image = res;
const viewport = cornerstone.getDefaultViewportForImage(element, image);
cornerstone.displayImage(element, image, viewport);
const ww = 400;
const wc = 100;
cornerstoneTools.setWindowWidth(ww);
cornerstoneTools.setWindowCenter(wc);
const viewport2 = cornerstone.getViewport(element);
viewport2.voi.windowWidth = ww;
viewport2.voi.windowCenter = wc;
cornerstone.setViewport(element, viewport2);
document.getElementById('ww').addEventListener('change', (event) => {
const newWW = parseFloat(event.target.value);
cornerstoneTools.setWindowWidth(newWW);
const viewport = cornerstone.getViewport(element);
viewport.voi.windowWidth = newWW;
cornerstone.setViewport(element, viewport);
});
document.getElementById('wc').addEventListener('change', (event) => {
const newWC = parseFloat(event.target.value);
cornerstoneTools.setWindowCenter(newWC);
const viewport = cornerstone.getViewport(element);
viewport.voi.windowCenter = newWC;
cornerstone.setViewport(element, viewport);
});
}).catch((err) => {
console.log(err);
});
</script>
</html>
在上述示例中，我们不仅展示了如何加载DICOM数据并显示到canvas中，而且展示了如何实现窗宽窗位的调节功能。QWidget类的两个API方法setWindowWidth、setWindowCenter用于设置窗宽（窗口宽度）及窗位（窗口中心）。为实现窗宽窗位的调节功能，我们需要在keypress或input事件内调用这两个API方法，同时需要更新viewport。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于cornerstone.js的dicom医学影像查看浏览功能 - Python技术站
微信扫一扫 
支付宝扫一扫 