深圳网站建设工作室_徐州建站网页建设_如何出售自己的域名_谷歌排名

        与医学、医院相关的项目搞起来真的是要命。。。完全生疏的方向 。。。其中合作伙伴说，让我用AI直接生成代码就可以了。。我就在想，区域链、人工智能、AI等等这些喙头啥时候是个头儿。。。资本用来圈钱的各种概念总是那么不务实！

        DICOM是医学图像和相关信息的国际标准，它定义了满足临床需要的可用于数据交换的医学图像格式，被广泛用于放射、成像的诊疗诊断设备。也就是说，在医院放射科使用的设备上读取的影像基本都是DICOM格式，包括CT、MRI、超声等的讲解及技术规范。咱就不展开讨论了，网上一堆，大家去查阅即可。

        咱的项目基本都是趋于实战，很少讲原理，因为有些原理讲起来可能我就没那么多心血来写作了，那么大篇幅的进行整理及输出。我还有我的事情要做。。。

        下来就讲讲如何在web端进行dicom图像的展示有相关操作。本次分享实现两点功能：

1、影像加载

2、影像标注

其他功能后续再一一补充实现 。

        项目安装以下依赖： 

"cornerstone-core": "^2.6.1",
"cornerstone-math": "^0.1.10",
"cornerstone-tools": "^6.0.10",
"cornerstone-wado-image-loader": "^4.13.2",
"dicom-parser": "^1.8.21",
"hammerjs": "^2.0.8",

在你项目中创建一个Vue组件页面粘贴以下代码实现一个预览组件：

<template><div v-loading="loading" class="dicom" ref="dicomImage"><span v-if="loadFailed">加载失败</span></div>
</template>
<script>
import cornerstone from 'cornerstone-core';
import dicomParser from 'dicom-parser';
import wadoImageLoader from 'cornerstone-wado-image-loader';
import cornerstoneMath from "cornerstone-math"
import cornerstoneTools from "cornerstone-tools"
import Hammer from "hammerjs"// 配置 Web Worker
var config = {webWorkerPath: "cornerstone-wado-image-loader/cornerstoneWADOImageLoaderNoWebWorkers.bundle.min.js",taskConfiguration: {decodeTask: {codecsPath: "cornerstone-wado-image-loader/cornerstoneWADOImageLoaderCodecs.js"}}
};
wadoImageLoader.webWorkerManager.initialize(config);cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneTools.external.Hammer = Hammer;// 初始化cornerstoneTools工具
cornerstoneTools.init({mouseEnabled: true,// 当元素被启用时，是否监听鼠标事件touchEnabled: true, // 当元素被启用时，是否监听触摸事件globalToolSyncEnabled: true,// 全局工具同步showSVGCursors: true, // 显示svg光标autoResizeViewports: true,// 自动调整视口大小lineDash: [4, 4] // 虚线样式
});wadoImageLoader.external.cornerstone = cornerstone;
wadoImageLoader.external.dicomParser = dicomParser;export default {name: 'DicomPreview',props: {imageId: {type: String,required: true}},data() {return {loading: true,loadFailed: false,}},// watch:{// imageId(newValue,oldValue){//  var url = `wadouri:${this.imageId}`;//  this.loadAndViewImage(url);// } // },mounted() {var url = `wadouri:${this.imageId}`;this.loadAndViewImage(url);},methods: {loadAndViewImage(imageId) {let element = this.$refs.dicomImageconst lengthProps = {configuration: {handleRadius: 1,drawHandlesOnHover: true,hideHandlesIfMoving: true,digits: 2}};const LengthTool = cornerstoneTools.LengthTool;//添加获取到的窗宽,窗高工具cornerstoneTools.addTool(LengthTool, lengthProps);cornerstoneTools.addToolForElement(element, LengthTool, lengthProps);// 绑定工具操作功能到鼠标左键cornerstoneTools.setToolActive('Length', {mouseButtonMask: 1})//所有工具在此行前添加cornerstone.enable(element)cornerstone.loadAndCacheImage(imageId).then((image) => {var viewport = cornerstone.getDefaultViewportForImage(element, image);cornerstone.displayImage(element, image, viewport);this.loading = falsethis.loadFailed = falsethis.$nextTick(this.enableLengthTools())}, (err) => {console.log(err)this.loading = falsethis.loadFailed = true});},enableLengthTools() {},clearTools() {cornerstoneTools.clearToolState(element, 'Length');cornerstone.updateImage(element); // 刷新图像}}
}
</script>
<style lang="scss" scoped>
.dicom {height: 100%;width: 500px;height: 500px;
}
</style>

