Cornerstone.js使用相关

Posted 冯阳阳的博客¥

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Cornerstone.js使用相关相关的知识,希望对你有一定的参考价值。

官网地址:https://github.com/chafey/cornerstone

简介:

Cornerstone is an open source project with a goal to deliver a complete web based medical imaging platform. This repository contains the Cornerstone Core component which 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 used as part of larger more complex applications. See the OHIF Viewer for an example of using the various Cornerstone libraries to build a simple study viewer.

Cornerstone Core is agnostic to the actual container used to store image pixels as well as the transport mechanism used to get the image data. In fact, Cornerstone Core itself has no ability to read/parse or load images and instead depends on one or more ImageLoaders to function. The goal here is to avoid constraining developers to work within a single container and transport (e.g. DICOM) since images are stored in a variety of formats (including proprietary). By providing flexibility with respect to the container and transport, the highest performance image display may be obtained as no conversion to an alternate container or transport is required. It is hoped that developers feel empowered to load images from any type of image container using any kind of transport. See the CornerstoneWADOImageLoader project for an example of a DICOM WADO based Image Loader.

基石是一个开源项目,目标是提供一个完整的基于网络的医学成像平台。该存储库包含Cornerstone核心组件,它是一个轻量级的JavaScript库,用于在支持HTML5 canvas元素的现代Web浏览器中显示医学图像。Cornerstone Core并不意味着是一个完整的应用程序本身,而是一个可以用作更大更复杂应用程序的一部分的组件。有关使用各种Cornerstone库构建简单的学习查看的示例,请参阅 OHIF Viewer

Cornerstone Core与用于存储图像像素的实际容器以及用于获取图像数据的传输机制无关。事实上,Cornerstone Core本身无法读取/解析或加载图像,而是依赖于一个或多个ImageLoaders来运行。这里的目标是避免限制开发人员在单个容器和传输(例如DICOM)中工作,因为图像以各种格式(包括专有)存储。通过提供关于容器和运输的灵活性,可以获得最高性能的图像显示,因为不需要转换到替代容器或运输。希望开发人员有权使用任何类型的传输从任何类型的图像容器加载图像。

这是关于Cornerstone的简介,简单来说,这并不是一个应用程序,只是一个js的插件,也就是一个库,简称基石。。 基石实际封装好了一些列Dicom图像的操作,但关于获取图像,解析图像等都依赖于基石库种的其他.js文件。

开始正文:

      最新一个新的需求就是:在canvas上绘制Dicom图像,之前的图像都是jpg或者png的。我们的网站是一个医疗的网站,医生上传Dicom图像,通过第三方Dicom解析工具将dicom图像解析还原为jpg,从而绘制在画布上。我认为思路其实是一样的,都是解析dicom像素的每一个信息,然后再绘制画布。但是涉及到两个问题:1.图像逐像素解析 2.当发生交互时,频繁的与后台进行数据交换,例如调节窗宽窗位,前端传递数值,后台根据wwwc算出响应的显示值,再传给前端,在绘制。以上这个流程是当发生交互时使用的dicom转jpg的思路,如果没有交互,只是显示,那么直接后台解析dicom然后转jpg即可,但是现在需要调节窗宽窗位,大小缩放等等,就需要在canvas上直接绘制Dicom图像(还有一种方法,窗宽窗位百度了一下原理,调节像素灰度值,我们可以根据窗宽窗位直接调节灰度jpg的像素灰度即可,但是公式?例如窗宽窗位 600/1000,那么对应图像的灰度应该多少?对于Ddicom图像窗宽窗位的调整是有公式的,jpg灰度对应窗宽窗位的值的对应关系还没有找到,http://blog.csdn.net/lifegame/article/details/6388609,这个链接是调节图像灰度的,里边给出了一套公式,但并不具备科学依据,产品最终是给医生用的,必须要准确(链接不知道怎么整动态的,直接复制粘贴))。

    自己解析Dicom然后进行像素操作有难度,开始查一些相关的资料,有一些公司在做这方面,做得比较好的,而且乐于分享技术的 微云影像,虽说分享的技术太深,并且太少难于理解,但是还是找到了一些答案——CornerStone.js 

    微云的技术文档:http://www.weiyunyingxiang.com/artical8.htm。没有什么具体的分享,但是有一个大概的思路。后来开始看cornerstone的Github链接,网上没有什么这方面的资料,看了一些网站都是用这个库做的,这个库并不能满足需求,其中的一些例子只是一些操作,但是如何把dicom绘制到canvas上并没有找到,有个例子,他是把dicom图像直接解析成Base64编码,直接一个字符串显示好几十行的编码,并没有解析显示的具体操作,后来偶然间点击到了另外一个库,也是基石相关的,但是可以解决实际问题 。

cornerstoneWADOImageLoader

 https://github.com/chafey/cornerstoneWADOImageLoader具体的可以自己去看,但是几点遇到的问题在这里说明一下:

1.imageids,图像的唯一标识,原文是根据不同的id调用不同的imageloads,最开始理解是要根据自己的id去找适配的imageload,最后发现其实基石已经做好了适配,你只要提供id,他会根据你的id自动使用对应的图像加载器。id:url,相对路径,绝对路径等。注意一个问题,就是跨域的问题,我最开始用他的例子,https的页面,去请求一个http协议的dicom,报错了,跨域的问题,最终用到我自己的项目中,没有跨域,所以没有问题。

2.服务端使用,本地使用是会报错的,因为本地是没有域的概念存在的,所以同一域也不存在,报各种错误,在服务端正常运行。

3他的几个例子代码相对逻辑不复杂,但是如果你要深究源码的话,那我估计是不可能的,我的项目调用了大约6.7个js,每一个js都有上万行的代码,先不说代码量,代码里边没有注释,随便定义的一个变量,都搞得很复杂,我认为不需要了解具体实现,只要调用接口api。

具体的东西不能全部说完,需要自己去看,看懂流程,再去测试。qq 1151234457 可以交流,这个库相当庞大,可以一起交流。

以上是关于Cornerstone.js使用相关的主要内容,如果未能解决你的问题,请参考以下文章

Hexo瞎折腾系列 - 添加GitHub彩带和GitHub Corner

如何解决 JQuery Mobile `ui-corner-all` Corners

如何使用jQuery Round Corner插件制作圆角?

如何使用 XML 获得负半径 Android Round Corner

iOS 中 Cornered UIImageView 中不需要的内容

STA之RC Corner再论