CornerStone —— 医学影像显示的JavaScript库简介

本文是由Markdown语法编辑器编辑完成。

1. CornerStone

CornerSone is a JavaScript library to display interactive medical images including but not limited to DICOM.
CornerStone是一个交互式的显示,包括但不限于Dicom格式的医学影像的JavaScript库。

CornerSone项目在Github上的链接地址为:https://github.com/chafey/cornerstone

关于Cornerstone Core:
Cornerstone is an open source project with a goal to deliver a complete web based medical imaging platform. Cornerstone Core component is a lightweight JavaScript library for displaying medical images in modern web browsers that support the HTML5 canvas element. Cornerstone Core is not meant to be a complete application itself, but instead a component that can be uses as part of larger more complex applications.

Corenerstone 是一个旨在搭建一个完全基于web的医学影像平台的开源项目。Cornerstone Core组件是一个在支持HTML5 canvas元素的现代浏览器上显示医学影像的轻量级的JavaScript库。Cornerstone Core自己并不会成为一个独立的应用程序,但是会作为一个更大更复杂的应用程序的一个组件。

以下的这个demo是基于Cornerstone的库而完成的。从这个demo中也可以看到基于Cornerstone具有的操作医学影像的功能。

Demo的首页是一个列表页,列表中已经有提前上传好的影像资料库。如图所示:
这里写图片描述

列表页按患者进行排列,依次显示每一位患者的Patient Name, Patient ID, Study Date, Modality, Study Description和Image的数量。

接下来,点击某一位患者,可以显示该患者的影像。
这里写图片描述

如图所示,页面大致可以分为三个部分:
左边是序列的缩略图,这个检查包含多少个序列,就会生成多少张缩略图;
偏上部分是工具栏,可以对影像进行基本的二维阅览,如Pan/Zoom/WWWL, 测量,自动播放等;
中间部分是最主要的影像呈现部分。

未完待续……

  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
好的,以下是一个用cornerstone.js写的简单的dcm影像显示的demo,您可以参考代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Demo: Dicom Image Display with Cornerstone.js</title> <style> #dicomImage { border: 1px solid black; } </style> </head> <body> <div> <h1>Demo: Dicom Image Display with Cornerstone.js</h1> <p>Select a DICOM image file to display:</p> <input type="file" id="fileInput"> </div> <div> <h3>DICOM Image:</h3> <canvas id="dicomImage"></canvas> </div> <script src="https://unpkg.com/cornerstone-core/dist/cornerstone.js"></script> <script src="https://unpkg.com/cornerstone-math/dist/cornerstoneMath.js"></script> <script src="https://unpkg.com/cornerstone-tools/dist/cornerstoneTools.js"></script> <script src="https://unpkg.com/cornerstone-wado-image-loader/dist/cornerstoneWADOImageLoader.js"></script> <script> const fileInput = document.getElementById('fileInput'); const dicomImage = document.getElementById('dicomImage'); fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file); cornerstone.loadImage(imageId).then((image) => { cornerstone.displayImage(dicomImage, image); }); }); </script> </body> </html> ``` 此代码将创建一个简单的页面,其中有一个文件上传按钮,用于选择要显示的DICOM图像文件。一旦选择了文件,代码将使用Cornerstone.js和CornerstoneWADOImageLoader.js加载显示图像。 请注意,此代码仅用于演示目的,实际应用中可能需要更多的错误处理和用户交互。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

inter_peng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值