Twitter Bootstrap Question posted in

How can pass path of dicom file at cornerstone library and display it?-Twitter bootstrap

I want to display a Dicom image from my web site. So I have find cornerstone library to do this.

So this is the code:

<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <link href="cornerstone.min.css" rel="stylesheet">

</head>
<body>
<div class="container">

    <div class="page-header">
        <br>

    </div>

    <div class="row">
        <form class="form-horizontal">
            <div class="form-group">
                <input type="file" id="selectFile" >
            </div>
        </form>
    </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>
</body>


<!-- jquery - currently a dependency and thus required for using cornerstoneWADOImageLoader -->
<script src="jquery.min.js"></script>

<!-- include the cornerstone library -->
<script src="cornerstone.min.js"></script>

<!-- include the dicomParser library as the WADO image loader depends on it -->
<script src="dicomParser.min.js"></script>

<!-- include the cornerstoneWADOImageLoader library -->
<script src="cornerstoneWADOImageLoader.min.js"></script>
<script src="../dist/cornerstoneFileImageLoader.js"></script>
<!-- jpeg 2000 codec -->
<script src="jpx.min.js"></script>

<script>


    $(document).ready(function() {

        var element = $('#dicomImage').get(0);
         cornerstone.enable(element);

        // Listen for the change event on our input element so we can get the
        // file selected by the user
        $('#selectFile').on('change', function(e) {
            // Add the file to the cornerstoneFileImageLoader and get unique
            // number for that file
            var file = e.target.files[0];
            alert("cambio il file");

            var index = cornerstoneFileImageLoader.addFile(file);

            // create an imageId for this image
            var imageId = "dicomfile://" + index;
            // load and display this image into the element
            var element = $('#dicomImage').get(0);
            cornerstone.loadImage(uriImageDesktop).then(function(image) {
                cornerstone.displayImage(element, image);
            });

        });

    });

</script>
</html>

With this code, I can display a single HTML page with a File Chooser. With this component, I can navigate into my pc then the library load a Dicom image.

Now I want to pass from the URL a path of my Dicom image.

So I’m trying to do this 

var uriImageDesktop = "C:UsersmicheleDesktopdeflate_testsimage";
            // load and display this image into the element
            var element = $('#dicomImage').get(0);
            cornerstone.loadImage(uriImageDesktop).then(function(image) {
                cornerstone.displayImage(element, image);
            });

for the moment I wirte static dicom image but it not found.

So the question is, how can I pass a path from my dicom file and then display it?

Tags:

2

Answers


  1. 0

    Perhaps the URI format is invalid. The example does not contain a scheme. Something like 

    file://c:/Users/user/Desktop/images/image.dcm

    may work better.

    Login or Signup to reply.
  2. 0

    You’re missing the image loader part here. Cornerstone requires an image loader to convert your link to an image object readable by cornerstone. If you look at cornerstone’s github repo, you will find two image loaders. The WADO image loader can be used to read DICOM files. You will have to build a backend to serve the DICOM files though since the browser won’t be able to access server files.
    Given you have a uri to access the DICOM file:

    import * as cornerstone from "cornerstone-core"
import * as cornerstoneWADOImageLoader from "cornerstone-wado-image-loader"
cornerstoneWADOImageLoader.external.cornerstone = cornerstone

const uriServed = "http://xxx/deflate_tests/image"
const element = $('#dicomImage').get(0);
cornerstone.loadImage("wadouri:" + uriServed).then(image => {
  cornerstone.displayImage(element, image);
 });

    NB: if you do’t have npm, just link to the .js files as scripts instead of importing (or you can import them too in ES6+)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search