基于cornerstone3D的dicom影像浏览器 第二十一章 显示DICOM TAGS

西哥写代码2025-05-24 4:05

系列文章目录

第一章 下载源码 运行cornerstone3D example
第二章 修改示例crosshairs的图像源
第三章 vite+vue3+cornerstonejs项目创建
第四章 加载本地文件夹中的dicom文件并归档
第五章 dicom文件生成png，显示检查栏，序列栏
第六章 stack viewport 显示dicom序列
第七章 在Displayer四个角落显示文字
第八章 在Displayer中显示图像方位
第九章 自动加载、清空显示、修改布局
第十章 显示标尺
第十一章 测量工具
第十二章 镜像、负像、旋转、伪彩、复位
第十三章 自定义垂直滚动条
第十四章 参考线、同步调窗、同步缩放、同步移动
第十五章 预设窗值
第十六章 工具栏svg按钮
第十七章 同步滚动
第十八章 自定义序列自动播放条
第十九章 显示overlay
第二十章 显示多帧图

文章目录

前言

读取Dicom文件中所有tags并显示到对话框中，提供查找功能。

效果如下：

一、读取标签

在image.js中增加读取标签列表的两个函数，readTagList读取普通tag, readTagSQ读取vr==SQ的序列标签

javascript 复制代码 
async readTagList() {
		let tagdata = [];
		const image = await imageLoader.loadAndCacheImage(this.imageId);
		let charset = image.data.string("x00080005") || "ISO_IR 100";
		let isUtf8 = charset.indexOf("ISO_IR 192") != -1;
		const tags2 = [];
		const tags = [];
		for (let key in image.data.elements) {
			const atag = {};
			const elem = image.data.elements[key];
			atag.tagid =
				"(" + key.substring(1, 5) + "," + key.substring(5) + ")";
			atag.tagid = atag.tagid.toUpperCase();
			atag.vr = elem.vr;
			atag.len = elem.length;
			atag.vm = image.data.numStringValues(key) || 0;
			atag.desc = DcmTagsDesc[key] || "UnkownTag";

			const isMeta = key.substring(1, 5) == "0002";

			if (key === "x7fe00010") {
				const pixLen = elem.length > 32 ? 32 : elem.length;
				atag.value = this.readNPixelAsHexString(
					image.data.byteArray,
					elem,
					pixLen
				);
			} else {
				if (atag.vr === "US" || atag.vr === "UL") {
					atag.value = image.data.uint16(key) + "";
				} else if (atag.vr === "FL") {
					atag.value = image.data.float(key) + "";
				} else if (atag.vr === "FD") {
					atag.value = image.data.double(key) + "";
				} else if (atag.vr === "SS") {
					atag.value = image.data.int16(key) + "";
				} else if (atag.vr === "SQ") {
					atag.value = "";
					if (isMeta) {
						tags2.push(atag);
					} else {
						tags.push(atag);
					}
					this.readTagSQ(
						isMeta ? tags2 : tags,
						elem.items,
						isUtf8,
						1
					);

					const endsq = {};
					endsq.tagid = "(FFFE,E0DD)";
					endsq.vr = "";
					endsq.vm = 0;
					endsq.len = 0;
					endsq.desc = DcmTagsDesc["xfffee0dd"];
					endsq.value = "";
					if (isMeta) {
						tags2.push(endsq);
					} else {
						tags.push(endsq);
					}
				} else {
					atag.value = readTagAsString(
						image.data.byteArray,
						elem.dataOffset,
						elem.length
					);
					if (atag.value) {
						atag.value = decodeChinese(atag.value, isUtf8);
					}
				}
			}

			//dicom tag第一个值不为02的放列表后面显示
			if (atag.vr !== "SQ") {
				if (isMeta) {
					tags2.push(atag);
				} else {
					tags.push(atag);
				}
			}
		}

		tagdata = [...tags2, ...tags];

		return tagdata;
	}

	readTagSQ(arr, items, isUtf8, level) {
		items.forEach(item => {
			const image = item.dataSet;
			const itemtag = {};
			itemtag.tagid =
				"(" +
				item.tag.substring(1, 5) +
				"," +
				item.tag.substring(5) +
				")";
			itemtag.tagid = getNSpace(level) + itemtag.tagid;
			itemtag.tagid = itemtag.tagid.toUpperCase();
			itemtag.len = item.length;
			itemtag.vr = "";
			itemtag.value = "";
			itemtag.vm = 0;
			itemtag.desc = DcmTagsDesc[item.tag] || "";
			arr.push(itemtag);

			for (let key in image.elements) {
				const elem = image.elements[key];
				const atag = {};
				atag.tagid =
					"(" +
					elem.tag.substring(1, 5) +
					"," +
					elem.tag.substring(5) +
					")";
				if (elem.tag === "xfffee00d")
					atag.tagid = getNSpace(level) + atag.tagid;
				else atag.tagid = getNSpace(level + 1) + atag.tagid;
				atag.tagid = atag.tagid.toUpperCase();
				atag.vr = elem.vr;
				atag.len = elem.length;
				atag.vm = image.numStringValues(elem.tag) | 0;
				atag.desc = DcmTagsDesc[elem.tag] || "UnkownTag";

				if (elem.tag === "x7fe00010") {
					const pixLen = elem.length > 32 ? 32 : elem.length;
					atag.value = this.readNPixelAsHexString(
						image.byteArray,
						elem,
						pixLen
					);
				} else {
					if (atag.vr === "US" || atag.vr === "UL") {
						atag.value = image.uint16(elem.tag) + "";
					} else if (atag.vr === "FL") {
						atag.value = image.float(elem.tag) + "";
					} else if (atag.vr === "FD") {
						atag.value = image.double(elem.tag) + "";
					} else if (atag.vr === "SS") {
						atag.value = image.int16(elem.tag) + "";
					} else if (atag.vr === "SQ") {
						atag.value = "";
						arr.push(atag);
						this.readTagSQ(arr, elem.items, isUtf8, level + 2);
						const endsq = {};
						endsq.tagid = "(FFFE,E0DD)";
						endsq.vr = "";
						endsq.vm = 0;
						endsq.len = 0;
						endsq.desc = DcmTagsDesc["xfffee0dd"];
						endsq.value = "";
						arr.push(endsq);
					} else {
						atag.value = readTagAsString(
							image.byteArray,
							elem.dataOffset,
							elem.length
						);
						
						if (atag.value) {
							atag.value = decodeChinese(atag.value, isUtf8);
						}
					}

					if (atag.vr !== "SQ") arr.push(atag);
				}
			}
		});
	}

