影像云膠片：Dicom純js的三維重建影像閱片器

影像云膠片主要：通過瀏覽器瀏覽Dicom影像閱片，通過多終端設備（如電腦、平板、手機），為醫生、患者及其他授權人員提供隨時隨地的影像調閱功能，打破時間和空間限制。同時，支持影像數據在不同醫療機構之間的安全共享，促進醫療協作與遠程會診的開展。主要功能：

支持標準DIcom影像的2D瀏覽，預設窗位，偽彩，序列間，序列內多種布局方式。
影像處理，提供影像翻圖、縮放、移動、透鏡、反相、旋轉、截圖等操作
影像測量，提供箭頭、直線、十字架、角度、Cobb、心胸比、橢圓、矩形、勾畫，橡皮擦、CT值等數據的測量
支持影像的三維重建，包括多平面重建，容積漫游技術（VR）、最大/小密度投影等功能
支持影像膠片打印功能，包括DR，CT等膠片自定義布局打印
支持平板，手機等移動設備的影像瀏覽

總體架構：BS（瀏覽器/服務器）架構

前端：基于HTML5、WebGL技術開發，無需安裝插件，支持PC瀏覽器、手機H5、微信小程序、支付寶小程序等多種終端。
后端：后端居于fo-dicom組件進行開發，對dicom文件訪問授權服務，訪問MD5簽名驗證等身份驗證。

核心技術棧

影像渲染引擎：使用 VTK.js 等開源框架，實現基于WebGL的高性能二維、三維影像渲染。
DICOM服務：自研或使用開源組件（如fo-dicom）實現DICOM文件的接收（C-Store）、查詢（C-Find）、檢索（C-Move）等服務。

主要代碼示例

1：前端采用有vue3+element-ui進行開發，檢查屏幕大小，以便適應不同的屏幕

<script setup>
import LeftSeriesMobile from './views/LeftSeriesMobile.vue'
import CenterImage from './views/CenterImage.vue'
import RightToolMobile from './views/RightToolMobile.vue'
import { ElMessageBox } from 'element-plus'

// 注冊resize事件監聽器 調整laytou大小
window.addEventListener('resize', function (evt) {
  if (window.innerWidth > 768) {
    ElMessageBox.alert("系統檢測到你在閱片期間對瀏覽器進行了縮放。為防止圖像顯示及測量工作不精確，強烈建議您重新打開影像！");
  }
});

</script>

<template>
  <div class="divRightMb">
    <RightToolMobile />
  </div>
  <div class="divCenterMb" id="divCenter">
    <CenterImage />
  </div>
  <div class="divLeftMb">
    <LeftSeriesMobile />
  </div>
</template>

<style scoped></style>

View Code

最終在PC端和手機端效果圖如下：

2：使用VTK.js 等開源框架，實現基于WebGL的高性能二維、三維影像渲染。

//初始化一個視窗
function ViewGridChange_LoadDicom_OneView(layout, element, showSeries) {
  //注冊事件
  element.addEventListener(IMAGE_RENDERED, IMAGE_RENDERED_CallBack);

  layout.ShowSeries = showSeries;//當前窗體顯示的序列對象
  element.ShowSeries = showSeries;//當前窗體顯示的序列對象
  let viewport;
  if (showSeries.SeriesItemType == 1) {
    viewport = {
      viewportId: layout.viewportId,
      type: showSeries.viewType,
      element: element
    }
    element.addEventListener(STACK_NEW_IMAGE, STACK_NEW_IMAGE_CallBack);
  } else {
    viewport = {
      viewportId: layout.viewportId,
      type: showSeries.viewType,
      element: element,
      defaultOptions: {
        orientation: showSeries.orientation
      },
    }
    element.addEventListener(VOLUME_NEW_IMAGE, VOLUME_NEW_IMAGE_CallBack);
  }
  return viewport;
}

View Code

?

3：實現三維十字準線工具的功能

View Code

?三維重建效果如圖所示：

4：膠片打印布局設置相關代碼

