Cornerstone.js学习笔记

最新推荐文章于 2025-06-17 18:00:18 发布
最新推荐文章于 2025-06-17 18:00:18 发布
阅读量7.8k 收藏 12
点赞数 3
CC 4.0 BY-SA版权
分类专栏： DICOM 文章标签： javascript html5 Dicom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Kerrigeng/article/details/53783914
Cornerstone是一款基于JavaScript的开源库，用于在支持HTML5 canvas的浏览器中展示医学影像，如Dicom格式图像。该库提供了轻量级的解决方案来构建web端医学影像平台，并支持像素数据处理、图像缩放、旋转等功能。

Cornerstone简介

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

地址：https://github.com/chafey/cornerstone

cornerstone的数据结构

这里写图片描述

element是Html中的一个块元素。
Image是图像信息包括像素数据和病人数据。
Viewport是窗口信息：包括x，y坐标信息，缩放比例信息，图像旋转角度等信息。
Canvas是画布信息

pixel数据处理流程图

这里写图片描述

Base64编码可用于在HTTP环境下传递较长的标识信息。编码规则：把三个字符变为4个字符有一定的加密效果。
采用LUT图像查找表可以加快图像数据的加载速度。

viewport属性

这里写图片描述

scale表示图像缩放比例
Translation有X,Y两个属性分别表示图像平移的坐标
Voi有windowWidth，windowCenter两个属性表示窗宽窗位
Invert表示图像倒置
pixelReplication表示
rotation表示图像转转角度
hflip表示左右倒置
vflip表示上下倒置
modalityLUT表示查找表方法
voiLUT表示感兴趣区转换

image属性

