使用cornerstone展示一张dicom

使用cornerstone展示一张dicom

cornerstone.js里有一个核心概念：enable elements（谷歌直译为启用元素），它的本质就是一个HTML 元素（通常是div），我们所希望展示的的dic om影像就在这个元素里。

展示一个dicom影像的步骤：

1. 调用cornerstone
2. 在DOM里创建一个用于展示影像的element
3. 调用enable() API关联用于展示影像的element
4. 调用loadImage() API加载图片
5. 调用 displayImage() API 显示图片

使用案例如下：
首先安装cornerstone：
yarn add cornerstone-core

引入cornerstone：
import * as cornerstone from “cornerstone-core”

如果使用CRA创建的react项目，dom里会有一个id为root的div，可以调用enable() API直接关联该element，也可以关联自己创建的其他element，例子代码中为了简化就直接关联root的div了

  const element = document.getElementById("root")
  cornerstone.enable(element);

调用加载图片的loadImage() API之前，首先需要安装image-loader:
yarn add cornerstone-web-image-loader
并导入：

import * as cornerstoneWebImageLoader from "cornerstone-web-image-loader";
cornerstoneWebImageLoader.external.cornerstone = cornerstone;

使用的时候需要给API函数传入imageId作为参数，imageId不是dicom文件的路径，是在dicom服务上的url，我这边使用orthanc搭建了一个本地的dicom服务（详情看我的主页里orthanc相关的文章），在orthanc里任意选择一个影像的url地址作为参数传入即可：

url格式通常为：
webserver/imageloader?requestType&studyUID&seriesUID&objectUID
url会根据参数寻找对应的影像，举个例子：

https://localhost/wado?requestType=WADO&studyUID=1.2.840.113704.1.111.8264.1553388392.1&seriesUID=1.2.840.113704.1.111.8264.1553388470.12&objectUID=1.2.840.113704.1.111.2524.1553389722.12097

结合displayImage后的用法：

const ImageId = “https://.....”
cornerstone.loadImage(ImageId).then((image) => {
    cornerstone.displayImage(element, image);
}

踩坑记录：注意一点，在react框架下，这样写并不能在页面上成功显示图像，因为document.getElementById执行的时候，dom并没有渲染完成，因此element的值为null，可以用useEffect的hooks解决这个问题。

在App.js里的完整代码可以是：

import * as cornerstone from "cornerstone-core"
import * as cornerstoneWebImageLoader from "cornerstone-web-image-loader";
import { useEffect } from "react";

cornerstoneWebImageLoader.external.cornerstone = cornerstone;

function App() {

  useEffect(() => {
    const element = document.getElementById("root")
    const imageid = "https://localhost/wado?requestType=WADO&studyUID=1.2.840.113704.1.111.8264.1553388392.1&seriesUID=1.2.840.113704.1.111.8264.1553388470.12&objectUID=1.2.840.113704.1.111.2524.1553389722.12097"
    cornerstone.enable(element);
    cornerstone.loadImage(imageid).then((image) => {
        cornerstone.displayImage(element, image);
    })
  },[])

  
  return (
    <div> </div>
  );
}

export default App;