//設置中間圖像大小
let curGolb_PaperSize = "";//當前紙張大小
let curGolb_Direction = "";//當前方向
let curGolb_ShowScale = "1";//當前顯示比例
function CenterSetImageSize(paperSize, direction, showScale, isPrint) {
    SetImageSizeisPrint = isPrint;
    if (isEmpty(paperSize)) paperSize = curGolb_PaperSize;
    if (isEmpty(direction)) direction = curGolb_Direction;
    if (isEmpty(showScale)) showScale = curGolb_ShowScale;
    if (curGolb_PaperSize == paperSize && curGolb_Direction == direction && curGolb_ShowScale == showScale) {
        return;
    }
    curGolb_PaperSize = paperSize;
    curGolb_Direction = direction;
    curGolb_ShowScale = showScale;

    //根據紙張大寫設置圖像大小
    let paperObj = null;
    for (let i = 0; i < PaperSizeArys.length; i++) {
        const item = PaperSizeArys[i];
        if (item.value == paperSize) {
            paperObj = item;
            break;
        }
    }
    if (!paperObj) return;

    //設置圖像大小
    let imgWidth = 0;
    let imgHeight = 0;
    if (direction == "0") {//橫向
        imgWidth = paperObj.ImgHeight;
        imgHeight = paperObj.ImgWidth;
    } else {//縱向
        imgWidth = paperObj.ImgWidth;
        imgHeight = paperObj.ImgHeight;
    }
    let imgWidthPx = imgWidth * 96;
    let imgHeightPx = imgHeight * 96;

    let scaleFloat = 1;
    if (showScale == "-2") {//自適應寬高
        const rect = divImgElemet.parentElement.getBoundingClientRect();
        //如果寬或者高 任意一個大于了外層容器 則進行縮放
        if (imgWidthPx > rect.width || imgHeightPx > rect.height) {
            //如果寬超出的范圍更大，則以寬為基準進行縮放
            if (imgWidthPx - rect.width >= imgHeightPx - rect.height) {
                scaleFloat = rect.width / imgWidthPx;
            } else {
                //以高位基準進行縮放
                scaleFloat = rect.height / imgHeightPx;
            }
            scaleFloat = scaleFloat * 0.98;//自適應時設置圖像顯示比例98%,防止出現滾動條
        }
    } else if (showScale == "-1") {//自適應寬
        const rect = divImgElemet.parentElement.getBoundingClientRect();
        //如果寬或者高 任意一個大于了外層容器 則進行縮放
        if (imgWidthPx > rect.width) {
            //如果寬超出的范圍更大，則以寬為基準進行縮放            
            scaleFloat = rect.width / imgWidthPx * 0.98;//自適應時設置圖像顯示比例98%,防止出現滾動條
        }
    } else {
        scaleFloat = parseFloat(showScale);
    }
    imgWidth = numToFixed(imgWidth * scaleFloat, 0) + "in";
    imgHeight = numToFixed(imgHeight * scaleFloat, 0) + "in";

    if (imgWidth == divImgElemet.style.width && imgHeight == divImgElemet.style.height) {
        //圖像大小不變，如果是打印則直接執行打印
        if (SetImageSizeisPrint == true) {
            PrintCurrentPage(false);
        }
    } else {
        divImgElemet.style.width = imgWidth;
        divImgElemet.style.height = imgHeight;

        //設置圖像上字體大小
        let dfontSieze = 11;
        if (!isEmpty(PrintConfigObj.FontSize)) {
            dfontSieze = parseInt(PrintConfigObj.FontSize);
        }
        const setFontSize = numToFixed(dfontSieze * scaleFloat, 2) + "px";//標注字體為11px，乘以縮放比例
        divImgElemet.style.fontSize = setFontSize;

        //獲取元素像素大小
        document.querySelector("#spShowImgSizePx").innerHTML = divImgElemet.scrollWidth + "×" + divImgElemet.scrollHeight;
    }
}

View Code

膠片打印布局效果如圖

技術交流溝通聯系QQ：343798739；469116292

posted @ 2025-11-05 09:31 keguoquan 閱讀(68) 評論(0) 收藏舉報

刷新頁面返回頂部

keguoquan

影像云膠片：Dicom純js的三維重建影像閱片器

公告