How to use cornerstone-core - 10 common examples

import OHIF from 'ohif-core';
import ConnectedCornerstoneViewport from './ConnectedCornerstoneViewport';
import OHIFComponentPlugin from '../OHIFComponentPlugin.js';
import cornerstoneTools from "cornerstone-tools";
import cornerstone from "cornerstone-core";
import './config';

const { StackManager } = OHIF.utils;

// Create the synchronizer used to update reference lines
OHIF.viewer.updateImageSynchronizer = new cornerstoneTools.Synchronizer('cornerstonenewimage', cornerstoneTools.updateImageSynchronizer);

// Metadata configuration
const metadataProvider = new OHIF.cornerstone.MetadataProvider();

cornerstone.metaData.addProvider(metadataProvider.provider.bind(metadataProvider));

StackManager.setMetadataProvider(metadataProvider);

class OHIFCornerstoneViewportPlugin extends Component {
  static propTypes = {
    studies: PropTypes.object,
    displaySet: PropTypes.object,
    viewportIndex: PropTypes.number,
  };

  static id = 'CornerstoneViewportPlugin';

  static init() {
    console.log('CornerstoneViewportPlugin init()');
  }

activate_tool: function () {
        var tool_name = this.model.get('_selected_tool');
        console.log('switching to tool: ' + tool_name);
        if (tool_name == 'reset') {
            this._disable_all_tools(this.viewer);
            cs.reset(this.viewer);
            var toolStateManager = ctools.getElementToolStateManager(this.viewer);
            // Note that this only works on ImageId-specific tool state managers (for now)
            toolStateManager.clear(this.viewer);
            cs.updateImage(this.viewer);
            this.model.set('_tool_state_in', '');
            this.model.set('_tool_state_out', '');
            this._setup_tools();
        } else {
            this._disable_all_tools(this.viewer);
            if (tool_name == 'zoom') {
                ctools.zoom.activate(this.viewer, 1);
            }
            if (tool_name == 'window') {
                ctools.wwwc.activate(this.viewer, 1);
            }
            if (tool_name == 'pan') {
                ctools.pan.activate(this.viewer, 1);
                ctools.zoom.activate(this.viewer, 2);
            }
            if (tool_name == 'bbox') {

function(image) {
                console.log(image);
                // 设置元素视口
                var viewport = cornerstone.getDefaultViewportForImage(
                  canvas,
                  image
                );
                // 显示图像
                cornerstone.displayImage(canvas, image, viewport);
                // 激活工具
                _this.initCanvasTools();
              },
              function(err) {

initCornerstone = () => {
    const { imageId, visibleCornerstone, index } = this.props;
    const { reEnableCornerstoneElement } = this.state;
    const element = document.getElementById(`dicomImage-${index}`);
    /* istanbul ignore next */
    if (element) {
      console.log('element ---->', element);
      cornerstoneTools.external.cornerstone = cornerstone;
      cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
      cornerstoneWebImageLoader.external.cornerstone = cornerstone;
      cornerstoneWebImageLoader.external.cornerstoneMath = cornerstoneMath;

      if (reEnableCornerstoneElement) {
        console.log('reEnableCornerstoneElement --->', reEnableCornerstoneElement);
        cornerstone.enable(element);
      }

      cornerstone.loadImage(imageId).then((image) => {
        console.log('image --->', image);
        cornerstone.displayImage(element, image);
        if (image) {
          this.setState({ reEnableCornerstoneElement: false });
          visibleCornerstone(true)
        }
      }).catch((e) => {
        console.log('errorsLoadImage --->', e);
        this.setState({ reEnableCornerstoneElement: true });
        console.log(e);
      })
    }
  };

console.log("res.body.value:", res.body.value);

            _this.baseUrl = res.body.value.filmain;
            console.log("res.body.value.filmain:", res.body.value.filmain);

            _this.exampleStudyImageIds = res.body.value.testDate.testDate1;
            console.log(
              "res.body.value.testDate.testDate1:",
              res.body.value.filmain
            );
            
            // 找到要渲染的元素
            let canvas = this.$refs.canvas;
            console.log(canvas);
            // 在 DOM 中将 canvas 元素注册到 cornerstone
            cornerstone.enable(canvas);
            // 拼接 url : cornerstoneWADOImageLoader 需要 wadouri 路径头
            const imageUrl = _this.baseUrl + _this.exampleStudyImageIds[0];
            let imageId = "wadouri:" + imageUrl;

            //  Load & Display
            cornerstone.loadAndCacheImage(imageId).then(
              function(image) {
                console.log(image);
                // 设置元素视口
                var viewport = cornerstone.getDefaultViewportForImage(
                  canvas,
                  image
                );
                // 显示图像
                cornerstone.displayImage(canvas, image, viewport);
                // 激活工具

console.log(
              "res.body.value.testDate.testDate1:",
              res.body.value.filmain
            );
            
            // 找到要渲染的元素
            let canvas = this.$refs.canvas;
            console.log(canvas);
            // 在 DOM 中将 canvas 元素注册到 cornerstone
            cornerstone.enable(canvas);
            // 拼接 url : cornerstoneWADOImageLoader 需要 wadouri 路径头
            const imageUrl = _this.baseUrl + _this.exampleStudyImageIds[0];
            let imageId = "wadouri:" + imageUrl;

            //  Load & Display
            cornerstone.loadAndCacheImage(imageId).then(
              function(image) {
                console.log(image);
                // 设置元素视口
                var viewport = cornerstone.getDefaultViewportForImage(
                  canvas,
                  image
                );
                // 显示图像
                cornerstone.displayImage(canvas, image, viewport);
                // 激活工具
                _this.initCanvasTools();
              },
              function(err) {
                alert(err);
              }
            );

function(image) {
                console.log(image);
                // 设置元素视口
                var viewport = cornerstone.getDefaultViewportForImage(
                  canvas,
                  image
                );
                // 显示图像
                cornerstone.displayImage(canvas, image, viewport);
                // 激活工具
                _this.initCanvasTools();
              },
              function(err) {

activate_tool: function () {
        var tool_name = this.model.get('_selected_tool');
        console.log('switching to tool: ' + tool_name);
        if (tool_name == 'reset') {
            this._disable_all_tools(this.viewer);
            cs.reset(this.viewer);
            var toolStateManager = ctools.getElementToolStateManager(this.viewer);
            // Note that this only works on ImageId-specific tool state managers (for now)
            toolStateManager.clear(this.viewer);
            cs.updateImage(this.viewer);
            this.model.set('_tool_state_in', '');
            this.model.set('_tool_state_out', '');
            this._setup_tools();
        } else {
            this._disable_all_tools(this.viewer);
            if (tool_name == 'zoom') {
                ctools.zoom.activate(this.viewer, 1);
            }
            if (tool_name == 'window') {
                ctools.wwwc.activate(this.viewer, 1);
            }
            if (tool_name == 'pan') {

import React, { Component } from 'react';

import ConnectedCornerstoneViewport from './ConnectedCornerstoneViewport';
import OHIF from '@ohif/core';
import PropTypes from 'prop-types';
import cornerstone from 'cornerstone-core';
import handleSegmentationStorage from './handleSegmentationStorage.js';

const { StackManager } = OHIF.utils;

// Metadata configuration
const metadataProvider = new OHIF.cornerstone.MetadataProvider();

cornerstone.metaData.addProvider(
  metadataProvider.provider.bind(metadataProvider)
);

StackManager.setMetadataProvider(metadataProvider);

const SOP_CLASSES = {
  SEGMENTATION_STORAGE: '1.2.840.10008.5.1.4.1.1.66.4',
};

const specialCaseHandlers = {};
specialCaseHandlers[
  SOP_CLASSES.SEGMENTATION_STORAGE
] = handleSegmentationStorage;

class OHIFCornerstoneViewport extends Component {
  state = {

export default function(element) {
  // Get the Cornerstone imageId
  const enabledElement = cornerstone.getEnabledElement(element);
  const imageId = enabledElement.image.imageId;

  // Get studyInstanceUid & patientId
  const study = cornerstone.metaData.get('study', imageId);
  const studyInstanceUid = study.studyInstanceUid;
  const patientId = study.patientId;

  // Get seriesInstanceUid
  const series = cornerstone.metaData.get('series', imageId);
  const seriesInstanceUid = series.seriesInstanceUid;

  // Get sopInstanceUid
  const sopInstance = cornerstone.metaData.get('instance', imageId);
  const sopInstanceUid = sopInstance.sopInstanceUid;
  const frameIndex = sopInstance.frame || 0;

  const imagePath = [
    studyInstanceUid,
    seriesInstanceUid,
    sopInstanceUid,