二、显示标签列表

1. 新建组件DcmTagsWnd.vue

fullData 与 dcmtagData关联tag list数据

javascript 复制代码 
<script setup name="DcmTagsWnd">
import { ref, watch } from "vue";
import { debounce } from "@kitware/vtk.js/macros";

const dialogVisible = ref(false);
const fullData = ref(null);
const dcmtagData = ref(null);
const findText = ref("");

watch(findText, val => {
	if (val.length > 0) {
		const debouncedFilter = debounce(() => {
			const lval = val.toLowerCase();
			const newData = fullData.value.filter(item => {
				return (
					item.tagid.toLowerCase().includes(lval) ||
					item.desc.toLowerCase().includes(lval) ||
					item.value.toLowerCase().includes(lval)
				);
			});

			dcmtagData.value = newData;
		}, 300);

		debouncedFilter();
	}
});

const show = data => {
	fullData.value = data || [];
	dcmtagData.value = data || [];
	dialogVisible.value = true;
};

defineExpose({ show });
</script>

<template>
	<div class="dcmtag">
		<el-dialog
			title="DICOM TAGS"
			v-model="dialogVisible"
			width="820px"
			draggable
		>
			<el-table :data="dcmtagData" border height="600px">
				<el-table-column
					property="tagid"
					label="TagId"
					width="100"
					:show-overflow-tooltip="true"
				></el-table-column>
				<el-table-column
					property="vr"
					label="VR"
					width="50"
				></el-table-column>
				<el-table-column
					property="vm"
					label="VM"
					width="50"
				></el-table-column>
				<el-table-column
					property="len"
					label="Length"
					width="80"
				></el-table-column>
				<el-table-column
					property="desc"
					label="Description"
					width="250"
					:show-overflow-tooltip="true"
				></el-table-column>
				<el-table-column
					property="value"
					label="Value"
					width="290"
					:show-overflow-tooltip="true"
				></el-table-column>
			</el-table>
			<el-input
				v-model="findText"
				placeholder="Find Text..."
				clearable
				style="width: 300px; margin: 2px 6px"
			></el-input>
		</el-dialog>
	</div>
