我有DCM文件，这些文件存储在本地系统中。我需要通过浏览来获取该文件，然后解析该DCM文件以找到重新缩放斜率（0028,1053）和重新缩放截距（0028,1052）等的值。并且需要显示与该DCM文件相对应的DCM图片。我已经使用脚本标记在HTML页面中包含了分解器库和基石库。我是javascript世界的初学者。
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- <link href="../cornerstone.min.css" rel="stylesheet"> -->
</head>
<body>
<div class="container">
<div id="loadProgress">Image Load Progress:</div>
<div class="row">
<form id="form" class="form-horizontal">
<div class="form-group">
<div class="col-sm-3">
<input type="file" id="selectFile" >
</div>
</div>
</form>
</div>
<br>
<div class="row">
<div class="col-md-6">
<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>
<div class="col-md-6">
<span>Transfer Syntax: </span><span id="transferSyntax"></span><br>
<span>SOP Class: </span><span id="sopClass"></span><br>
<span>Samples Per Pixel: </span><span id="samplesPerPixel"></span><br>
<span>Photometric Interpretation: </span><span id="photometricInterpretation"></span><br>
<span>Number Of Frames: </span><span id="numberOfFrames"></span><br>
<span>Planar Configuration: </span><span id="planarConfiguration"></span><br>
<span>Rows: </span><span id="rows"></span><br>
<span>Columns: </span><span id="columns"></span><br>
<span>Pixel Spacing: </span><span id="pixelSpacing"></span><br>
<span>Bits Allocated: </span><span id="bitsAllocated"></span><br>
<span>Bits Stored: </span><span id="bitsStored"></span><br>
<span>High Bit: </span><span id="highBit"></span><br>
<span>Pixel Representation: </span><span id="pixelRepresentation"></span><br>
<span>WindowCenter: </span><span id="windowCenter"></span><br>
<span>WindowWidth: </span><span id="windowWidth"></span><br>
<span>RescaleIntercept: </span><span id="rescaleIntercept"></span><br>
<span>RescaleSlope: </span><span id="rescaleSlope"></span><br>
<span>Basic Offset Table Entries: </span><span id="basicOffsetTable"></span><br>
<span>Fragments: </span><span id="fragments"></span><br>
<span>Min Stored Pixel Value: </span><span id="minStoredPixelValue"></span><br>
<span>Max Stored Pixel Value: </span><span id="maxStoredPixelValue"></span><br>
<span>Total Time: </span><span id="totalTime"></span><br>
<span>Load Time: </span><span id="loadTime"></span><br>
<span>Decode Time: </span><span id="decodeTime"></span><br>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8" async defer></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cornerstone-math@0.1.6/dist/cornerstoneMath.js" async defer></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cornerstone-core@2.2.4/dist/cornerstone.js" async defer></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cornerstone-web-image-loader@2.1.0/dist/cornerstoneWebImageLoader.js" async defer></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cornerstone-tools@next" async defer></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cornerstone-tools@3.0.0-b.641/dist/cornerstoneTools.js" async defer></script>
<script type="text/javascript" src="https://unpkg.com/dicom-parser@1.8.3/dist/dicomParser.js" async defer></script>
<script type="text/javascript" src="https://unpkg.com/dicom-parser@1.8.3/dist/dicomParser.min.js" async defer></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cornerstone-wado-image-loader@2.2.3/dist/cornerstoneWADOImageLoader.min.js" async defer></script>
<script>
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
// this function gets called once the user drops the file onto the div
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
// Get the FileList object that contains the list of files that were dropped
const files = evt.dataTransfer.files;
// this UI is only built for a single file so just dump the first one
file = files[0];
const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file);
loadAndViewImage(imageId);
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
const dropZone = document.getElementById('dicomImage');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
cornerstoneWADOImageLoader.configure({
beforeSend: function(xhr) {
// Add custom headers here (e.g. auth tokens)
//xhr.setRequestHeader('x-auth-token', 'my auth token');
},
useWebWorkers: true,
});
let loaded = false;
function loadAndViewImage(imageId) {
const element = document.getElementById('dicomImage');
const start = new Date().getTime();
cornerstone.loadImage(imageId).then(function(image) {
console.log(image);
const viewport = cornerstone.getDefaultViewportForImage(element, image);
cornerstone.displayImage(element, image, viewport);
if(loaded === false) {
cornerstoneTools.mouseInput.enable(element);
cornerstoneTools.mouseWheelInput.enable(element);
cornerstoneTools.wwwc.activate(element, 1); // ww/wc is the default tool for left mouse button
cornerstoneTools.pan.activate(element, 2); // pan is the default tool for middle mouse button
cornerstoneTools.zoom.activate(element, 4); // zoom is the default tool for right mouse button
cornerstoneTools.zoomWheel.activate(element); // zoom is the default tool for middle mouse wheel
cornerstoneTools.imageStats.enable(element);
loaded = true;
}
function getTransferSyntax() {
const value = image.data.string('x00020010');
return value + ' [' + uids[value] + ']';
}
function getSopClass() {
const value = image.data.string('x00080016');
return value + ' [' + uids[value] + ']';
}
function getPixelRepresentation() {
const value = image.data.uint16('x00280103');
if(value === undefined) {
return;
}
return value + (value === 0 ? ' (unsigned)' : ' (signed)');
}
function getPlanarConfiguration() {
const value = image.data.uint16('x00280006');
if(value === undefined) {
return;
}
return value + (value === 0 ? ' (pixel)' : ' (plane)');
}
document.getElementById('transferSyntax').textContent = getTransferSyntax();
document.getElementById('sopClass').textContent = getSopClass();
document.getElementById('samplesPerPixel').textContent = image.data.uint16('x00280002');
document.getElementById('photometricInterpretation').textContent = image.data.string('x00280004');
document.getElementById('numberOfFrames').textContent = image.data.string('x00280008');
document.getElementById('planarConfiguration').textContent = getPlanarConfiguration();
document.getElementById('rows').textContent = image.data.uint16('x00280010');
document.getElementById('columns').textContent = image.data.uint16('x00280011');
document.getElementById('pixelSpacing').textContent = image.data.string('x00280030');
document.getElementById('bitsAllocated').textContent = image.data.uint16('x00280100');
document.getElementById('bitsStored').textContent = image.data.uint16('x00280101');
document.getElementById('highBit').textContent = image.data.uint16('x00280102');
document.getElementById('pixelRepresentation').textContent = getPixelRepresentation();
document.getElementById('windowCenter').textContent = image.data.string('x00281050');
document.getElementById('windowWidth').textContent = image.data.string('x00281051');
document.getElementById('rescaleIntercept').textContent = image.data.string('x00281052');
document.getElementById('rescaleSlope').textContent = image.data.string('x00281053');
document.getElementById('basicOffsetTable').textContent = image.data.elements.x7fe00010 && image.data.elements.x7fe00010.basicOffsetTable ? image.data.elements.x7fe00010.basicOffsetTable.length : '';
document.getElementById('fragments').textContent = image.data.elements.x7fe00010 && image.data.elements.x7fe00010.fragments ? image.data.elements.x7fe00010.fragments.length : '';
document.getElementById('minStoredPixelValue').textContent = image.minPixelValue;
document.getElementById('maxStoredPixelValue').textContent = image.maxPixelValue;
const end = new Date().getTime();
const time = end - start;
document.getElementById('totalTime').textContent = time + "ms";
document.getElementById('loadTime').textContent = image.loadTimeInMS + "ms";
document.getElementById('decodeTime').textContent = image.decodeTimeInMS + "ms";
}, function(err) {
alert(err);
});
}
cornerstone.events.addEventListener('cornerstoneimageloadprogress', function(event) {
const eventData = event.detail;
const loadProgress = document.getElementById('loadProgress');
loadProgress.textContent = `Image Load Progress: ${eventData.percentComplete}%`;
});
const element = document.getElementById('dicomImage');
cornerstone.enable(element);
document.getElementById('selectFile').addEventListener('change', function(e) {
// Add the file to the cornerstoneFileImageLoader and get unique
// number for that file
const file = e.target.files[0];
const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file);
loadAndViewImage(imageId);
});
</script>
</html>