This JS file, cornerstone.js, and its eco-plugin are used by most web medical imaging users. Without further ado, let’s get started.

// Import the necessary js files
<script src="https://unpkg.com/[email protected]/dist/cornerstone.js"></script>
<script src="https://unpkg.com/[email protected]/dist/cornerstoneWADOImageLoader.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/dicomParser.min.js"></script>
// These three JS files are required

/** 1. The first one is the main JS file, and the others are based on it. The second is to load the DCM file. The third is to parse the DCM file

Copy the code

HTML

<div id="dicomImage" style="width: 512px; height: 512px;" oncontextmenu="return false" onmousedown="return false"></div>Copy the code

JS

cornerstoneWADOImageLoader.external.cornerstone = cornerstone; Inject into / / the cornerstone, if not this will be submitted to a fault - loadImageFromImageLoader: no image loader for imageId
let element = document.querySelector("#dicomImage"); // Get the desired render element
let imageId = "Wadouri: http://127.0.0.1/download/dx123.dcm"; // See below for details
cornerstone.enable(element, { // Activate render elements, no error will be reported --element not enabled
    colormap: "" Colormap is not read prototype; // This object can not be passed, but if you change the color, you will get an error if you do not pass this element on reset
});
cornerstone.loadAndCacheImage(imageId).then(img= > { // Load and cache the DCM file
    cornerstone.displayImage(element, img); // Render parsed information to an element
});
Copy the code

Parse these JS relationships step by step

imageId

/ / wadouri this is a must, without this it newspaper, loadImageFromImageLoader: no image loader for imageId
// But there is more to it than this parse type
let types = ['wadouri'.'wadors'.'dicomweb'.'dicomfile']; // All types, source code in the figure below
Copy the code

cornerstone.loadAndCacheImage

// This function first calls the loadImageFromImageLoader function, which in turn calls the loadImage in WADOImageLoader
// Return the img content
// Check the displayImage source code
Copy the code
  • loadImageFromImageLoader

  • loadImage

  • promise img

  • displayImage

At present, DCM parsing and rendering are basically completed, more operations need to strengthen the ability of plug-ins as follows:

<script src="https://unpkg.com/[email protected]/hammer.js"></script>
<script src="https://unpkg.com/[email protected]/dist/cornerstoneMath.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/cornerstoneTools.js"></script>
Copy the code