基于Cornerstonejs的浏览器医学影像查看

花花进修

已于 2024-08-29 15:21:40 修改

阅读量186

点赞数 3

分类专栏： DICOM医学影像查看器文章标签： html5 yarn 前端

于 2024-08-27 11:51:20 首次发布

本文链接：https://blog.csdn.net/qq_45947672/article/details/141596472

版权

DICOM医学影像查看器专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Monorepo 结构

Cornerstone3D是一个包含以下软件包的 monorepo：

/packages/core：负责渲染图像和缓存的核心库。
/packages/tools：用于操作、注释和分段渲染的工具库和工具。
/packages/streaming-image-volume-loader：用于将体积流式传输到视区并逐步加载它们。
/packages/docs：所有软件包的文档，包括指南、示例和 API 参考。

还有其他附属的软件包（例如）未包含在此 monorepo 中。从长远来看，我们正在努力将它们添加到这个 monorepo 中，以便所有软件包都位于一个位置。拥有 monorepo 可以帮助我们：Cornerstonecornerstone-wado-image-loader

共享验证和 linting 规则
保持所有包之间的依赖项同步
更容易在软件包之间链接，这通常是修复和测试 bug 所必需的

安装

如果用npm 的话

npm install @cornerstonejs/core
npm install @cornerstonejs/tools
npm install @cornerstonejs/streaming-image-volume-loader

yarn

yarn add @cornerstonejs/core
yarn add @cornerstonejs/tools
yarn add @cornerstonejs/streaming-image-volume-loader

pnpm

pnpm install @cornerstonejs/core
pnpm install @cornerstonejs/tools
pnpm install @cornerstonejs/streaming-image-volume-loader

简单的运行html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>最简单的例子</title>
    <script src="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js"></script>
    <script src="https://unpkg.com/cornerstone-wado-image-loader@4.1.5/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>
    <script src="https://unpkg.com/dicom-parser@1.8.13/dist/dicomParser.js"></script>
    <style>
      #dicom_container {
        width: 500px;
        height: 500px;
      }
    </style>
  </head>

  <body>
    <div id="dicom_container"></div>
    <script>
      cornerstoneWADOImageLoader.webWorkerManager.initialize({
        maxWebWorkers: navigator.hardwareConcurrency || 1,
        startWebWorkersOnDemand: true,
        taskConfiguration: {
          decodeTask: {
            initializeCodecsOnStartup: false,
          },
        },
        webWorkerTaskPaths: [
          "https://unpkg.com/cornerstone-wado-image-loader@4.1.5/dist/610.bundle.min.worker.js",
        ],
      });
      cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
      cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
      const element = document.getElementById("dicom_container");
      cornerstone.enable(element);
      const imageId =
        "dicomweb:https://tools.cornerstonejs.org/examples/assets/dicom/bellona/chest_lung/1.dcm";
      cornerstone.loadImage(imageId).then(function (image) {
        cornerstone.displayImage(element, image);
      });
    </script>
  </body>
</html>

我懒得写了哈哈哈

代码取自：cornerstoneJs 介绍_cornerstone.js 介绍-CSDN博客

运行结果:

还有很多工具，可以查看其官方文档

这里是官方文档给的代码

// Get Cornerstone imageIds and fetch metadata into RAM
const imageIds = await createImageIdsAndCacheMetaData({
  StudyInstanceUID:
    '1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463',
  SeriesInstanceUID:
    '1.3.6.1.4.1.14519.5.2.1.7009.2403.226151125820845824875394858561',
  wadoRsRoot: 'https://d3t6nz73ql33tx.cloudfront.net/dicomweb',
});

// Final code
const content = document.getElementById('content');
const element = document.createElement('div');
element.style.width = '500px';
element.style.height = '500px';

content.appendChild(element);

const renderingEngineId = 'myRenderingEngine';
const viewportId = 'CT_AXIAL_STACK';
const renderingEngine = new RenderingEngine(renderingEngineId);

const viewportInput = {
  viewportId,
  element,
  type: ViewportType.STACK,
};

renderingEngine.enableElement(viewportInput);

const viewport = renderingEngine.getViewport(viewportInput.viewportId);

viewport.setStack(imageIds, 60);

viewport.render();

花花进修

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
基于Cornerstonejs的浏览器医学影像查看

还有其他附属的软件包（例如）未包含在此 monorepo 中。从长远来看，我们正在努力将它们添加到这个 monorepo 中，以便所有软件包都位于一个位置。还有很多工具，可以查看其官方文档。这里是官方文档给的代码。
复制链接

扫一扫

专栏目录