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数据长度，数据值。 dicom tags
例如CT扫描生成的图像，其CT值在tag为(7FE0,0010)的element中。

cornertone-core简介

由javascript编写， 构建web端的医学影像平台中的 显示环节 。对于复杂的web端的医学影像可视化项目，底层可以依赖于cornerstone-core做二维图像渲染。

渲染一张dicom格式的图像

const result = parseDicomFile(url);
const dicom = {
  pixels: result.pixelsData
  rows: result.rows
渲染dicom图像
 
 
"<“img src=“imageURL” />”
 
"<“svg />”
 
"<“canvas />”
 使用canvas方式显示，既然知道pixel data, 只需将其值映射成屏幕像素值即可。
 由于pixel值的范围并不是屏幕像素0-255范围内，需要做相应的映射。modality lut, voi lut
 
modality lut, 像素存储值到实际输出值（OD值，CT值等）的映射，output = slope(0028, 1053) * store_value + intercept(0028, 1052)
 
voi lut ,映射函数由linear、linear_exact、sigmoid，其具体取值由voi lut function(0028, 1056)决定，缺省值为linear. voi lut 函数的参数是windowCenter(0028, 1050)和window width(0028, 1051).对于linear形式，窗宽窗位决定了一维直线上的一段区域，落在该区域的CT值（假定）将会被线性映射到0-255区间内，在其范围外的将被clamp
 
像素值的映射有一定的顺序，先做modality lut, 在做voi lut
  const {
   pixels, rows, columns} = dicom;
  const canvas = initCanvas();
  const context = canvas.getContext('2d');
  // draw
  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < coloumns; j++)  {
      const value = voiLutFunc(modalityLutFunc(pixels[i * columns + j]))
      context.save();
      context.fillStyle(value)
      context.fillRect(i, j, 1, 1);
      context.restore();
太低效
 canvasContext2d.putImageData(imageData, dx, dy)
 imageData 对象，表示一定矩形区域内的像素值。每个像数值由RGBA四分分量，每个分量的数据类型为Uint8ClampedArray(对于超出0-255区间内的值会被裁剪)。data属性为Uint8ClampedArray数组，像素值在数组中依次排列。
 imageData对象，可以由CanvasRenderingContext2D.createImageData/getImageData创建。
 
//...
// 假设图像为灰度图
const imageData = context.createImageData(rows, columns);
const storedPixels = imageData.data;
let index = 0;
  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < coloumns; j++)  {
      const grayValue = voiLutFunc(modalityLutFunc(pixels[i*columns + j]))
      storedPixels[index++] <
                                    交互和测量工具：Cornerstone.js提供了丰富的交互和测量工具，使开发者能够在图像上进行标注、测量和区域选择等操作。轻量级和高性能：Cornerstone.js是一个轻量级的库，它专注于图像加载和显示的高性能。除了基本的图像加载和显示功能，Cornerstone.js还提供了许多其他的功能和工具，如图像操作、测量、标注等。在上面的代码中，我们首先获取了一个HTML Canvas元素，然后创建了一个Cornerstone.js的图像实例。使用Cornerstone.js加载和显示图像。
                                    Dicom Parsing
一个通过 HTTP (WADO-URI) 或 DICOMWeb (WADO-RS) 的 "DICOM P10 instances" 基于 的医学影像解析程序。
可以将  与 WADO-URI servers、DICOMWeb servers 或 任何返回 DICOM P10 instances (例如:  或 自定义 servers )的任何基于 HTTP 的 servers 集成在一起。
我屮艸芔茻 全是坑!
使用过程中遇到遇到问题帮你爬坑!,看到后第一时间回复.
使用方法
2.清空 [ htdocs ] 目录下所有东西[必须清空], tdocs 在 XAMPP 安装目录下仔细找哦! 我的在: [D:\xampp\htdocs]
3.将 DICOM Parsing 下载到 htdocs 目录下 [并解压!必须解压!]
4.打开浏览器 在地址栏输入 1
    <!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.
点此下载  密码: tcg3
注意（坑）
cornerstoneWADOImageLoader.js 文件中需要自行修改 path 路径（注意：是绝对路径哦），大概在 1750 行。当时卡了好久。
var defaultConfig = {
  maxWebWorkers: navigator.hardwareConcurrency || 1,
  startWe
                                    Cornerstone简介CornerStone是一个交互式的显示，包括但不限于Dicom格式的医学影像的JavaScript库。 
Corenerstone 是一个旨在搭建一个完全基于web的医学影像平台的开源项目。Cornerstone Core组件是一个在支持HTML5 canvas元素的现代浏览器上显示医学影像的轻量级的JavaScript库。Cornerstone Core自己并不会成为一
部分参考博客：《cornerstone.js 使用总结》
基于采用url方式加载图像的代码，cornerstoneTools提供的工具组件中暂时找不到能够画出可控制颜色和粗细的直线的工具，因此考虑采用canvas方式。
loadImageData(){
     * 将图像加载到cornerstone组件
     let that = this;
Cornerstonejs官网的文档写的很简洁易懂，建议在研究其源码前先把它的文档过一遍，了解基本的设计和概念。
然后按照官网链接https://docs.cornerstonejs.org/developer-guide.html开始跑起来
这里我先用它最简单的例子研究其源码的基本结构
启动后，在浏览器里输入http://loc...
                                    接触过医学影像的程序员一定对cornerstonejs这一个工具不陌生，cornerstone有一套相对完整的体系，cornerstone是这个体系的最底层，我们主要应用到的是cornerstonetools这一个工具类，cornerstonetools里面包含了很多图像编辑工，我们主要通过cornerstonetools来操作医学影像图像。
cornerstone官方文档 
cornerstonetools官方文档 
cornerstonetools工具实例 
cornerstone体系源码 
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = ...