Cornerstone has a complete system. Cornerstone is the bottom of the system. We mainly use the CornerstoneTools class. The CornerstoneTools has a lot of image editors, and we use the CornerstoneTools to manipulate medical imaging images.

The official instructions

  1. Cornerstone Official Documentation
  2. Corner Tools official documentation
  3. Cornerstonetools instance
  4. Cornerstone system source code
  5. Cornerstonetools Application instance (requires scaling walls)

start

Hammerjs Dicom-parser is a lightweight library that supports touch manipulation. Used to parse DICOM P10 byte streams Cornerstone core // Cornerstone Image parsing and rendering core libraries in modern HTML5 based Web browsers (IE10+),Node.js and Meteor Cornerstone - Tools // Cornerstone specific tools to implement application set Cornerstone - Math // Cornerstone math library, Cornerstone - Ado -image-loader // DicOM image binary data streams for different coding protocolsCopy the code

HTML creates the render node

<div id="imageBox" style="width: 512px; height: 512px"></div>
Copy the code

VUE creates the render node

<div ref="imageBox" class="imageBox"></div>
Copy the code

Native JS introduction tools

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

VUE introduces tools

import Hammer from "hammerjs";
import dicomParser from "dicom-parser";
import cornerstone from "cornerstone-core";
import cornerstoneTools from "cornerstone-tools";
import cornerstoneMath from "cornerstone-math";
import cornerstoneWADOImageLoader from "cornerstone-wado-image-loader";
Copy the code

Tool initialization operations

cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.Hammer = Hammer;
Copy the code

Introduce and add tools

/ / reference test cases to apply more tools to the website, please check the const LengthTool = cornerstoneTools. LengthTool; / / tools const length AngleTool = cornerstoneTools. AngleTool; // The Angle tool cornerstonetools. addTool(LengthTool); cornerstoneTools.addTool(AngleTool); / / activation tool cornerstoneTools. SetToolActive (" LengthTool, "{1} mouseButtonMask:); //mouseButtonMask: 1 represents the left mouse button to use the toolCopy the code

Initialize the Tools tool and get the DOM node render image

// Initialize cornerstoneTools.init({globalToolSyncEnabled: true,}); / / get imageId const imageId = "wadouri: https://9z04x8ykjr.codesandbox.io/000000.dcm"; Const Element = document.getelementById ("imageBox"); // Get dom node and render data const Element = document.getelementById ("imageBox"); cornerstone.enable(element); cornerstone.loadAndCacheImage(imageId).then((image) => { cornerstone.displayImage(element, image); });Copy the code

These operations can create a simple medical image raw tool, and we’ll talk more about how to customize the tool later