OHIF Viewer医学影像学习日记

前言：

OHIF Viewer一个开源的，基于Web的，医学影像查看器。

项目文档

GitHub

项目大概流程：我们下载OHIF Viewer项目运行打包，发布到服务器，然后暴露访问地址；再由后端提供返回固定格式json的接口，完整路径例如：

/#/viewer?url=/apiv1/dicom/analysis/studies

把此链接嵌入先有项目即可，实现在线预览医学影像图片。

步骤：

第一步：下载OHIF Viewer项目运行打包，发布到服务器，拿到访问地址。

第二步：后端提供返回固定格式json的接口。

第三步：拼接，OHIF访问地址+后端接口地址（此接口OHIF会调用，拿到你的返回值）。

第四步：最终访问路径【/#/viewer?url=/apiv1/dicom/analysis/studies】

一、命令行执行

git clone /OHIF/Viewers.gityarn config set workspaces-experimental trueyarnyarn dev// 执行到dev已经可以本地运行项目了，自带mock数据// package dist包26M || 不带package dist包49M// 打包dist路径：项目\Viewers\platform\viewer\distyarn build:package || yarn build

二、修改语言为中文

右上角：选项=》Preferences=》General=》Language=>Chinese即可，并非全部中文，还会有部分无法显示中文。

三、内网部署传参导致404问题（前端解决方式）

一般情况下，使用都是通过url链接访问，例：/#/viewer?url=/apiv1/dicom/analysis/studies。然后发现dist包放到服务器上后，会出现传参数页面404，原因是BrowserRouter路由导致。

//如需后端解决需要Nginx修改配置项（请百度）// 项目\Viewers\platform\viewer\src\App.js中import {BrowserRouter as Router } from 'react-router-dom';替换为import {HashRouter as Router } from 'react-router-dom';

四、nginx公网部署资源404（前端解决方式）

//项目\Viewers\platform\viewer\.envPUBLIC_URL=.///项目\Viewers\platform\viewer\public\html-templates\scrit-tag.html<script src="<%= PUBLIC_URL %>index.umd.js" crossorigin></script>

五、跨域

1.接口跨域

2.file文件跨域

二者都需要后端设置origin请求头参数

结语

最近一手墨子出神入化，原以为百里是信仰，用了墨子才发现，百里就是抽奖，我赌你躲不了我三枪，然后现实很尴尬；墨一炮CD鞋+圣杯一出，快乐开始了，一炮又一炮，伤害不高，搞心态很强，轰的你心态爆炸，你又抓不住我，就是玩儿！