🔆 引言
在刚刚接触Cornerstone时，虽然使用官方案例中的代码成功展示了影像图片，但是案例中的dicom文件由 dicomweb-client 提供，ImageID的格式也过于复杂。往往我们本地有一组Dicom文件或者后台有一组Dicom文件，我们并不确定能否使用Cornerstone渲染它们。
本文将围绕本地加载渲染Dicom文件的简单实现来展开。
⛳️ 实现
第一步：文件准备
在本地新建一个文件demo，并在demo文件夹内新建一个文件夹，命名为files，里面存放需要渲染的dicom文件。
第二步：创建请求接口服务
使用node启动一个简易的文件请求服务
在files文件夹同级目录下新建 serve.js 文件，用于启动请求服务。
const app = express();
const port = 3000;
// 使用cors中间件处理请求跨域问题
app.use(cors());
// 定义接口1：获取文件列表数组
app.get('/files', (req, res) => {
const directoryPath = path.join(__dirname, 'files'); // 指定目录路径
fs.readdir(directoryPath, (err, files) => {
if (err) {
res.status(500).send('Unable to scan directory: ' + err);
return;
}
res.json(files); // 返回文件名的数组
});
});
// 定义接口2：获取某个指定的文件
app.get('/files/:name', (req, res) => {
const fileName = req.params.name;
const filePath = path.join(__dirname, 'files', fileName); // 假设文件存储在项目的/files目录下
fs.readFile(filePath, (err, data) => {
if (err) {
res.status(404).send('File not found');
return;
}
res.send(data);
});
});
// 启动服务
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
第三步：启动服务
在demo文件夹下执行： node ./serve.js 启动文件请求接口。
当在浏览器直接访问某个文件路径时：http://localhost:3000/files/a.dcm 可以下载a文件至本地表示服务启动成功了，可以访问到。
第四步：定义ImageID
我们可以看一下官网中ImageID的定义格式，也可以在 juejin.cn/post/732643… 中回顾一下：ImageID 是一个URL，标识了一个用于显示的影像。格式为：【loader格式:真实的请求路径】
所以如果想要去请求本地或者后台接口中的dicom文件，定义的接口格式如下：loader格式为 wodauri, 真实的请求路径为：http://localhost:3000/files/${item}，如果是后台提供的接口，那http://localhost:3000/files/${item}更新为后台接口url就可以了
// 上面定义的第一个接口：获取所有的文件名
const res = await axios.get("http://localhost:3000/files");
// 上面定义的第二个接口：根据文件名获取指定文件
const imageIds = res.data.map(
(item) => `wadouri:http://localhost:3000/files/${item}`
);
其他的步骤和【如何渲染一个基础的Dicom文件(含演示) juejin.cn/post/732275…】一文中一致。
🎯 总结
以上就是加载本地Dicom文件的demo小案例了，如果是后台提供的dicom文件，一定要注意跨域处理，无论是请求本地的还是后台的，返回的都是文件流格式，查看预览时如下：
🎧 结语
配套可运行代码演示：github.com/jianyaoo/vu…
clone到本地后直接运行 npm run serve 即可启动，目前支持演示功能如下，持续更新，欢迎star~