在使用的父页面中引入此子组件使用，并传参数即可：

import DicomPreview from './dicom/index.vue'components: {DicomPreview
},data() {return {lineChartData: lineChartData.newVisitis,imageIds: [{dicIds: 'http://47.107.255.46:1000/wado/SERVERAE?requestType=WADO&studyUID=1.2.392.200036.9116.2.5.1.3268.2047634718.1719992618.411948&seriesUid=840.113747.1719992443.59096.130764.1965210712314854.1337&objectUid=4.59096.130764.1965210712314854.1341&contentType=application%2Fdicom'}, {dicIds: "https://tools.cornerstonejs.org/examples/assets/dicom/bellona/chest_lung/1.dcm"}]}
},<el-row :gutter="20"><el-col :span="12"><div class="w-100 flex-row"><dicom-preview :imageId="imageIds[1].dicIds" style="width: 500px;height:500px;"></dicom-preview></div></el-col><el-col :span="12"><dicom-preview :imageId="imageIds[0].dicIds" style="width: 500px;height:500px;"></dicom-preview></el-col>
</el-row>

如你所见，为啥两张影像显示的单位不同呢？来我们分析一下源码显示单位的逻辑：

第一个影像数据为：

第二个影像数据为：

可以看到，虽然都为影像图片，但是有些输出设备输出dicom时未携带横纵像素间距导致无法将pixel转为mm单位所致！

再贴两个页面，你自己创建两个html文件，将代码分别粘贴进去，使用浏览器打开查看体验即可：

 web.html页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/hammerjs@2.0.8/hammer.js"></script><script src="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js"></script><script src="https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.min.js"></script><script src="https://unpkg.com/cornerstone-wado-image-loader@4.1.3/dist/cornerstoneWADOImageLoader.bundle.min.js"></script><script src="https://unpkg.com/cornerstone-web-image-loader@2.1.1/dist/cornerstoneWebImageLoader.min.js"></script><script src="https://unpkg.com/cornerstone-tools@6.0.7/dist/cornerstoneTools.js"></script><script src="https://unpkg.com/dicom-parser@1.8.13/dist/dicomParser.min.js"></script>
</head>
<body><!-- 用于加载图片的div区域 --><div id="dicomImage" style="width: 512px;height: 512px;"></div>
</body>
<script>// 注册并挂载cornerstone及其cornerstoneTools，固定操作cornerstoneTools.external.cornerstone = cornerstone;cornerstoneTools.external.cornerstoneMath = cornerstoneMath;cornerstoneTools.external.Hammer = Hammer;cornerstoneWADOImageLoader.external.dicomParser = dicomParser;cornerstoneWADOImageLoader.external.cornerstone = cornerstone;// imageId就是cornerstone要求的.dcm图片地址,例如：var imageId = "wadouri:http://127.0.0.1:6699/ctdcm1.dcm";var imageId = "wadouri:https://tools.cornerstonejs.org/examples/assets/dicom/bellona/chest_lung/1.dcm";// 初始化cornerstoneTools工具cornerstoneTools.init();// 获取要用于加载图片的div区域var element = document.getElementById('dicomImage');//激活获取到的用于图片加载的区域cornerstone.enable(element);// 从cornerstoneTools库中获取窗宽,窗高工具const WwwcTool = cornerstoneTools.WwwcTool;//添加获取到的窗宽,窗高工具cornerstoneTools.addTool(WwwcTool);// 绑定工具操作功能到鼠标左键cornerstoneTools.setToolActive('Wwwc', {mouseButtonMask: 1})//使用loadAndCacheImage()方法加载并缓存图片，然后使用displayImage()方法显示图片。cornerstone.loadAndCacheImage(imageId).then(function (image) {cornerstone.displayImage(element, image);})
</script>
</html>

