一、Cornerstone介绍及基本案例

吃糖壮胆

已于 2024-09-13 19:39:07 修改

阅读量207

点赞数 9

分类专栏： cornerstoneJs 文章标签：前端

于 2024-09-13 19:14:34 首次发布

本文链接：https://blog.csdn.net/eamon36/article/details/142218095

版权

cornerstoneJs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

前言
一、Cornerstone介绍
二、依赖库
三、特性
四、概念解释
五、基本流程
六、简单示例

前言

提示：这里可以添加本文要记录的大概内容：

一、Cornerstone介绍

Cornerstone，这是一个轻量级的 JavaScript 库，用于在支持 HTML5 canvas 元素的现代 Web 浏览器中显示医学图像。
Cornerstone 本身并不是一个完整的应用程序，而是一个可以用作更大、更复杂的应用程序一部分的组件，需要搭配多个库进行配合。
Cornerstone已经提供了一整套的生态系统。

二、依赖库

库名	作用
cornerstone Core	提供图像渲染、加载、缓存和视口转换的中央库
cornerstone Tools	用于帮助注释、分割和测量医学图像
cornerstone WADO Image Loader	用于通过 HTTP（WADO-URI）或 DICOMWeb（WADO-RS）的 DICOM P10 实例的图像加载器
cornerstone Web Image Loader	用于 web 图像（PNG、JPEG）的图像加载器
dicom Parser	用于在现代基于 HTML5 的 web 浏览器（IE10 ）节点中解析 DICOM P10 字节流以及原始（未封装在第 10 部分中）字节流
cornerstone Math	数学和计算几何
Hammer	添加对触摸事件和手势的跨浏览器支持（移动端）

在这里插入图片描述

三、特性

基于 HTML5/Javascript 的库，可以轻松地将交互式医学图像添加到 web 应用程序中
作为从企业查看器、报告查看器等构建更复杂医疗成像应用程序的基础
支持所有基于 HTML5 的浏览器，包括手机、平板电脑和台式机
显示所有常见的医学图像格式（例如 8 位灰度、16 位灰度、RGB 颜色）
高性能图像显示（例如通过 webworker）
通过图像加载器插件设计从具有不同协议的不同系统检索图像
API 支持更改视口属性（例如 ww/wc、缩放、平移、反转）
支持 3D 成像

四、概念解释

要想弄清cornerstone, 必须先弄清楚它定义一些概念，这样才能事半功倍。

1、Enabled Elements

页面元素，就是一个div，用来承载影像显示的容器

2、Image Id

Image Id 是一个标记图像的自定义url地址，说白了可以理解成一个影像文件的URL，当调用cornerstone.loadImage(imageId)加载影像时，先会根据imageId的scheme name选择image loader（图像加载器）去加载和解析影像文件。

具体格式如下：
在这里插入图片描述

3、Image Loaders（图像加载器）

Image Loader 其实就是一个定义好的函数，实则是传入影像文件URL，然后去请求远端服务器获取dicom文件，并且解析这个dicom文件，返回一个异步的image对象，可以供displayImage函数在界面上渲染出来。其形式如下：

function loadImage(imageId) {
  ...
  const promise = new Promise((resolve, reject) => {});
  return {promise};
}

imageLoader 通过识别 scheme name 选择加载器，常见 imageId：

// wadouri - HTTP GET
const wadouriImageId ="wadouri:http://localhost:3333/wado?requestType=WADO&studyUID=1.3.6.1.4.1.25403.166563008443.5076.20120418075541.1&seriesUID=1.3.6.1.4.1.25403.166563008443.5076.20120418075541.2&objectUID=1.3.6.1.4.1.25403.166563008443.5076.20120418075557.1&contentType=application/dicom&transferSyntax=1.2.840.10008.1.2.1";
// dicomweb - HTTP GET
const dicomwebImageId ="dicomweb:http://localhost:3333/wado?requestType=WADO&studyUID=1.3.6.1.4.1.25403.166563008443.5076.20120418075541.1&seriesUID=1.3.6.1.4.1.25403.166563008443.5076.20120418075541.2&objectUID=1.3.6.1.4.1.25403.166563008443.5076.20120418075557.1&contentType=application/dicom&transferSyntax=1.2.840.10008.1.2.1";
// wadors - RESTful 风格 HTTP GET
const wadorsImageId =  "wadors:https://api.hackathon.siim.org/dicomweb/studies/1.3.6.1.4.1.14519.5.2.1.7777.9002.198875685720513246512710453733/series/1.3.6.1.4.1.14519.5.2.1.7777.9002.207203214132667549392101803048/instances/1.3.6.1.4.1.14519.5.2.1.7777.9002.327873213718058651550666129029/frames/1";
// dicomfile - 本地文件
const dicomfileImageId = "dicomfile:1";

4、Viewport

Viewport 直译是视口，可以理解为图像的显示区域，窗口。这里的Viewport是指窗口对象，包含了一些设置参数。
每个启用的元素都有一个视口，用于描述渲染图像。启用元素的视口参数可以通过getViewport()函数获取，并使用setViewport()函数进行设置。

// 获取当前的视口对象 
const viewport = cornerstone.getViewport(element); 
// 设置视口对象 
cornerstone.setViewport(element, viewport);

在这里插入图片描述

5、Images

图像对象，由cornerstone.loadImage()等方法返回，包含了像素信息和图像的元数据（如：尺寸、位深度、图像类型（如 DICOM、JPEG 等）、患者信息等。
可以被displayImage方法直接绘制到界面上。

五、基本流程

在这里插入图片描述

六、简单示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cornerstone Core 3D Reconstruction Demo</title>
    <script src="https://unpkg.com/cornerstone-core@2.3.0/dist/cornerstone.js"></script>
    <script src="https://unpkg.com/cornerstone-wado-image-loader@3.3.1/dist/cornerstoneWADOImageLoader.min.js"></script>
    <script src="https://unpkg.com/dicom-parser@1.8.7/dist/dicomParser.min.js"></script>
</head>
<body>
<div id="dicomImage" style="width: 512px;height: 512px;"></div>
<script>

    let imageId = "wadouri:" + "http://47.107.255.46:1000/wado/SERVERAE?requestType=WADO&studyUID=1.2.392.200036.9116.2.5.1.3268.2047634718.1719992618.411948&seriesUid=840.113747.1719992443.59096.130764.1965210712314854.1337&objectUid=4.59096.130764.1965210712314854.1341&contentType=application%2Fdicom";

    /***
     * @description cornerstone初始化
     * @param imageId
     */
    function cornerstoneInit(imageId) {
        let element = document.querySelector("#dicomImage");
        cornerstoneWADOImageLoader.external.cornerstone = cornerstone;  // cornerstone初始化
        cornerstone.enable(element);  // 初始并启用绘制的元素
        loadImage(element, imageId); // 加载并且绘制影像到指定元素上
    }


    /***
     * @description 加载并图像
     * @param element 承载影像的容器div元素
     * @param imageId 影像Id
     */
    function loadImage(element, imageId) {
        cornerstone.loadAndCacheImage(imageId).then(image => {
            cornerstone.displayImage(element, image); // 渲染影像到指定元素
        })
    }

    cornerstoneInit(imageId);
</script>
</body>
</html>