<div id="dicomImage" style="width: 512px;height: 512px;" oncontextmenu="return false" onmousedown="return false"></div>
<script src="https://unpkg.com/hammerjs@2.0.8/hammer.js"></script>
<script src="https://unpkg.com/cornerstone-core@2.3.0/dist/cornerstone.js"></script>
<script src="https://unpkg.com/cornerstone-math@0.1.9/dist/cornerstoneMath.min.js"></script>
<script src="https://unpkg.com/cornerstone-wado-image-loader@3.3.1/dist/cornerstoneWADOImageLoader.min.js"></script>
<script src="https://unpkg.com/cornerstone-web-image-loader@2.1.1/dist/cornerstoneWebImageLoader.min.js"></script>
<script src="https://unpkg.com/cornerstone-tools@5.1.4/dist/cornerstoneTools.js"></script>
<script src="https://unpkg.com/dicom-parser@1.8.7/dist/dicomParser.min.js"></script>
<script>
cornerstoneTools.external.cornerstone = cornerstone
cornerstoneTools.external.Hammer = Hammer
cornerstoneTools.external.cornerstoneMath = cornerstoneMath
cornerstoneWADOImageLoader.external.dicomParser = dicomParser
cornerstoneWADOImageLoader.external.cornerstone = cornerstone
cornerstoneTools.init([{
moduleName: 'globalConfiguration',
configuration: {
showSVGCursors: true
moduleName: 'segmentation',
configuration: {
outlineWidth: 2
}])
let el = document.querySelector("#dicomImage")
let imageId = "wadouri:http://127.0.0.1/download/1.dcm"
cornerstone.enable(el)
cornerstone.loadAndCacheImage(imageId).then(function(image) {
cornerstone.displayImage(el, image)
</script>
AngleTool
let AngleTool = cornerstoneTools.AngleTool;
cornerstoneTools.addTool(AngleTool, {
configuration: {
drawHandles: false, //是否开启圆点，以及圆点移动轨迹, 当为false时，drawHandlesOnHover和hideHandlesIfMoving无效
drawHandlesOnHover: false, //是否隐藏圆点
hideHandlesIfMoving: false, //是否隐藏圆点移动轨迹
renderDashed: false //是否渲染实线或虚线
cornerstoneTools.setToolActive("Angle", {
mouseButtonMask: 1
ArrowAnnotateTool
let ArrowAnnotateTool = cornerstoneTools.ArrowAnnotateTool;
cornerstoneTools.addTool(ArrowAnnotateTool, {
configuration: {
getTextCallback: function(cb, eventData) {
cb(prompt("请输入值"));
changeTextCallback: function(data, eventData, cb) {
* data toolState.data
* eventData e.detail
* cb 回调函数
cb(prompt("正在改变值"));
drawHandlesOnHover: false,
hideHandlesIfMoving: false,
arrowFirst: true,
renderDashed: false,
allowEmptyLabel: false,
drawHandles: true,
cornerstoneTools.setToolActive("ArrowAnnotate", {
mouseButtonMask: 1
BidirectionalTool
双向测量工具
let BidirectionalTool = cornerstoneTools.BidirectionalTool;
cornerstoneTools.addTool(BidirectionalTool, {
configuration: {
getMeasurementLocationCallback: function(measurementData, eventData, doneCallback) {
return doneCallback();
changeMeasurementLocationCallback: function(measurementData, eventData, doneCallback) {
return doneCallback();
textBox: "123",
shadow: "",
drawHandles: true,
drawHandlesOnHover: false,
hideHandlesIfMoving: false,
renderDashed: false,
additionalData: [],
cornerstoneTools.setToolActive("Bidirectional", {
mouseButtonMask: 1
CobbAngleTool
let CobbAngleTool = cornerstoneTools.CobbAngleTool;
cornerstoneTools.addTool(CobbAngleTool, {
configuration: {
drawHandles: true, //是否显示圆点和轨迹
drawHandlesOnHover: false, //是否显示圆点
hideHandlesIfMoving: false, //是否显示圆点轨迹
renderDashed: false, //实现虚线渲染
cornerstoneTools.setToolActive("CobbAngle", {
mouseButtonMask: 1
EllipticalRoiTool
let EllipticalRoiTool = cornerstoneTools.EllipticalRoiTool;
cornerstoneTools.addTool(EllipticalRoiTool, {
configuration: {
drawHandlesOnHover: false, //是否显示圆点
hideHandlesIfMoving: false, //是否显示圆点移动轨迹
renderDashed: false, //是否虚线渲染
cornerstoneTools.setToolActive("EllipticalRoi", {
mouseButtonMask: 1
FreehandRoiTool
let FreehandRoiTool = cornerstoneTools.FreehandRoiTool;
cornerstoneTools.addTool(FreehandRoiTool, {
configuration: {
mouseLocation: {
handles: {
start: {
highlight: true,
active: true
spacing: 1,
activeHandleRadius: 2, //圆的半径大小
completeHandleRadius: 4, //重合时圆的大小
completeHandleRadiusTouch: 2,
alwaysShowHandles: true, //是否一直显示圆点
invalidColor: '#38f', //无效的颜色
currentHandle: 0,
currentTool: -1,
drawHandles: true, //不显示圆点，移动轨迹
renderDashed: false, //是否虚线渲染
cornerstoneTools.setToolActive("FreehandRoi", {
mouseButtonMask: 1
LengthTool
let LengthTool = cornerstoneTools.LengthTool;
cornerstoneTools.addTool(LengthTool, {
configuration: {
drawHandles: true, //是否显示圆点，移动轨迹
drawHandlesOnHover: false, //是否显示圆点
hideHandlesIfMoving: false, //是否显示圆点移动轨迹
renderDashed: false, //是否虚线渲染
cornerstoneTools.setToolActive("Length", {
mouseButtonMask: 1
ProbeTool
探针(PS：会根据DICOM文件切换文字，第一种是RGB范围值，第二种 Hu值(MO就是Hu值)),这个API和DragProbeTool差不多
let ProbeTool = cornerstoneTools.ProbeTool;
cornerstoneTools.addTool(ProbeTool, {
configuration: {
drawHandles: true, //是否显示圆点
renderDashed: false, //虚线渲染
cornerstoneTools.setToolActive("Probe", {
mouseButtonMask: 1,
RectangleRoiTool
let RectangleRoiTool = cornerstoneTools.RectangleRoiTool;
cornerstoneTools.addTool(RectangleRoiTool, {
configuration: {
drawHandles: true, //是否显示圆点和移动轨迹
drawHandlesOnHover: false, //是否显示圆点
hideHandlesIfMoving: false, //是否显示圆点移动轨迹
renderDashed: false, //是否虚线显示
cornerstoneTools.setToolActive("RectangleRoi", {
mouseButtonMask: 1
TextMarkerTool
标注,markers和current是必须，若没有是不起效果，current是标记markers里第几个开始
let TextMarkerTool = cornerstoneTools.TextMarkerTool;
cornerstoneTools.addTool(TextMarkerTool, {
configuration: {
markers: ["F5", "F4", "F3", "F2", "F1"],
current: 'F3',
loop: true,
ascending: false,
changeTextCallback: function(data, eventData, doneChangingTextCallback) {
data.visible = true;
data.color = "#38f";
data.text = "内容";
doneChangingTextCallback(data, prompt('改变标注:'));
cornerstoneTools.setToolActive("TextMarker", {
mouseButtonMask: 1
基本也就这些了。