</template>

<style lang="scss" scoped>
.dcmtag {
	user-select: text;
}

.finder {
	display: flex;
	.finder__label {
		width: 60px;
	}
}

:deep(.el-dialog__header) {
	background: #eee;
	height: 40px;
	padding: 8px 8px;
	border: none;
	text-align: left;
}

:deep(.el-dialog__title) {
	color: #444;
}

:deep(.el-dialog) {
	padding: 0;
}

:deep(.el-table__header .is-leaf) {
	background-color: white;
	color: #444;
}

:deep(.el-table__cell) {
	background-color: white;
	color: #444;
	padding: 4px 0px;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
	background-color: lightblue;
}

:deep(.el-table--border .el-table__cell:first-child .cell) {
	padding-left: 4px;
}
</style>

2. 调用流程

  • 工具栏上添加"DICOM标签"按钮，参考前面章节
  • DisplayerArea中添加DcmTagsWnd组件
  • 选中窗口，点击按钮
  • 读取tag list, 传入DcmTagsWnd并显示对话框

view2d.vue

javascript 复制代码 
async function OnToolbarAction(action) {
	switch (action.name) {
		case "openFolder":
			{
				const fileHandles = await openFolder();
				if (Array.isArray(fileHandles)) {
					fileHandles.forEach(fileHandle => {
						fileHandle.getFile().then(file => {
							archiveStore.archiveFile(file);
						});
					});
				} else {
					console.error("openFolder, fileHandles is not an array");
				}
			}

			break;
		...
		case "setWindow":
			displayArea.value.setViewportWindow(action.wl, action.ww);
			break;
		case "dcmtag":
			displayArea.value.showDcmTagsDialog();
			break;
	}
}

DisplayerArea.vue

javascript 复制代码 
import DcmTagsWnd from "./DcmTagsWnd.vue";
const dcmTagsWnd = ref(null);
const showDcmTagsDialog = async () => {
    // console.log("showDcmTagsWnd");
    if (selected.length>0) {
        const disp = dispRefs[selected[0]];
        const tagList = await disp.getTagList();
        // console.log("showDcmTagsWnd tagList:", tagList);
        dcmTagsWnd.value.show(tagList);
    }
}

<template>
	<div class="displayarea">
		<DcmTagsWnd ref="dcmTagsWnd" />
		...
</template>

总结

  1. 遍历dicom文件tag，获取tag list
  2. 对话框中显示tag list，并提供查找功能
相关推荐
会一丢丢蝶泳的咻狗2 分钟前
Sass实现，蛇形流动布局
前端·css
攀登的牵牛花6 分钟前
前端向架构突围系列 - 状态数据设计 [8 - 4]：有限状态机 (FSM) 在复杂前端逻辑中的应用
前端
Lsx_7 分钟前
前端视角下认识 AI Agent 和 LangChain
前端·人工智能·agent
biyezuopinvip28 分钟前
基于Spring Boot的企业网盘的设计与实现（任务书）
java·spring boot·后端·vue·ssm·任务书·企业网盘的设计与实现
陈振wx:zchen200833 分钟前
JavaScript
javascript·js
我是伪码农41 分钟前
Vue 智慧商城项目
前端·javascript·vue.js
不认输的西瓜43 分钟前
fetch-event-source源码解读
前端·javascript
用户39051332192881 小时前
前端性能杀手竟然不是JS?图片优化才是绝大多数人忽略的"降本增效"方案
前端
朱昆鹏1 小时前
开源 Claude Code + Codex + 面板 的未来vibecoding平台
前端·后端·github
lyrieek2 小时前
pgadmin的导出图实现，还在搞先美容后拍照再恢复？
前端
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08OpenClaw Chrome扩展使用教程 - 浏览器中继控制09openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决10Vue-skills的中文文档