自建网站需要学哪些,中国建设银行官方网站登录,高端网络培训课程,全球最大的磁力搜索引擎#x1f340; 引言
当我们刚接触Cornerstone或拿到一组Dicom文件时#xff0c;如果没有ImageID和后台接口#xff0c;可能只是想简单测试Cornerstone能否加载这些Dicom文件。在这种情况下#xff0c;可以使用本地文件加载的方法。之前我们介绍了通过node启动服务器请求文件… 引言
当我们刚接触Cornerstone或拿到一组Dicom文件时如果没有ImageID和后台接口可能只是想简单测试Cornerstone能否加载这些Dicom文件。在这种情况下可以使用本地文件加载的方法。之前我们介绍了通过node启动服务器请求文件在本地提供接口的方式。今天我们再介绍一下另一种实现方式——直接使用文件输入框点击上传文件通过文件流让Cornerstone加载并渲染这些Dicom文件。以下将围绕实现效果、实现思路及具体流程展开。 效果速览
本篇整体相关代码已更新至代码库https://github.com/jianyaoo/vue-cornerstone-demo/blob/main/src/views/basicUsage/LocalFile.vue欢迎Star。 实现效果如下
⛳️ 具体实现流程
实现流程
我们想要通过点击input文件框上传本地的文件进行渲染在进行实际开发前我们先梳理一下大概的思路 需要一个 type 为file 的 input 输入框组件点击上传选择本地要渲染的Dicom文件 我们可能想要展示一张Dicom或者一组Dicom文件所以 input 需要设置多选属性 监听文件更改事件当上传文件后进行渲染 将本地上传的file文件流传递给Cornerstone进行渲染核心步骤Cornerstone如何渲染Blob文件流
按照上面的流程我们就开始准备写代码
UI组件
div classformlabel for点击上传文件/labelinputtypefilemultiplechangehandleChange
/div监听文件改变
function handleChange(evt) {// 阻止事件冒泡evt.stopPropagation();// 阻止默认事件evt.preventDefault();// 更新文件前清除之前的缓存避免更新上传文件时直接从缓存中获取Volume对象cache.purgeCache();const files evt.target.files;const imageIds [];Array.from(files).forEach(file {// 将文件流放到dicomLoader的文件管理器中并返回对应的ImageID Blob流加载的核心代码1const imageId cornerstoneDICOMImageLoader.wadouri.fileManager.add(file);imageIds.push(imageId);});// 渲染ImageidloadAndViewImage(imageIds);
}在监听文件改变的代码中核心代码主要有2点 在每次更新文件时进行缓存清除cache.purgeCache()避免再次上传文件时由于VolumeId没有改变而导致直接从缓存中获取数据 获取到file文件流后可以通过 cornerstoneDICOMImageLoader 的fileManager对象将文件流转换成ImageId我们可以看一下fileManager中的相关方法通过add方法将我们上传的文件流添加到文件列表中并获取到以 dicomfile 为前缀的ImageId
// 单例文件列表用于管理上传的文件列表
let files: Blob[] [];// add:向文件列表中添加文件并返回指定格式的ImageId
// 注意这里返回的id前缀后面解析的代码中会用这个前缀作为本地文件加载的标志。
function add(file: Blob): string {const fileIndex files.push(file);return dicomfile:${fileIndex - 1};
}// get: 根据文件索引值获取文件流
function get(index: number): Blob {return files[index];
}// remove: 根据文件索引值删除文件
function remove(index: number): void {files[index] undefined;
}// purge: 清空文件列表
function purge(): void {files [];
}export default {add,get,remove,purge,
};
根据ImageId加载渲染影像
加载图像
async function loadAndViewImage(imageIds) {await prefetchMetadataInformation(imageIds);if (type.value stack) {await renderStack(imageIds);} else {await renderVolume(imageIds);}
}async function prefetchMetadataInformation(imageIdsToPrefetch) {for (let i 0; i imageIdsToPrefetch.length; i) {// 通过loadImage加载文件await cornerstoneDICOMImageLoader.wadouri.loadImage(imageIdsToPrefetch[i]).promise;}
}渲染栈图像
async function renderStack(imageIds) {if (imageIds?.length 0) {return;}const renderingEngine getRenderingEngine(renderingEngineId);const viewportInput {viewportId: viewportId0,type: csEnums.ViewportType.STACK,element: document.querySelector(#element0)};renderingEngine.enableElement(viewportInput);const toolGroup ToolGroupManager.getToolGroup(groupId);toolGroup.addViewport(viewportId0, renderingEngineId);const viewport renderingEngine.getViewport(viewportId0);await viewport.setStack(imageIds);activeTools();viewport.render();
}渲染Volume图像
async function renderVolume(imageIds) {...以上初始化内容省略完整代码可在git中查看const volume await volumeLoader.createAndCacheVolume(volumeId, {imageIds});volume.load();await setVolumesForViewports(renderingEngine,[{volumeId}],[viewportId1, viewportId2, viewportId3]);activeTools();renderingEngine.render();
}我们在使用 add() 函数返回的ImageId直接渲染前还需要使用loadImage加载图像 cornerstoneDICOMImageLoader.wadouri.loadImage(imageId)那接下来我们看一下loadImage函数是如何执行并获取到文件的。以下是loadImage函数的简约版代码整体源码可在Cornerstone 官方githttps://github.com/cornerstonejs/cornerstone3D/blob/d8f12e46d478b251c5515b3ee960629dd4e5d6e2/packages/dicomImageLoader/src/imageLoader/wadouri/loadImage.ts文件中查看
function loadImage(imageId: string,options: DICOMLoaderImageOptions {}
): Types.IImageLoadObject {const parsedImageId parseImageId(imageId);... const schemeLoader getLoaderForScheme(parsedImageId.scheme);...const dataSetPromise dataSetCacheManager.load(parsedImageId.url,schemeLoader,imageId);return loadImageFromPromise(dataSetPromise,imageId,parsedImageId.frame,parsedImageId.url,options);
}对ImageId进行解析获取到ImageId的加载规则等信息 根据解析到的ImageId theme属性获取加载方式如果是正常接口的ImageId使用的是xhrRequest HTTP请求对于我们上传文件的为loadFileRequest请求由上文我们可以得到add()函数返回的ImageId格式为dicomfile:${fileIndex - 1} 获取到加载方式后我们可以看一下loadFileRequest函数是如何加载文件的。通过解析ImageId可以获取到对应的文件Blob读取并返回文件流 在获取到文件流后还会有一系列的dicom文件处理与从接口返回操作一致这里就不展开详细说明了大致流程如下后续学习源码时会展开详细说明。 结语
由此一个点击上传本地文件的Demo演示就结束了主要知识点为 cornerstoneDICOMImageLoader.wadouri.fileManager对象管理本地上传的文件并可以返回ImageId cornerstoneDICOMImageLoader.wadouri.loadImage 可以根据不同的请求规则调用不同的请求方式用于加载处理文件 配套可运行代码演示https://github.com/jianyaoo/vue-cornerstone-demo clone到本地后直接运行 npm run serve 即可启动持续更新欢迎star~
