Мы используем многокадровую программу просмотра изображений Dicom в основе JS. Работает нормально, но нам нужна функциональность паузы и воспроизведения многокадрового изображения dicom. Мы перепробовали много вариантов, включая выгрузку и загрузку мультикадра в виде файла одного кадра, но ни один из них не сработал.

Вот код файла

{amp}lt;body onLoad="views ('http://localhost/img/US-MONO2-8-8x-execho.dcm');"{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;div class="page-header"{amp}gt; {amp}lt;h1{amp}gt;Example of displaying a DICOM P10 mages using Cornerstone{amp}lt;/h1{amp}gt; {amp}lt;p class="lead"{amp}gt; Enter a URL for a DICOM P10 sop instance to view it using cornerstone. {amp}lt;button id="toggleCollapseInfo" class="btn btn-primary" type="button"{amp}gt; Click for more info {amp}lt;/button{amp}gt; {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="collapseInfo" class="collapse" style="display:none;"{amp}gt; {amp}lt;p{amp}gt; This example illustrates how to use the cornerstoneWADOImageLoader to get a DICOM P10 SOP instance using HTTP and display it in your web browser using cornerstone. Not all transfer syntaxes are currently supported, {amp}lt;a href="https://github.com/cornerstonejs/cornerstoneWADOImageLoader/blob/master/docs/TransferSyntaxes.md"{amp}gt; click here for the full list. {amp}lt;/a{amp}gt; For WADO-URI requests, you can request that the server return the SOP Instance in explicit little endian by appending the following query string to your URL: {amp}lt;code{amp}gt;{amp}amp;transferSyntax=1.2.840.10008.1.2.1{amp}lt;/code{amp}gt; {amp}lt;/p{amp}gt; {amp}lt;strong{amp}gt;If you get an HTTP error and your URL is correct, it is probably because the server is not configured to allow {amp}lt;a href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing"{amp}gt;Cross Origin Requests{amp}lt;/a{amp}gt;. Most browsers will allow you to enable cross domain requests via settings or command line switches, you can start chrome with the command line switch {amp}lt;code{amp}gt;--disable-web-security{amp}lt;/code{amp}gt; to allow cross origin requests. See the {amp}lt;a href="http://enable-cors.org/"{amp}gt;Enable CORS site{amp}lt;/a{amp}gt; for information about CORS. {amp}lt;/strong{amp}gt; {amp}lt;br{amp}gt; {amp}lt;br{amp}gt; {amp}lt;p{amp}gt; Looking for a CORS proxy? Try {amp}lt;a href="https://www.npmjs.com/package/corsproxy"{amp}gt;CORSProxy{amp}lt;/a{amp}gt; {amp}lt;/p{amp}gt; {amp}lt;strong{amp}gt;Use of this example require IE10  or any other modern browser.{amp}lt;/strong{amp}gt; {amp}lt;hr{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="loadProgress"{amp}gt;Image Load Progress:{amp}lt;/div{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;form id="form" class="form-horizontal"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label class="control-label col-sm-1" for="wadoURL"{amp}gt;URL{amp}lt;/label{amp}gt; {amp}lt;div class="col-sm-8"{amp}gt; {amp}lt;input class="form-control" type="text" id="wadoURL" placeholder="Enter WADO URL" value="https://raw.githubusercontent.com/cornerstonejs/cornerstoneWADOImageLoader/master/testImages/CT0012.fragmented_no_bot_jpeg_baseline.51.dcm"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-sm-3"{amp}gt; {amp}lt;button class="form-control" type="button" id="downloadAndView" class="btn btn-primary"{amp}gt;Download and View{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;br{amp}gt; {amp}lt;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;'{amp}gt; {amp}lt;div id="dicomImage" style="width:512px;height:512px;top:0px;left:0px; position:absolute"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;!-- include the cornerstone library --{amp}gt; {amp}lt;script src="../cornerstone.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;SCRIPT src="../cornerstoneMath.min.js"{amp}gt;{amp}lt;/SCRIPT{amp}gt; {amp}lt;SCRIPT src="../cornerstoneTools.min.js"{amp}gt;{amp}lt;/SCRIPT{amp}gt; {amp}lt;!-- include the dicomParser library as the WADO image loader depends on it --{amp}gt; {amp}lt;script src="../dicomParser.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;!-- include the cornerstoneWADOImageLoader library --{amp}gt; {amp}lt;script src="../../dist/cornerstoneWADOImageLoader.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;!-- Lines ONLY required for this example to run without building the project --{amp}gt; {amp}lt;script{amp}gt;window.cornerstoneWADOImageLoader || document.write('{amp}lt;script src="https://unpkg.com/cornerstone-wado-image-loader"{amp}gt;x3C/script{amp}gt;'){amp}lt;/script{amp}gt; {amp}lt;script src="../utils/initializeWebWorkers.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; cornerstoneWADOImageLoader.external.cornerstone = cornerstone; cornerstoneWADOImageLoader.configure({ beforeSend: function(xhr) { // Add custom headers here (eg auth tokens) //xhr.setRequestHeader('x-auth-token', 'my auth token'); } }); var loaded = false; function loadAndViewImage(url) { var element = document.getElementById('dicomImage'); // since this is a multi-frame example, we need to load the DICOM SOP Instance into memory and parse it // so we know the number of frames it has so we can create the stack. Calling load() will increment the reference // count so it will stay in memory until unload() is explicitly called and all other reference counts // held by the cornerstone cache are gone. See below for more info cornerstoneWADOImageLoader.wadouri.dataSetCacheManager.load(url, cornerstoneWADOImageLoader.internal.xhrRequest).then(function(dataSet) { // dataset is now loaded, get the # of frames so we can build the array of imageIds var numFrames = dataSet.intString('x00280008'); alert (numFrames); if(!numFrames) { alert('Missing element NumberOfFrames (0028,0008)'); return; } var imageIds = []; var imageIdRoot = 'wadouri:'   url; for(var i=0; i {amp}lt; numFrames; i  ) { var imageId = imageIdRoot   "?frame=" i; imageIds.push(imageId); } var stack = { currentImageIdIndex : 0, imageIds: imageIds }; // Load and cache the first image frame. Each imageId cached by cornerstone increments // the reference count to make sure memory is cleaned up properly. cornerstone.loadAndCacheImage(imageIds[0]).then(function(image) { console.log(image); // now that we have an image frame in the cornerstone cache, we can decrement // the reference count added by load() above when we loaded the metadata. This way // cornerstone will free all memory once all imageId's are removed from the cache cornerstoneWADOImageLoader.wadouri.dataSetCacheManager.unload(url); cornerstone.displayImage(element, image); if(loaded === false) { cornerstoneTools.wwwc.activate(element, 1); // ww/wc is the default tool for left mouse button // Set the stack as tool state cornerstoneTools.addStackStateManager(element, ['stack', 'playClip']); cornerstoneTools.addToolState(element, 'stack', stack); // Start playing the clip // TODO: extract the frame rate from the dataset var frameRate = 10; cornerstoneTools.playClip(element, frameRate); loaded = true; } }, function(err) { alert(err); }); /*} catch(err) { alert(err); }*/ }); } function views(url) { loadAndViewImage(url); return false; } function downloadAndView() { const url = document.getElementById('wadoURL').value; // image enable the dicomImage element and activate a few tools loadAndViewImage(url); return false; } const element = document.getElementById('dicomImage'); cornerstone.enable(element); {amp}lt;/script{amp}gt; 

Что нам следует сделать.