当前位置：首页 > news >正文

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

news 来源：原创 2025/5/23 5:02:59

系列文章目录

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

文章目录

系列文章目录
前言
一、读取标签
二、显示标签列表
- 1. 新建组件DcmTagsWnd.vue
- 2. 调用流程
总结

前言

读取Dicom文件中所有tags并显示到对话框中，提供查找功能。
效果如下：
在这里插入图片描述

一、读取标签

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

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数据

<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-dialogtitle="DICOM TAGS"v-model="dialogVisible"width="820px"draggable><el-table :data="dcmtagData" border height="600px"><el-table-columnproperty="tagid"label="TagId"width="100":show-overflow-tooltip="true"></el-table-column><el-table-columnproperty="vr"label="VR"width="50"></el-table-column><el-table-columnproperty="vm"label="VM"width="50"></el-table-column><el-table-columnproperty="len"label="Length"width="80"></el-table-column><el-table-columnproperty="desc"label="Description"width="250":show-overflow-tooltip="true"></el-table-column><el-table-columnproperty="value"label="Value"width="290":show-overflow-tooltip="true"></el-table-column></el-table><el-inputv-model="findText"placeholder="Find Text..."clearablestyle="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

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

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>