Leonopteryxw-CSDN博客

原创 react-router-dom 主版本号6.x.x基本使用方法

react-router-dom 主版本号6.x.x基本使用方法目前我使用的react-router-dom版本为6.2.2，网上大部分开源项目和文档中，这个依赖的版本是5.x.x，主版本进行了一次更新，因此，部分api发生了一些变化。在最新的版本中，react-router-dom删除了Switch组件，添加了Routes组件，在最基本的使用当中，将Routes组件替换成Switch组件即可，Route组件中原来的component参数变更为了element，那么基本使用方法Demo:import

2022-03-02 16:35:44 894 4

原创 nodejs+express+react，前后台同一个目录下启动，解决方案

nodejs+express+react，前后台同一个目录下启动，解决方案这篇文章比较简单和基础，主要是对另一个帖子的补充，原网址如下：JS全栈第一步 - 连接 React 和 Node，Expresshttps://www.songbingjia.com/jingpin/show-67944.html大部分开源的打包项目中，前后端是在一个大的目录下写的，如果在api目录使用npm start只会启动后端，如果在项目根目录下使用npm start只会启动前端，如果想同时启动前端和后端，推荐做法是打开

2022-02-28 16:21:23 772

原创 OHIF记录（十三）——OHIF.log用法

OHIF.log用法@ohif/core将console的用法封装到了自己的依赖库里安装@ohif/core后，在node_modules下的路径@ohif/core —> src —> index.js中有如下代码：...import log from './log.js';...const OHIF = { ... log, ...}export default OHIF其中log是同目录下的log.js文件，代码：const log = { error:

2022-01-25 16:28:06 1345

原创 cornerstoneTools实现缩放，平移，改变窗宽窗位，翻转，正负片等功能

cornerstoneTools实现缩放，平移，改变窗宽窗位，翻转，正负片等功能cornerstoneTools提供了三个不同的api分别处理缩放，平移，改变窗宽窗位cornerstoneTools.WwwcTool 改变窗宽窗位（工具名：Wwwc）cornerstoneTools.ZoomTool 缩放 (工具名：Zoom)cornerstoneTools.PanTool 平移 (工具名： Pan)用法和标注工具的用法一样同时cornerstoneTools还提供了读取缩放比，

2022-01-14 14:05:13 2439

原创 cornerstone常用工具说明（标注类）

cornerstone常用工具说明角度标注函数名：cornerstoneTools.AngleTool工具名：Angle说明：在图片上任选三个点，计算并标注其角度示例：箭头标注函数名：cornerstoneTools.ArrowAnnotateTool工具名：ArrowAnnotate说明：在图片上画一个带箭头的直线，并且可以自定义标注文本示例：圆形标注函数名：cornerstoneTools.CircleRoiTool工具名：CircleRoi说明：在图片上选择

2022-01-13 15:38:15 2048 2

原创 cornerstone使用工具API

cornerstone使用工具APIcornerstone的相关依赖库cornerstoneTools提供了非常多有用的功能，包含标注，测量，计算，和基本的图形处理工具，使用cornerstoneTools必须先在项目当中安装cornerstone-tools，cornerstone-math，hammerjs三个工具yarn add cornerstone-toolsyarn add cornerstone-mathyarn add hammerjs注意：这里node版本在16.10以上

2022-01-13 10:57:12 1577 1

原创 orthanc 实例唯一哈希算法

orthanc 实例唯一哈希算法orthanc给每个实例都自定义了唯一hash，采用SHA-1 hash算法，具体代码是用c++写的，官方代码如下：#include "../PrecompiledHeaders.h"#include "DicomInstanceHasher.h"#include "../OrthancException.h"#include "../Toolbox.h"namespace Orthanc{ void DicomInstanceHasher::Setup

2022-01-05 15:46:30 1259

原创 dicom/orthanc 唯一标识

dicom/orthanc 唯一标识dicom通过studiesID，seriesID，instancesID来标识一张独一无二的影像，这些ID的长度不一致不同于dicom标识，Orthanc将这些dicom里的ID格式化为有固定的长度的SHA-1哈希，不过根据dicom标准，依然保留了ID的唯一性有一种特殊情况：比如图像经过某些软件处理后加入到orthanc里边，但是由于部分软件自身的缺陷，instancesID并没有发生改变，那么orthanc就会接受到两个instancesID一样的图片，默认情

2022-01-05 13:52:27 590

原创 Viewports概念

Viewports概念每个启用元素都有一个viewport对象，这个对象可以对图像的渲染方式进行一些配置。有两个常用的API函数，getViewport()和setViewport()，这两个函数在loadImage()异步函数后的then函数里才能生效。getViewport()函数可以获取当前启用元素的配置参数。使用时将启用元素当做参数输入即可。setViewport()函数可以对当前启用元素的参数进行一些实际配置。这个函数API有两个输入参数，第一个参数是启用元素，第二个参数是一个对象，这个对

2021-12-08 16:42:24 1049

原创理解imageId和imageLoaders

理解imageId和imageLoaders在cornerstone的使用过程中，imageId是一个非常重要的概念，包含了很多关键信息，首先给出一个具体的imageId示例：https://localhost/wado?requestType=WADO&studyUID=1.2.840.113704.1.111.8264.1553388392.1&seriesUID=1.2.840.113704.1.111.8264.1553388470.12&objectUID=1.2.84

2021-12-06 17:05:53 1019

原创使用cornerstone展示一张dicom

使用cornerstone展示一张dicomcornerstone.js里有一个核心概念：enable elements（谷歌直译为启用元素），它的本质就是一个HTML 元素（通常是div），我们所希望展示的的dic om影像就在这个元素里。展示一个dicom影像的步骤：调用cornerstone在DOM里创建一个用于展示影像的element调用enable() API关联用于展示影像的element调用loadImage() API加载图片调用 displayImage() API 显示

2021-12-06 14:31:13 2117 7

原创 dicomweb-client里构造函数DICOMwebClient

dicomweb-client里构造函数DICOMwebClientdicomweb-client里边的核心功能大多数都包含在DICOMwebClient类中，这个类的代码非常长，但是只需要把主干部分提出来分析即可，DICOMwebClient类的结构如下。var DICOMwebClient =function () { function DICOMwebClient(options) { ... } return DICOMwebClient}();注意这个代码最后边的小括号一定不

2021-08-30 11:01:44 465

原创 dicomweb-client中_assertMediaTypeIsValid源码解析

dicomweb-client中_assertMediaTypeIsValid源码解析Dicomweb-client模块中_assertMediaTypeIsValid是一个私有方法，该方法用于检测mediaType的类型是否有效，输入参数只有一个字符串，这个字符串就是mediaType。方法源码：key: "_assertMediaTypeIsValid",value: function _assertMediaTypeIsValid(mediaType) { if (!mediaType)

2021-08-18 09:28:07 143

原创 dicomweb中的_httpRequest方法

dicomweb中的_httpRequest方法dicom-client是一个模块，模块通过export暴露了三个可调用的对象api，utils，version源码：export { api, utils, version };其中api对象是模块的核心，api对象只有一个属性DICOMwebClient，属性值是DICOMwebClient函数。源码：var api = { DICOMwebClient: DICOMwebClient};函数通过_createClass创建了许多的

2021-08-17 09:50:52 339

原创开发踩坑（一）——修改dicomweb-client的代码

开发踩坑（一）——修改dicomweb-client的代码因为调试接口的需求，需要对dicomweb-client package的代码进行简单修改，通过import引用语句import {api} from 'dicomweb-client'导航到node_modules/dicomweb-client/build/dicomweb-client.js文件，修改其中的代码后运行，发现浏览器端并没有修改后所希望的输出，在浏览器console和sources处查看所调用的文件，发现并没有任何改变。出

2021-08-12 16:25:52 432

原创 lodash中memoize和values的用法

lodash中memoize和values的用法lodash模块里的memoize和values是一起使用的，作用是缓存状态值。用法：安装package：yarn add lodash引用import memoize from 'lodash/memoize';import _values from 'lodash/values';然后将memoize作为函数，_values作为参数，返回值交给一个自定义变量。这个返回的变量是一个函数，这个新的函数传入的参数就是要缓存的状态值，如果参数是一

2021-08-09 10:10:11 1258

原创从应用角度细说Promise(一)

从应用角度细说Promise(一)Promise对象传入一个函数作为参数，这个函数可以是任意函数，也可以是匿名函数。调用Promise对象就会执行这个函数。例：const MyPromise = new Promise(() => { console.log('start')})MyPromise代码会输出一个startPromise还提供了一个then方法，能分步执行代码，then方法接受一个函数作为参数，这个函数甚至可以只是一条函数语句，举个例子：const MyPro

2021-08-09 08:11:19 145

原创 OHIF记录（十二）——viewer页面的浏览器url路径生成

OHIF记录（十二）——viewer页面的浏览器url路径生成在点开一个患者的影像后，url地址会根据患者的studyInstanceUID而改变，格式为/viewer+studyInstanceUIDS，像这样：如果想要了解这个url生成的原理，那么首先就需要找到点击后的onClick函数，要分析点击后发生了什么。在viewers/platform/ui/src/components/studyList/StudyList.js文件中的182行调用TableRow组件的时候，onClick属性定义

2021-08-05 16:44:52 1733 8

原创 OHIF记录（十一）——routesUtil文件及路由组件迭代源码解析

routesUtil文件及路由组件迭代源码解析在解析react框架代码的时候，首先要找到路由组件的位置，用Chrome的React Developer Tools插件可以清楚的看到在App.js的OHIFStandaloneViewer组件里有很多Route路由组件。因此可以确定，路由组件是写在OHIFStandaloneViewer组件里，在源码文件里用全局搜索找到对应文件路径：Viewers/platform/viewer/src/OHIFStandaloneViewers.js文件。页面的全部路由

2021-08-02 08:53:56 849

原创用NProgress组件代替withNProgress钩子函数

用NProgress组件代替withNProgress钩子函数之前提到过withNProgress钩子函数的用法，用NProgress组件也可以实现相同的方法，组件需要传递一个参数isAnimating，children组件有三个默认的参数animationDuration，isFinished，progress，这几个参数的用法和withNProgress里名称相同且功能一致。改写案例：App.js里import './index.css'import React, { useState } f

2021-07-30 11:07:00 155

原创 @tanem/react-nprogress中withNProgress的用法

@tanem/react-nprogress中withNProgress的用法withNProgress组件常用于制作加载读条界面的逻辑部分。withNProgress输入一个组件做参数，对被输入的组件在定义时候自动分配三个参数isFinished，progress，animationDuration。这个组件在运行后是动态刷新的，isFinished用于标识组件是否在运行，如果为true则表示没有在运行，如果为false则表示正在运行，progress是一个0到1之间的正数，在组件运行期间会不断递增。

2021-07-30 08:39:07 264

原创 OHIF访问本地orthanc，及Access-Control-Allow-Origin错误解决

OHIF访问本地orthanc，及Access-Control-Allow-Origin错误解决技术选型：在OHIF框架使用命令npm start后，会默认执行default.js文件（对应路径Viewers/platform/viewer/public/config/），这个，而如果改用命令npm run dev:orthanc，会默认执行docker_nginx-orthanc.js文件，建议使用orthanc的配置文件，这样便于对比和调试。根据orthanc的配置文件对servers进行配置，

2021-06-24 15:42:05 2888 13

原创使用nginx代理orthanc

使用nginx代理orthancorthanc提供了dicom服务器的功能，并支持http协议访问，但是依然不是很完善，在CORS（跨域资源共享）问题上就做的不是很好，因此需要一个功能完善的浏览器服务器来反向代理，这里选择了nginx。如果在前端直接发送请求给orthanc请求数据，会报错，提示orthanc不支持跨源资源共享，那么可以在前端将请求发送给nginx，nginx模拟浏览器访问orthanc，相当于前端是从nginx将数据请求下来。操作步骤：首先去官网下载适合自己的版本: http://

2021-06-24 15:23:36 1854 7

原创使用orthanc搭建自己的DICOM服务器

使用orthanc搭建自己的pacsOHIF框架里的studyList和影像是需要读取一个dicom服务器才能显示的，框架提供了一个默认的服务器地址：https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs如果希望读取本地dicom数据，就需要先开启一个服务器，让OHIF给本地服务器发送请求。技术选型：首先要去官网安装适合自己版本的orthanc，也可以在这里下载和我一样的版本:https://download.csdn.net/downloa

2021-06-24 15:16:16 7248 8

原创 reselect中createSelector的用法及github代码解读

reselect中createSelector的用法及github代码解读reselect是一个redux中间件，github上有对应的文档：https://github.com/reduxjs/reselectcreateSelector的使用例程如下：import { createSelector } from 'reselect'const shopItemsSelector = state => state.shop.itemsconst taxPercentSelector =

2021-06-16 11:23:21 3961

原创 OHIF记录（十）——初始页面的table配置

OHIF记录（十）——初始页面的table配置在根路径页面的table包含两部分：第一部分：由三个搜索框组成的检索模块，包括患者姓名，Description，检查日期等三种不同类型的检索。第二部分：库中所有dicom数据的无序列表，源码中有24条数据。在platform/ui/components/studyList.js里定义了用于修改检索模块的接口，即mediumTableMeta数组，数组同样由对象组成，一个对象代表一个检索框。displayText：检索框上的文本。fieldName

2021-06-11 15:34:11 915 2

原创 OHIF记录（九）——添加新依赖库的正确方法

OHIF记录（九）——添加新依赖库的正确方法在开发中，大多数情况我们希望在现成的项目中添加个性化的功能，那这个时候不可避免的就需要安装新的依赖，OHIF使用了lerna管理包，直接在根路径下安装新的依赖会报错，以安装阿里ui组件库antd为例：错误原因写的很明确，直接在根路径下安装会在root工作环境下安装而不是项目本身的工作环境，但是如果按照提示忽略root工作环境检查强行安装的话，整个项目就会崩溃。正确的做法应该是去项目里边的文件夹安装依赖，比如在命令行输入：cd platform/viewe

2021-06-10 10:23:24 793 1

原创 OHIF记录（八）——添加Header组件的下拉选项

OHIF记录（八）——添加Header组件的下拉选项打开OHIF的根路由页面，可看到在header的右半部分有一个下拉选项框：打开html树可以明确看到，这个下拉选项框和左边的图标同属于header部分，既然是基于react框架，那么一定同属于header组件里边。找到定义header组件的文件，路径：Viewer/platform/viewer/src/components/Header/Header.js找到class名为header-menu的源码：<div className="

2021-06-10 09:51:48 822

原创 OHIF记录（七）——关于NotFound.js

OHIF记录（七）——关于NotFound.jsNotFound.js是一个路由组件，如果跳转的路由没有定义的话，则会跳转到这个组件对应的路由，组件源码如下：export default function NotFound({ message = 'Sorry, this page does not exist.', showGoBackButton = true }) { const context = useAppContext(); return ( <div class

2021-06-09 08:30:58 689

原创 OHIF记录（六）——窗口基础配置window.config

OHIF记录（六）——窗口基础配置window.config关于OHIF窗口的配置信息可以在浏览器内看到，输入http://website/app-config.js即可看到当前窗口配置文件的源码。其中website是你网站的域名，如果是在本地测是，将website换成localhost:端口号就行。源码中有一些现成的配置文件在路径：viewers/platform/viewer/public/config文件夹下边，默认使用default.js文件，文件里有一个window.config的对象，对象通

2021-06-09 08:25:02 5942 1

原创 i18n框架（一）——基础应用及t函数

i18n框架（一）——基础应用及t函数i18next是支持react框架的一个国际化翻译框架，i18n是internationalization的简写，18的意思是i和n之间有18个字母。这个组件可以自定义翻译内容，如果网站涉及多国家使用的话，这个框架将会是必需的。使用i18next需要先用npm下载：npm install i18next并导入i18nimport i18n from "i18next"基本用法：首先需要写一个原文和译文对应的对象，对象支持多语言翻译，可以设置多组翻译的原

2021-05-20 16:45:32 2590 2

原创 OHIF记录（五）——关于ErrorBoundary组件

OHIF记录（五）——关于ErrorBoundary组件在App.js文件里找到App组件的渲染函数render()，可以发现return的第一个组件是ErrorBoundary。源码：<ErrorBoundary context="App">...</ErrorBoundary>组件传入了一个参数context这是react16版本原生的一个组件，是一个错误边界组件，作用是可以在子组件树的任何位置捕获JavaScript错误，并记录这些错误，并显示一个备用UI，Er

2021-05-18 15:20:18 1140

原创 OHIF记录（四）——关于index.js

OHIF记录（四）——关于index.jsOHIF框架的index.js文件有两个功能：引入了App.js组件引入处理Dicom数据的工具包工具包源码的目录：Viewers-master\extensions提供了9个不同的工具包：每个工具包向外export一个主函数，这些函数被index.js引用，并将函数名存放在一个叫defaultExtensions数组中：defaultExtensions: [ OHIFVTKExtension, OHIFDicomHtmlExtensi

2021-05-18 15:05:42 1653

原创 OHIF记录（三）——从一个图标开始源码分析

OHIF记录（三）——从一个图标开始源码分析OHIF的本质是一个B/S架构的应用程序，既然是基于浏览器的应用程序，那么必然有一个入口html以及对应的js文件。入口html文件的路径：Viewers-master\platform\viewer\public\html-templates\index.html入口js文件的路径：Viewers-master\platform\viewer\src\index.html打开入口js文件，可以看到文件末尾部分有一行：const app = React.

2021-04-29 08:25:35 2715 6

原创 OHIF记录（二）——Viewers和React-vtk工具包互联

OHIF记录（二）——Viewers和React-vtk工具包互联OHIF是一款用于处理医疗图像的浏览器前端框架，那就避免不了涉及到对医疗图像，医学影像的各种操作和计算，就需要与vtk工具包进行互联，OHIF提供了接口可以将现成的功能集成进框架里。首先在OHIF的github里下载React-vtk-viewport源码：https://github.com/OHIF/react-vtkjs-viewport与之前下载的Viewers源码放在同一个文件夹里。目录结构可以是在一个空的工程文件夹下，将下

2021-04-22 16:25:34 2758 1

原创 OHIF框架——修改启动时候的默认端口号

OHIF框架——修改启动时候的默认端口号整个OHIF框架的源码是经过webpack打包的，因此配置默认的启动端口号也是在webpack的配置文件里边的。路径:.webpack->webpack.dev.js打开这个文件后可以看到模块输出一个对象（module.exports = {...}）在底部找到devServer属性，属性也是一个对象，属性对象有一个名为port的对象，其对应的值就是默认端口号，修改这个值即可。...

2021-04-22 11:34:08 960

原创 webstorm创建react，及其代码结构

webstorm创建react，及其代码结构webstorm提供了创建各种框架的方式，通过用户点击交互的方式简化了命令行的操作，这篇markdown主要说明一下使用webstorm 2020版本创建react的一些问题和react框架的代码结构。为了让过程更清晰，先新建一个test目录作为工程目录：E:\test生成react在上方导航栏点击File->New->Project，会出现一个对话框在对话框左侧选择React，右侧会出现一些选项，Location是希望创建react的工程

2021-04-20 10:03:39 2397

原创 OHIF记录（一）——开始

OHIF记录（一）——开始先去OHIF官网给出的github上，把源码拷贝到自己本地OHIF官网：https://ohif.org/对应GitHub源码连接：https://github.com/OHIF/Viewers当然也可以在官网上点击GitHub进入：进入官网后，点击绿色Code图标，选择Download ZIP将源码下载到本地并保存到自己喜欢的路径。在打开OHIF之前，需要安装一些其他的辅助工具。OHIF是一个专注于前端界面的框架，那么Node.js和NPM这两个工具一定要有。

2021-04-16 16:52:58 4967 2

原创如何理解异构网络

如何理解异构网络网络可以分为异构网络和同构网络，如果一个网络中包含不同的操作系统或者不同的网络架构，那么称这个网络是异构网络，举个例子：对于一台机房，一些设备是Linux系统，一些设备是Windows系统，还有一些Unix系统的其他设备，如果把这些设备互联起来组成一个网络，那么就属于是异构网络。在日常生活中，连接多个电脑通常会用到路由器或者交换机，他们两个之间有区别，比如交换机只能连接电脑，但是路由器可以连接电脑，也可以提供wifi给手机连接。那么由交换机组成的网络就属于同构网络，由路由器组成的网络就

2021-03-03 16:26:09 13183 1

原创一个NLP入门级的完整实验（二）

一个NLP入门级的完整实验（二）上一篇文章建立了4个文件 test.py，data.py，model.py，train.py这四个文件就是整个实验代码的框架。数据集在上篇文章中提到的论文里有，点击这里下载数据集这次实验我选择yelp2013数据集作为实验数据。数据集已经把训练集，测试集，验证集分好，直接使用即可。第一步是要读取文本内容，并且打包数据拿到数据集后对数据集和标签做处理，把每条评论和对应的打分情况打包成一个tuple，所有的评论共同组成一个list，格式[(sentence1, labe

2021-02-04 21:33:49 319

OrthancInstaller-Win64-21.5.2.exe

空空如也