web2.html页面：

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CornerstoneTools Demo</title><script src="https://unpkg.com/cornerstone-core@2.3.0/dist/cornerstone.js"></script><script src="https://unpkg.com/cornerstone-wado-image-loader@3.3.1/dist/cornerstoneWADOImageLoader.min.js"></script><script src="https://unpkg.com/dicom-parser@1.8.7/dist/dicomParser.min.js"></script><script src="https://unpkg.com/cornerstone-tools@6.0.7/dist/cornerstoneTools.js"></script><script src="https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.min.js"></script>
</head>
<body>
<div id="dicomImage" style="width: 512px;height: 512px;"></div>
<button onclick="EllipticalRoiToolFun()">椭圆测量</button>
<button onclick="removeTool()">清除工具</button>
<button onclick="hideLabel()">隐藏标注</button>
<button onclick="showLabel()">显示标注</button>
<button onclick="getToolInfo()">获取指定工具的信息</button>
<button onclick="clearMarker()">清除图像上的所有标注</button>
<script>let imageId = "wadouri:" + "http://47.107.255.46:1000/wado/SERVERAE?requestType=WADO&studyUID=1.2.392.200036.9116.2.5.1.3268.2047634718.1719992618.411948&seriesUid=840.113747.1719992443.59096.130764.1965210712314854.1337&objectUid=4.59096.130764.1965210712314854.1341&contentType=application%2Fdicom";let element = document.querySelector("#dicomImage");/**** @description cornerstone初始化* @param imageId*/function cornerstoneInit(imageId) {cornerstoneTools.external.cornerstone = cornerstone;cornerstoneTools.external.cornerstoneMath = cornerstoneMath;cornerstoneWADOImageLoader.external.cornerstone = cornerstone;// 初始化cornerstoneToolscornerstoneTools.init({mouseEnabled: true,// 当元素被启用时，是否监听鼠标事件touchEnabled: false, // 当元素被启用时，是否监听触摸事件globalToolSyncEnabled: true,// 全局工具同步showSVGCursors: true, // 显示svg光标autoResizeViewports: true,// 自动调整视口大小lineDash: [4, 4] // 虚线样式});cornerstone.enable(element);  // 初始并启用绘制的元素const ApiTool = cornerstoneTools[`EllipticalRoiTool`];cornerstoneTools.addToolForElement(element, ApiTool);  // 给指定启用元素添加指定工具// cornerstoneTools.addTool(ApiTool);或者，直接给全部启用元素添加指定工具loadImage(element, imageId); // 加载并且绘制影像到指定元素上}/**** @description 加载并图像* @param element 承载影像的容器div元素* @param imageId 影像Id*/function loadImage(element, imageId) {cornerstone.loadAndCacheImage(imageId).then(image => {cornerstone.displayImage(element, image); // 渲染影像到指定元素})}/**** @description 椭圆测量* @constructor*/function EllipticalRoiToolFun(){const options = {mouseButtonMask: 1};setToolActive('EllipticalRoi',options);}/****@description 获取已添加的指定工具 , 可以查看工具当前的mode状态* mode: "disabled" , "active"*/function getTool(toolName){const tools = cornerstoneTools.getToolForElement(element, toolName);console.log("已添加的工具 " + toolName +" 信息")return tools}/**** @description 给指定启用元素激活指定工具* @param toolName 工具名* @param element 影像渲染元素* @param options 公户配置项*/function setToolActive(toolName,options){cornerstoneTools.setToolActiveForElement(element, toolName, options);// cornerstoneTools.setToolActive(toolName, options); 或者，直接激活全部启用元素的指定工具}/****@description 清除工具*/function removeTool() {cornerstoneTools.removeToolForElement(element,'EllipticalRoi'); // 给指定启用元素清除指定工具// cornerstoneTools.removeTool(toolName); 或者，直接清除全部启用元素的指定工具}/**** @description 隐藏标注* @desc 特此说明,当需要重新隐藏标注时，直接将工具状态禁用即可* @param toolName 工具名*/function hideLabel(){cornerstoneTools.setToolDisabledForElement(element,'EllipticalRoi');// cornerstoneTools.setToolDisabled(toolItem.toolName); 或者，直接将全部的启用元素隐藏标注cornerstone.updateImage(element);   // 刷新图像,}/**** @description 显示标注* @desc 特此说明,当需要重新显示标注时，需要重新将所有工具激活即可* @param toolName 工具集*/function showLabel(toolName){EllipticalRoiToolFun();cornerstone.updateImage(element);  // 刷新图像 , 需要重新刷新}/**** @description 获取指定工具的信息* @constructor*/function getToolInfo() {console.log(getTool('EllipticalRoi'));}/**** @description 清除图像上的所有标注,永久清除* @desc 当需要清除图像上显示的测量标注时，需要先清空工具的 state 记录*/function clearMarker(){cornerstoneTools.clearToolState(element, 'EllipticalRoi');cornerstone.updateImage(element); // 刷新图像}cornerstoneInit(imageId);
</script>
</body>
</html>

 

 右键使用浏览器打开预览即可。细节的代码注释则不进行讲解了，自己研究查看。

下面给一些官方API文档连接：打开自行研读哦。

Cornerstone Tools: Examples

Overview | Cornerstone.js