OHIF Viewer医学影像学习日记

前言：

OHIF Viewer一个开源的，基于Web的，医学影像查看器。
项目文档
GitHub
项目大概流程：我们下载OHIF Viewer项目运行打包，发布到服务器，然后暴露访问地址；再由后端提供返回固定格式json的接口，完整路径例如：
http://www.baidu.com/#/viewer?url=http://www.your.com/apiv1/dicom/analysis/studies
把此链接嵌入先有项目即可，实现在线预览医学影像图片。

步骤：

第一步：下载OHIF Viewer项目运行打包，发布到服务器，拿到访问地址。
第二步：后端提供返回固定格式json的接口。
第三步：拼接，OHIF访问地址+后端接口地址（此接口OHIF会调用，拿到你的返回值）。
第四步：最终访问路径【http://www.baidu.com/#/viewer?url=http://www.your.com/apiv1/dicom/analysis/studies】

一、命令行执行

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

二、修改语言为中文

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

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

一般情况下，使用都是通过url链接访问，例：http://www.baidu.com/#/viewer?url=http://www.your.com/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\.env
PUBLIC_URL=./
//项目\Viewers\platform\viewer\public\html-templates\scrit-tag.html
<script src="<%= PUBLIC_URL %>index.umd.js" crossorigin></script>

五、跨域

1.接口跨域
2.file文件跨域
二者都需要后端设置origin请求头参数

结语

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