随着数字化医疗的发展，医学图像已经成为医疗信息化的重要组成部分之一。在前端展示医学图像时，需要将其解析成可渲染的数据，而 cornerstone-archive-image-loader 是一个可以加载 DICOM 图像序列的 npm 包，可以方便地在前端中呈现医学图像。
安装
要使用 cornerstone-archive-image-loader，需要提前安装好 cornerstone 和 cornerstone-tools 两个包。可以使用 npm 或 yarn 进行安装：
npm install cornerstone cornerstone-tools cornerstone-archive-image-loader # or yarn add cornerstone cornerstone-tools cornerstone-archive-image-loader
载入图像
使用 cornerstoneArchiveImageLoader 对象的 load 方法，可以通过指定 url 或文件对象的方式，加载 DICOM 图像序列。例如使用 url 加载图像：
-- -------------------- ---- ------- ------ - ------------ ---------------- - ---- ------------------- ------ - ----------------------------- - ---- ----------------------------------- ----- ------------------ - --- -------------------------------- ------------------------------------------------------------ -------- -- - --------------------------------------------- ---------------- ------------------------------------------- ----------------- ------------------------------------------------------ ----------------------------------------------------------- ---
load 方法会返回一个数组，其中包含了所有加载的图像数据。在示例中，我们直接使用 addImageSource 和 displayImage 方法在 cornerstone 中展示了第一张图像，并启用了一些交互工具。
启用 Caching
如果您需要在不同页面或会话中使用前面加载过的图像，您可以启用 caching 选项。在启用 caching 后，加载过的图像会被保存在浏览器的本地存储中，使用相同 imageId 加载的图像会立即从缓存中获取，而不需要重新下载。
import { CornerstoneArchiveImageLoader } from 'cornerstone-archive-image-loader';
const archiveImageLoader = new CornerstoneArchiveImageLoader({ enableCaching: true });
archiveImageLoader.load('https://example.com/mydicomfolder', (images) => {
// ...
});多线程加载
对于较大的图像序列加载，您可以启用多线程加载选项，以加快加载速度：
import { CornerstoneArchiveImageLoader } from 'cornerstone-archive-image-loader';
const archiveImageLoader = new CornerstoneArchiveImageLoader({ maxWebWorkers: 4 });
archiveImageLoader.load('https://example.com/mydicomfolder', (images) => {
// ...
});在此例中，最多会创建 4 个 Web Worker 线程，以便同时加载图像。要注意，在主线程上运行的脚本不会阻止您的应用程序进行其他操作，但是使用多个 Web Worker 可能会占用更多的系统资源。
总结
在本文中，我们介绍了如何使用 cornerstone-archive-image-loader 加载医学图像，以及如何启用缓存和多线程选项以提高性能。通过学习这些知识，您可以更加方便地在前端中呈现医学图像。
完整示例代码如下：
-- -------------------- ---- ------- ------ - ------------ ---------------- - ---- ------------------- ------ - ----------------------------- - ---- ----------------------------------- ----- ------------------ - --- ------------------------------- -------------- ----- -------------- - --- ------------------------------------------------------------ -------- -- - --------------------------------------------- ---------------- ------------------------------------------- ----------------- ------------------------------------------------------ ----------------------------------------------------------- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f481e8991b448e0ae5