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
二、修改语言为中文

OHIF Viewer医学影像学习日记_第1张图片
右上角:选项=》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鞋+圣杯一出,快乐开始了,一炮又一炮,伤害不高,搞心态很强,轰的你心态爆炸,你又抓不住我,就是玩儿!

你可能感兴趣的:(javascript,OHIF,Viewer,医学影像,vue,react)