let context = itemCanvas.getContext("2d");
let ImageDataObj = new ImageData(enableElement.image.getPixelData(), enableElement.image.width, enableElement.image.height);
context.putImageData(ImageDataObj, 0, 0);
【前端】【cornerstone】cornerstone.js如何编辑图像（以画直线为例）部分参考博客：《cornerstone.js 使用总结》基于采用url方式加载图像的代码，cornerstoneTools提供的工具组件中暂时找不到能够画出可控制颜色和粗细的直线的工具，因此考虑采用canvas方式。loadImageData(){ /* * 将图像加载到cornerstone组件 * * */ let that = this; co
Cornerstone.js提供了一个完整的基于Web的医学成像平台。 该存储库包含Cornerstone.js“核心”组件，这是一个轻量级JavaScript库，用于在支持HTML5 canvas元素的现代Web浏览器中显示医学图像。
Cornerstone Core并不是要本身就是一个完整的应用程序，而是可以用作更大，更复杂的应用程序的一部分的组件。 有关使用各种Cornerstone库构建简单的研究查看的示例，请参见 。
Cornerstone Core与用于存储图像像素的实际容器以及用于获取图像数据的传输机制无关。 实际上，Cornerstone Core本身无法读取/解析或加载图像，而只能依靠一个或多个来起作用。
这样做的目的是避免因为图像以各种格式（包括专有格式）存储而使开发人员无法在单个容器中工作和运输（例如DICOM）。 通过提供关于容器和运输的灵活性
接触过医学影像的程序员一定对cornerstonejs这一个工具不陌生，cornerstone有一套相对完整的体系，cornerstone是这个体系的最底层，我们主要应用到的是cornerstonetools这一个工具类，cornerstonetools里面包含了很多图像编辑工，我们主要通过cornerstonetools来操作医学影像图像。
cornerstone官方文档
cornerstonetools官方文档
cornerstonetools工具实例
cornerstone体系源码
之所以前段时间去了解DICOMweb，也是因为偶然机会，先是接触到了Cornerstone，然后从CornerStone发现了OHIF Viewer。学习OHIF Viewer时，发现OHIF Viewer后台首选DICOMweb 接口，从第三方PACS服务器查询和获取影像。
可能不是所有同学都已经了解OHIF Viewer，这里简单梳理从Cornerstone到OHIF Viewer的脉络体系...
简单介绍cornerstone.js
人工智能医疗方向的研究是基于大量的医疗影像进行深度学习训练，训练的前提也就是标注，医疗影像有各种格式的图像，但是常用的是dicom图像，后缀.dcm，这种格式web是不支持的，cornerstone.js的作用是将dcm绘制到指定的canvas容器上。cornerstone.js只能应用于服务环境下。
cornerstone.js的使用就不做介绍了，注重介绍一...
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
【前端】【cornerstone】【未完善】cornerstone重新加载图像尝试——拒绝花里胡哨问题正常加载图像尝试方法方法1【无效】：直接修改columnPixelSpacing、rowPixelSpacing方法2【无效】：生成新的viewport方法3【有效】：还是采用加载图像的老办法用loadimage重新加载一遍
cornerstone源码：
cornerstone/src/reset.js
cornerstone/src/internal/getDefaultViewport.js
npm install --save react-cornerstone-viewport
# # Yarn
yarn add react-cornerstone-viewport
import React , { Component } from 'react'
import CornerstoneViewport from 'react-cornerstone-viewport'
class Example extends Component {
render ( ) {
return (
< CornerstoneViewport>
麻省理工学院:copyright:
壮举（铅笔）：添加“graphiteWidth”选项
perf（铅笔）：删除石墨宽度选项突破性变化：graphiteWidth 选项已被删除。 出于性能原因，始终使用默认的 10 毫米石墨宽度。
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
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = ...
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DicomTest</title>
<link rel="stylesheet" href="css/bo
<h1>Demo: Dicom Image Display with Cornerstone.js</h1>
<p>Select a DICOM image file to display:</p>
<input type="file" id="fileInput">
<h3>DICOM Image:</h3>
<canvas id="dicomImage"></canvas>
<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加载和显示图像。
请注意，此代码仅用于演示目的，实际应用中可能需要更多的错误处理和用户交互。
