Django 简易PACS读片系统
1、Django中写一个后端接口，给HTML提供dicom文件接口的方式
1、首先创建django项目
1、下载安装跨域的包
pip3 install django-cors-headers
2、使用pycharm创建一个Django项目
3、点击创建在另一个窗口，这个都无所谓，怎么都行，就是打开这个项目
4、创建成功的项目就是下面这个样子
5、先修改几个选项，后面好操作
下面是我的settings设置，我把修改的地方标注出来
"""
Django settings for pacsdemo project.
Generated by 'django-admin startproject' using Django 3.2.18.
For more information on this file, see
https://docs.djangoproject.com/en/3.2/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.2/ref/settings/
"""
# 添加这个import os
import os
from pathlib import Path
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-uv!_mka##8#citwx_q$o71)@!8tfaa-6wyrb!h8&4fm+m-=-d='
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
# 设置所有IP都可以访问，局域网
ALLOWED_HOSTS = ['*']
# Application definition
# 添加跨域设置
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'pacs.apps.PacsConfig',
'corsheaders' # 跨域设置
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
# 新添加的设置
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_ALL_ORIGINS = False
CORS_ORIGIN_WHITELIST = [
"http://192.168.0.30:8000",
"http://localhost:63409",
]
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW'
)
CORS_ALLOW_HEADERS = (
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
)
ROOT_URLCONF = 'pacsdemo.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates']
,
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'pacsdemo.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databases
# 连接本地的mysql数据库
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'pacsdemo', # 你的数据库名称
'USER': '******', # 你的账户
'PASSWORD': '******', #你的密码
'HOST': '127.0.0.1',
'PORT': '3306',
}
}
# Password validation
# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/3.2/topics/i18n/
# 设置时间，上海的时间
LANGUAGE_CODE = 'zh-Hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
# 加载静态文件的设置
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
# Default primary key field type
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
6、把表结构映射到数据库中
连接数据库的设置，没有这个设置，数据库会连接失败
import pymysql
pymysql.install_as_MySQLdb()
7、在终端运行两行命令
python manage.py makemigrations
8、运行第二行命令
python manage.py migrate
9、第一步完成，数据库连接成功，基础设置完成
2、写前端页面，并且和后端接口，传递单个dicom文件，并且显示出来
1、先添加一个路由
from django.conf.urls import include
2、然后在pacs中写urls.py里面的内容
from django.urls import path
from . import views
urlpatterns = [
path("index/", views.index), # 设置首页内容
path("read/", views.read), # 读dicom文件
path("read1/", views.read1), # 读dicom文件
]
3、写这个index的方法，在views.py中
from django.shortcuts import render
from django.http import HttpResponse, FileResponse
# Create your views here.
def index(request):
return render(request, 'index.html')
def read(request):
file = open('static/dicom/C9214289', 'rb')
response = FileResponse(file)
response['Content-Type'] = 'application/octet-stream'
response['Content-Disposition'] = 'attachment;filename="1.dcm"'
return response
def read1(request):
file = open('static/dicom/C9214530', 'rb')
response = FileResponse(file)
response['Content-Type'] = 'application/octet-stream'
response['Content-Disposition'] = 'attachment;filename="2.dcm"'
return response
4、写index.html的内容
我写的这个html，直接放进去就可以看，其中的内容你可以通过cornerstone.js查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pacs</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
// 阻止右键点击事件的默认行为
document.addEventListener('contextmenu', function (event) {
event.preventDefault();
});
</script>
<script>
// 监听双击事件，并阻止默认的缩放行为
document.addEventListener('dblclick', function (event) {
event.preventDefault();
});
document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, {passive: false});
</script>
</head>
<body>
<div>
<h2>全部都是鼠标左键的操作</h2>
<button id="wwwc">切换窗宽窗位</button>
<button id="length">切换测量长度</button>
<button id="rotate">旋转</button>
<button id="magnify">透视</button>
<button id="pan">移动</button>
<br/>
<button id="scaleoverlay">尺度</button>
<button id="zoom">放大</button>
<button id="angle">测量角度</button>
<button id="arrowannotate">添加备注</button>
<button id="bidirectional">交叉线</button>
<br/>
<button id="cobbangle">心胸比</button>
<button id="ellipticalroi">圆</button>
<button id="freehandroi">随便画</button>
<button id="probe">探针</button>
<button id="rectangleroi">方形</button>
<br/>
<button id="circlescissors">画圆</button>
<button id="rectanglescissors">画正方形</button>
</div>
<div id="dicomImage" style="width: 512px;height: 512px;position: absolute"></div>
</body>
<!-- 触控的方法 -->
<script src="https://unpkg.com/hammerjs@2.0.8/hammer.js"></script>
<!-- 基石包,核心包 -->
<script src="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js"></script>
<!-- Math包，数学包 -->
<script src="https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.min.js"></script>
<!-- 图片解析包，解析dcm文件的 -->
<script src="https://unpkg.com/cornerstone-wado-image-loader@4.13.2/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>
<!-- 解析普通图的方法 -->
<script src="https://unpkg.com/cornerstone-web-image-loader@2.1.1/dist/cornerstoneWebImageLoader.min.js"></script>
<!-- 写好方法的包 -->
<script src="https://unpkg.com/cornerstone-tools@6.0.10/dist/cornerstoneTools.js"></script>
<!-- 解析dicom的json信息 -->
<script src="https://unpkg.com/dicom-parser@1.8.21/dist/dicomParser.min.js"></script>
<script>
cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneTools.external.Hammer = Hammer;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
// 'dicomweb' 网页上的一种解析的包， http开头的网址 ,获取dicom的文件，并且显示出来
var imageId = "wadouri:http://127.0.0.1:8000/read";
var imageIds = ["wadouri:http://127.0.0.1:8000/read", "wadouri:http://127.0.0.1:8000/read1"]
// 定义stack滚动工具
const StackScrollMouseWheelTool = cornerstoneTools.StackScrollMouseWheelTool
// Add our tool, and set it's mode
const StackScrollTool = cornerstoneTools.StackScrollTool
//define the stack
// 设置一个栈
const stack = {
currentImageIdIndex: 0,
imageIds
}
// 默认初始化tools
cornerstoneTools.init()
// 获取页面显示的dicom id
var element = document.getElementById('dicomImage');
cornerstone.enable(element)
// 测量长度
const LengthTool = cornerstoneTools.LengthTool;
cornerstoneTools.addTool(LengthTool)
// cornerstoneTools.setToolActive('Length', {mouseButtonMask: 1})
// wwwc
const WwwcTool = cornerstoneTools.WwwcTool;
cornerstoneTools.addTool(WwwcTool)
// cornerstoneTools.setToolActive('Wwwc', {mouseButtonMask: 1})
// 旋转
const RotateTool = cornerstoneTools.RotateTool;
cornerstoneTools.addTool(RotateTool)
// 透视
const MagnifyTool = cornerstoneTools.MagnifyTool;
cornerstoneTools.addTool(MagnifyTool)
// 移动
const PanTool = cornerstoneTools.PanTool;
cornerstoneTools.addTool(PanTool)
// 尺度
const ScaleOverlayTool = cornerstoneTools.ScaleOverlayTool;
cornerstoneTools.addTool(ScaleOverlayTool)
// 放大
const ZoomTool = cornerstoneTools.ZoomTool;
cornerstoneTools.addTool(cornerstoneTools.ZoomTool, {
// Optional configuration
configuration: {
invert: false,
preventZoomOutsideImage: false,
minScale: .1,
maxScale: 20.0,
}
});
// 测量角度
const AngleTool = cornerstoneTools.AngleTool;
cornerstoneTools.addTool(AngleTool)
// 添加备注
const ArrowAnnotateTool = cornerstoneTools.ArrowAnnotateTool;
cornerstoneTools.addTool(ArrowAnnotateTool)
// 交叉线
const BidirectionalTool = cornerstoneTools.BidirectionalTool;
cornerstoneTools.addTool(BidirectionalTool)
// 心胸比
const CobbAngleTool = cornerstoneTools.CobbAngleTool;
cornerstoneTools.addTool(CobbAngleTool)
// 圆
const EllipticalRoiTool = cornerstoneTools.EllipticalRoiTool;
cornerstoneTools.addTool(EllipticalRoiTool)
// 画笔
const FreehandRoiTool = cornerstoneTools.FreehandRoiTool;
cornerstoneTools.addTool(FreehandRoiTool)
// 探针
const ProbeTool = cornerstoneTools.ProbeTool;
cornerstoneTools.addTool(ProbeTool)
// 正方形长方形
const RectangleRoiTool = cornerstoneTools.RectangleRoiTool;
cornerstoneTools.addTool(RectangleRoiTool)
// 直接画圆
const CircleScissorsTool = cornerstoneTools.CircleScissorsTool;
cornerstoneTools.addTool(CircleScissorsTool)
// 通过正方形涂
const RectangleScissorsTool = cornerstoneTools.RectangleScissorsTool;
cornerstoneTools.addTool(RectangleScissorsTool)
// 鼠标中键滚动
cornerstone.loadAndCacheImage(imageIds[0]).then(function (image) {
cornerstone.displayImage(element, image)
cornerstoneTools.addStackStateManager(element, ['stack'])
cornerstoneTools.addToolState(element, 'stack', stack)
})
cornerstoneTools.addTool(StackScrollMouseWheelTool)
cornerstoneTools.setToolActive('StackScrollMouseWheel', {})
function disableAllTools() {
// 取消左键的功能
cornerstoneTools.setToolDisabled('Length')
cornerstoneTools.setToolDisabled('Wwwc')
cornerstoneTools.setToolDisabled('Rotate')
cornerstoneTools.setToolDisabled('Magnify')
cornerstoneTools.setToolDisabled('ScaleOverlay')
cornerstoneTools.setToolDisabled('Zoom')
cornerstoneTools.setToolDisabled('Angle')
cornerstoneTools.setToolDisabled('ArrowAnnotate')
cornerstoneTools.setToolDisabled('Pan')
cornerstoneTools.setToolDisabled('Bidirectional')
cornerstoneTools.setToolDisabled('CobbAngle')
cornerstoneTools.setToolDisabled('EllipticalRoi')
cornerstoneTools.setToolDisabled('FreehandRoi')
cornerstoneTools.setToolDisabled('Probe')
cornerstoneTools.setToolDisabled('RectangleRoi')
cornerstoneTools.setToolDisabled('CircleScissors')
cornerstoneTools.setToolDisabled('RectangleScissors')
}
document.getElementById("wwwc").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活窗宽窗位
cornerstoneTools.setToolActive("Wwwc", {mouseButtonMask: 1})
})
document.getElementById("length").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活测量长度
cornerstoneTools.setToolActive("Length", {mouseButtonMask: 1})
})
document.getElementById("rotate").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活旋转
cornerstoneTools.setToolActive("Rotate", {mouseButtonMask: 1})
})
document.getElementById("magnify").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活透视
cornerstoneTools.setToolActive("Magnify", {mouseButtonMask: 1})
})
document.getElementById("pan").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活 移动
cornerstoneTools.setToolActive("Pan", {mouseButtonMask: 1})
})
document.getElementById("scaleoverlay").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活 尺子
cornerstoneTools.setToolActive("ScaleOverlay", {mouseButtonMask: 1})
})
document.getElementById("zoom").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活 放大
cornerstoneTools.setToolActive("Zoom", {mouseButtonMask: 1})
})
document.getElementById("angle").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活 角度
cornerstoneTools.setToolActive("Angle", {mouseButtonMask: 1})
})
document.getElementById("arrowannotate").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活 添加备注
cornerstoneTools.setToolActive("ArrowAnnotate", {mouseButtonMask: 1})
})
document.getElementById("bidirectional").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活交叉线
cornerstoneTools.setToolActive("Bidirectional", {mouseButtonMask: 1})
})
document.getElementById("cobbangle").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活心胸比
cornerstoneTools.setToolActive("CobbAngle", {mouseButtonMask: 1})
})
document.getElementById("ellipticalroi").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活 圆
cornerstoneTools.setToolActive("EllipticalRoi", {mouseButtonMask: 1})
})
document.getElementById("freehandroi").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活 随便画
cornerstoneTools.setToolActive("FreehandRoi", {mouseButtonMask: 1})
})
document.getElementById("probe").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活 探针
cornerstoneTools.setToolActive("Probe", {mouseButtonMask: 1})
})
document.getElementById("rectangleroi").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活 方形
cornerstoneTools.setToolActive("RectangleRoi", {mouseButtonMask: 1})
})
document.getElementById("circlescissors").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活 方形
cornerstoneTools.setToolActive("CircleScissors", {mouseButtonMask: 1})
})
document.getElementById("rectanglescissors").addEventListener('click', function () {
// 取消左键原来的功能
disableAllTools();
// 激活 方形
cornerstoneTools.setToolActive("RectangleScissors", {mouseButtonMask: 1})
})
</script>
</html>
5、启动项目
1、第一种，通过pycharm打开
2、第二种，命令行的方式
python manage.py runserver
5、查看网页
其中的功能都可以进行操作，后续我进行优化，默认滚动条是切换dicom
http://127.0.0.1:8000/index/