imageId: imageId, //id
minPixelValue: 0, //最小像素值
maxPixelValue: 255, //最大像素值
slope: 1.0, //斜率
intercept: 0, //截距
windowCenter: 127, //窗位
windowWidth: 256, //窗宽
render: cornerstone.renderGrayscaleImage, //渲染灰度图像
getPixelData: getPixelData, //返回像素数组
rows: height, //行
columns: width, //列
height: height, //高
width: width, //宽
color: false, //是否单色
columnPixelSpacing: 1.0, //像素之间的纵向间隔
rowPixelSpacing: 1.0, //像素之间的横向间隔
invert: false, //倒置
sizeInBytes: width * height * 2 //字节大小
Cornerstone.js - 前端开发的基石
AvskBug的博客
09-24 1059
交互和测量工具：Cornerstone.js提供了丰富的交互和测量工具，使开发者能够在图像上进行标注、测量和区域选择等操作。轻量级和高性能：Cornerstone.js是一个轻量级的库，它专注于图像加载和显示的高性能。除了基本的图像加载和显示功能，Cornerstone.js还提供了许多其他的功能和工具，如图像操作、测量、标注等。在上面的代码中，我们首先获取了一个HTML Canvas元素，然后创建了一个Cornerstone.js的图像实例。使用Cornerstone.js加载和显示图像。
cornerstone.js 使用总结
rjj_wqq的博客
01-18 5723
cornerstone.js 使用总结 dicom 简介 dicom（Digital Imaging and Communications in Medicine), 医学影像的一组协议。包含了存储、打印、传输等。具体详细介绍。官网 dicom file, 存储包含病人、检查、影像信息的文件，通常以dcm为扩展名。文件格式 dicom file中由data elements 构成。每一个data element 都有一个tag（xxxx, xxxx）x为十六进制数，vr数据类型，vl数据长度，数据值。dic
cornerstonejs介绍
qq_45947672的博客
08-27 1925
使用 Cornerstone.js 构建医学影像应用需要安装并正确配置一系列依赖库。通过使用 npm 管理依赖、正确配置 Web Workers 以及确保版本兼容性，可以高效地开发功能丰富的医学图像查看器。特别是在微信小程序环境中开发时，需注意其特有的限制和配置要求，确保所有依赖库被正确引用和打包。
cornerStone做前端页面渲染，从入门到放弃之001【小白篇】
最新发布
Rexinx博客
06-17 407
使用cornerStone实现鼠标绘制封闭的轮廓曲线
cornerstonejs源码学习笔记（一)
omage的专栏
05-24 2690
什么是cornerstonejs Cornerstone是一个开源的致力于提供基于WEB的医学影像处理平台 https://cornerstonejs.org/ Cornerstonejs官网的文档写的很简洁易懂，建议在研究其源码前先把它的文档过一遍，了解基本的设计和概念。 然后按照官网链接https://docs.cornerstonejs.org/developer-guide.html开始跑起来 这里我先用它最简单的例子研究其源码的基本结构 启动后，在浏览器里输入http://loc...
Cornerstone.js
Major_S的博客
04-21 1031
Cornerstone.jsCornerstone.jsCornerstone.js
cornerstoneJs 介绍
jimpeo的博客
07-29 1485
cornerstone 是一个开源项目，目标是提供一个完整的基于 web 的医疗成像平台。
DicomParsing:js 解析 dicom 文件(基于 cornerstone.js 实现)
05-11
Dicom Parsing ... ... 我屮艸芔茻 全是坑! 使用过程中遇到遇到问题帮你爬坑!...使用方法 ...2.清空 [ htdocs ] 目录下所有东西[必须清空], tdocs 在 XAMPP 安装目录下仔细找哦! 我的在: [D:\xampp\htdocs] ...
基于cornerstone.js的医学影像操作（巨详细）
hdfjkgfmnhbg的博客
11-14 2519
下面介绍的库都是使用cornerstone.js操作医学影像要用到的库，有7个，不过不要怕，引的库越多，需要我们写的代码就越少。下面关于他们的介绍有些看不懂也没关系，不影响我们的开发。1至此，我们就成功编写了一个用cornerstone.js以及相关库来操作dicom医学影像的demo，下面将附上我的整体代码，其实就是上面的代码片段的拼接。">// 初始化tools// 获取用于展示影像的dom容器// 添加工具。
react-cornerstone-example:集成了与cornerstone.js库进行React以查看DICOM医学图像的示例
05-10
这是展示如何使用一个基本的例子库React.js一起显示DICOM图像。 现场演示 发展 克隆存储库 git clone cd react-cornerstone-example 安装依赖项 yarn或npm install 启动服务器 yarn start 建造 yarn build 输出将...
vue结合cornerstone.js展示DICOM图像
2201_75763401的博客
08-03 913
【代码】vue结合cornerstone.js展示DICOM图像。
CORNERSTONE基础功能介绍.mp4
05-12
CORNERSTONE是一个一站式项目管理协作平台，可帮助企业进行智能管理，解决研发项目管理痛点，可持续交付与集成，透过各个维度跟踪记录项目进度，帮助团队轻松配合完成目标。有超过100 万 +用户，从行业巨头到初创团队都在使用。体验链接：https://www.cornerstone365.cn/
webpacs框架cornerstone
06-22
webpacs框架cornerstone
Cornerstone 一个医学影像成像平台构建javascript库
qq_42943914的博客
12-07 1902
医学影像图像处理库 Cornerstone 详解
Cornerstone.js解析Dicom图像并显示
热门推荐
Gleason
06-14 2万+
爬坑史 做医疗项目这是第二个年头,常见的Dicom图像解析与显示多是桌面应用程序的活,公司的项目提出新的需求,js解析并显示Dicom图像,撸起袖子干就完了, 哎,怪我太年轻小看了Dicom,太尖端了,大大小小的坑爬了不知多少,总结下经验分享给正在爬Dicom坑的小伙伴 探索 Dicom Parser & Display 过程中了解到微云医学影像中使用了cornerston...
【前端】【cornerstone】cornerstone.js如何编辑图像/加载已有图像数据（以画直线为例）
qq_40690815的博客
08-08 2696
【前端】【cornerstone】cornerstone.js如何编辑图像（以画直线为例） 部分参考博客：《cornerstone.js 使用总结》 基于采用url方式加载图像的代码，cornerstoneTools提供的工具组件中暂时找不到能够画出可控制颜色和粗细的直线的工具，因此考虑采用canvas方式。 loadImageData(){ /* * 将图像加载到cornerstone组件 * * */ let that = this; co
cornerstoneJS加载图片（base64、矩阵）
AwoCT的博客
08-18 1157
cornerstoneJS默认加载dicom影像数据，将识别到的dicom数据转换成imageData数据，在界面上展示。故，cornerstoneJS也可直接加载imageData。imageData数据的data是一个数组，每四个元素代表一个点，四个元素分别表示R、G、B、A，即三元素 + 透明度。
CornerstoneJS快速入门
m0_64723689的博客
10-09 878
Cornerstone3D是一个轻量级 Javascript 库，用于在支持 HTML5 canvas 元素的现代 Web 浏览器中可视化医学图像。 使用 及其附带的库（如 ），您可以完成各种成像任务。
基于cornerstonejs开发移动端医学影像
lemon_sugar_的博客
03-28 995
首先主要用到了以下依赖1.前面注册Dicom文件加载器、Volume加载器、CornerStone/tool的部分可以参考一下大佬的文章 本文章的架子也是基于大佬的框架构建的主要渲染一个Stack图像需要一组imageId，这个就是图像地址可以是后台解析完的dicom流，也可以是dicom原始文件，获取到这一组imageId之后直接将这一组数据塞入到cornerstonejs创建的视图中，然后再调用视图的render方法，即可完成简单的stack图像渲染import {Enums。
cornerstone.js图像分割
04-27
<think>好的，我现在需要帮助用户找到关于cornerstone.js在图像分割方面的使用方法和示例代码。首先，我得回忆一下cornerstone.js的基本信息。Cornerstone.js是一个开源的JavaScript库，主要用于医学影像的显示和交互，它支持DICOM格式，能够方便地集成到Web应用中。但用户提到图像分割，这可能涉及到更高级的功能，比如标注、区域选择等。 根据用户提供的引用内容，引用[4]提到了一个B/S架构的图像处理平台，能够展示病灶区并提取特征信息，但可能处理速度有待优化。这可能与cornerstone.js的应用场景相关，但引用中没有直接提到cornerstone.js。因此，我需要结合自己的知识和外部资源来回答。 首先，cornerstone.js本身主要处理图像的显示和基本交互，如图像缩放、平移、窗宽窗位调整等。对于图像分割，可能需要结合其他库或工具，比如使用深度学习模型进行自动分割，或者使用标注工具手动分割。例如，引用[1]中的DeepGrow和DeepEdit模型是交互式分割模型，用户通过点击来引导分割，这可能与前端展示结合使用。 接下来，我需要考虑如何在cornerstone.js中实现图像分割的交互。可能的步骤包括加载图像、创建图层用于绘制分割结果、处理用户输入事件（如鼠标点击、拖动绘制区域）、将分割结果保存或传递给后端处理。 然后，关于示例代码，cornerstone.js的官方文档和示例可能没有直接提供分割的完整示例，但可以参考其工具（如画笔工具、矩形工具）的实现方式。用户可能需要利用cornerstoneTools库中的绘图工具，自定义分割功能。例如，使用FreehandRoiTool来绘制自由形状的ROI，然后获取这些区域的坐标数据，进行后续处理。 另外，结合引用[2]中的项目结构，可能在后端使用2D或3D分割模型，而前端用cornerstone.js展示结果。例如，用户在前端标注区域，发送到后端处理，返回分割结果，再在cornerstone.js中叠加显示。 可能的实现步骤包括： 1. 初始化cornerstone并加载DICOM图像。 2. 添加图层用于显示分割结果。 3. 创建工具让用户绘制ROI。 4. 将绘制的ROI数据保存或发送到后端。 5. 在后端使用分割模型处理，返回结果。 6. 在前端用cornerstone.js叠加显示分割结果。 需要检查是否有相关的插件或扩展，比如cornerstoneTools中的segmentation功能，或者第三方库。如果官方资源不足，可能需要参考社区项目或教程。 现在，用户可能需要具体的代码示例，比如如何初始化工具、处理绘制事件、显示分割区域。可能需要使用到cornerstone的enable模块、图层管理、工具事件监听等。 最后，确保回答结构清晰，分步骤说明，并提供相关参考资料或链接，如官方文档、示例仓库，以及可能的第三方教程。</think>以下为关于cornerstone.js图像分割应用的具体实现指南： ### 一、cornerstone.js图像分割基础实现 cornerstone.js本身专注于医学影像的**可视化与交互**，需结合以下技术实现分割功能： 1. 通过`cornerstoneTools`的标注工具获取用户输入坐标 2. 使用`Canvas`或`WebGL`叠加显示分割结果 3. 通过AJAX与后端分割算法交互（如引用[4]所述平台架构） ### 二、关键代码示例 ```javascript // 初始化标注工具 cornerstoneTools.init(); const element = document.getElementById('dicom-viewer'); // 加载DICOM图像 cornerstone.enable(element); cornerstone.loadImage('wadouri:https://example.com/image.dcm').then(image => { cornerstone.displayImage(element, image); }); // 创建分割结果显示图层 const overlayCanvas = document.createElement('canvas'); cornerstone.addLayer(element, overlayCanvas, { opacity: 0.5, viewport: cornerstone.getViewport(element) }); // 配置自由绘制工具 const tool = new cornerstoneTools.FreehandRoiTool({ configuration: { alwaysShowHandles: true, renderOutline: true } }); cornerstoneTools.addTool(tool); cornerstoneTools.setToolActive('FreehandRoi', { mouseButtonMask: 1 }); // 监听标注完成事件 element.addEventListener('cornerstonetoolstoolcompleted', (e) => { const measurement = e.detail.measurement; const coordinates = measurement.handles.points; // 获取多边形顶点坐标 sendToBackend(coordinates); // 发送至分割算法 }); ``` ### 三、进阶实现方案 1. **交互式分割集成**： - 参考引用[1]的DeepGrow模型交互模式 - 通过正/负点击事件触发分割更新 ```javascript element.addEventListener('cornerstoneclick', (e) => { const clickType = e.detail.event.ctrlKey ? 'negative' : 'positive'; const coord = cornerstone.pageToPixel(element, e.detail.event.pageX, e.detail.event.pageY); updateSegmentation(coord, clickType); // 调用分割算法 }); ``` 2. **三维可视化**： - 结合`cornerstone3D`实现体数据渲染 - 使用`vtk.js`进行三维分割结果显示 ### 四、推荐学习资源 1. [官方工具库示例](https://tools.cornerstonejs.org/examples/) 2. [医学影像处理架构参考](https://github.com/OHIF/Viewers)（支持分割标注） 3. [DICOM标准兼容性指南](https://dicom.nema.org/)
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值