|
|
@@ -0,0 +1,247 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>文档浏览</title>
|
|
|
+ <script src="./publish/lib/hammer.js"></script>
|
|
|
+ <script src="./publish/lib/cornerstone.js"></script>
|
|
|
+ <script src="./publish/lib/cornerstoneMath.min.js"></script>
|
|
|
+ <script src="./publish/lib/cornerstoneWADOImageLoader.bundle.min.js"></script>
|
|
|
+ <script src="./publish/lib/cornerstoneWebImageLoader.min.js"></script>
|
|
|
+ <script src="./publish/lib/cornerstoneTools.js"></script>
|
|
|
+ <script src="./publish/lib/dicomParser.min.js"></script>
|
|
|
+ <style>
|
|
|
+ .disabled {
|
|
|
+ opacity: 0.5;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+ select {
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ html,
|
|
|
+ body {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ #dicomImage {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ #toolbar {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 24px;
|
|
|
+ padding: 10px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ background-color: #fff;
|
|
|
+ border: solid 1px #e5e5e5;
|
|
|
+ border-radius: 6px;
|
|
|
+ z-index: 999;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ #toolbar > div {
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
+ #toolbar > div.active {
|
|
|
+ color: #1779ed;
|
|
|
+ }
|
|
|
+ #statbar {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 24px;
|
|
|
+ padding: 10px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ background-color: #fff;
|
|
|
+ border: solid 1px #e5e5e5;
|
|
|
+ border-radius: 6px;
|
|
|
+ z-index: 999;
|
|
|
+ display: none;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="dicomImage"></div>
|
|
|
+ <div id="toolbar">
|
|
|
+ <div id="Length">
|
|
|
+ 标注:
|
|
|
+ <select onchange="tools.annotation(this.value)">
|
|
|
+ <option value="">请选择</option>
|
|
|
+ <option value="ArrowAnnotate">箭头</option>
|
|
|
+ <option value="Length">长度</option>
|
|
|
+ <option value="Angle">角度</option>
|
|
|
+ <option value="RectangleRoi">矩形</option>
|
|
|
+ <option value="EllipticalRoi">椭圆</option>
|
|
|
+ <option value="FreehandRoi">面积</option>
|
|
|
+ <option value="Probe">针探</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div id="Wwwc" onclick="tools.wwwc()">调整窗宽窗高</div>
|
|
|
+ <div onclick="tools.download()">下载</div>
|
|
|
+ </div>
|
|
|
+ <div id="statbar" onclick="tools.annotation('')">退出</div>
|
|
|
+ <script>
|
|
|
+ const urlParams = key => {
|
|
|
+ let querys = window.location.search.substr(1).split('&')
|
|
|
+ for (let i = 0; i < querys.length; i++) {
|
|
|
+ let keypair = querys[i].split('=')
|
|
|
+ if (keypair.length === 2 && keypair[0] === key) {
|
|
|
+ return keypair[1]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+
|
|
|
+ const tools = {
|
|
|
+ name: '',
|
|
|
+ set active(name) {
|
|
|
+ document.querySelectorAll('#toolbar >div').forEach(el => el.classList.remove('active'))
|
|
|
+ if (name) {
|
|
|
+ this.name = name
|
|
|
+ document.getElementById(name).classList.add('active')
|
|
|
+ } else {
|
|
|
+ this.name = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ download() {
|
|
|
+ var link = document.createElement('a')
|
|
|
+ link.download = 'preview.png'
|
|
|
+ link.href = document.querySelector('canvas').toDataURL('image/png').replace('image/png', 'image/octet-stream')
|
|
|
+ link.click()
|
|
|
+ },
|
|
|
+ wwwc() {
|
|
|
+ const name = 'Wwwc'
|
|
|
+ if (this.name == name) {
|
|
|
+ cornerstoneTools.setToolActive('Pan', {
|
|
|
+ mouseButtonMask: 1,
|
|
|
+ })
|
|
|
+ this.active = ''
|
|
|
+ } else {
|
|
|
+ cornerstoneTools.setToolActive('Wwwc', {
|
|
|
+ mouseButtonMask: 1,
|
|
|
+ })
|
|
|
+ this.active = name
|
|
|
+ }
|
|
|
+ },
|
|
|
+ annotation(name) {
|
|
|
+ const wwwc = document.getElementById('Wwwc')
|
|
|
+ const leave = document.getElementById('statbar')
|
|
|
+ const select = document.querySelector('select')
|
|
|
+ if (name) {
|
|
|
+ if (this.name == 'Wwwc') {
|
|
|
+ this.wwwc()
|
|
|
+ }
|
|
|
+ wwwc.classList.add('disabled')
|
|
|
+ leave.style.display = 'flex'
|
|
|
+ select.disabled = true
|
|
|
+ cornerstoneTools.setToolActive(name, { mouseButtonMask: 1 })
|
|
|
+ } else {
|
|
|
+ wwwc.classList.remove('disabled')
|
|
|
+ leave.style.display = 'none'
|
|
|
+ select.disabled = false
|
|
|
+ document.querySelector('select').value = ''
|
|
|
+ cornerstoneTools.setToolPassive(this.name)
|
|
|
+ cornerstoneTools.setToolActive('Pan', {
|
|
|
+ mouseButtonMask: 1,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.name = name
|
|
|
+ },
|
|
|
+ }
|
|
|
+ // 注册并挂载cornerstone及其cornerstoneTools，固定操作
|
|
|
+ cornerstoneTools.external.cornerstone = cornerstone
|
|
|
+ cornerstoneTools.external.cornerstoneMath = cornerstoneMath
|
|
|
+ cornerstoneTools.external.Hammer = Hammer
|
|
|
+ cornerstoneWADOImageLoader.external.dicomParser = dicomParser
|
|
|
+ cornerstoneWADOImageLoader.external.cornerstone = cornerstone
|
|
|
+ var file = urlParams('file')
|
|
|
+ if (!file) {
|
|
|
+ alert('文档不能为空')
|
|
|
+ } else {
|
|
|
+ var imageId = 'wadouri: ' + decodeURIComponent(file) //http://192.168.0.11:80/20231025172413.dcm'
|
|
|
+ // 初始化cornerstoneTools工具
|
|
|
+ cornerstoneTools.init([
|
|
|
+ {
|
|
|
+ moduleName: 'globalConfiguration',
|
|
|
+ configuration: {
|
|
|
+ showSVGCursors: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ moduleName: 'segmentation',
|
|
|
+ configuration: {
|
|
|
+ outlineWidth: 2,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ])
|
|
|
+
|
|
|
+ // 获取要用于加载图片的div区域
|
|
|
+ var element = document.getElementById('dicomImage')
|
|
|
+ //激活获取到的用于图片加载的区域
|
|
|
+ cornerstone.enable(element)
|
|
|
+ // // 从cornerstoneTools库中获取窗宽,窗高工具
|
|
|
+ // const WwwcTool = cornerstoneTools.WwwcTool;
|
|
|
+ // //添加获取到的窗宽,窗高工具
|
|
|
+ // cornerstoneTools.addTool(WwwcTool);
|
|
|
+ // // 绑定工具操作功能到鼠标左键
|
|
|
+ // cornerstoneTools.setToolActive("Wwwc", {
|
|
|
+ // mouseButtonMask: 1,
|
|
|
+ // });
|
|
|
+ //使用loadAndCacheImage()方法加载并缓存图片，然后使用displayImage()方法显示图片。
|
|
|
+ cornerstone.loadAndCacheImage(imageId).then(function (image) {
|
|
|
+ cornerstone.displayImage(element, image)
|
|
|
+ })
|
|
|
+
|
|
|
+ /* 平移、缩放 */
|
|
|
+ const PanTool = cornerstoneTools.PanTool
|
|
|
+ cornerstoneTools.addTool(PanTool)
|
|
|
+ cornerstoneTools.setToolActive('Pan', { mouseButtonMask: 1 })
|
|
|
+
|
|
|
+ const ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool
|
|
|
+ cornerstoneTools.addTool(ZoomMouseWheelTool)
|
|
|
+ cornerstoneTools.setToolActive('ZoomMouseWheel', { mouseButtonMask: 1 })
|
|
|
+
|
|
|
+ /* 标注工具 */
|
|
|
+ // 长度标注
|
|
|
+ const LengthTool = cornerstoneTools.LengthTool
|
|
|
+ cornerstoneTools.addTool(LengthTool)
|
|
|
+
|
|
|
+ const AngleTool = cornerstoneTools.AngleTool
|
|
|
+ cornerstoneTools.addTool(AngleTool)
|
|
|
+
|
|
|
+ const ArrowAnnotateTool = cornerstoneTools.ArrowAnnotateTool
|
|
|
+ cornerstoneTools.addTool(ArrowAnnotateTool)
|
|
|
+
|
|
|
+ const RectangleRoiTool = cornerstoneTools.RectangleRoiTool
|
|
|
+ cornerstoneTools.addTool(RectangleRoiTool)
|
|
|
+
|
|
|
+ const EllipticalRoiTool = cornerstoneTools.EllipticalRoiTool
|
|
|
+ cornerstoneTools.addTool(EllipticalRoiTool)
|
|
|
+
|
|
|
+ const FreehandRoiTool = cornerstoneTools.FreehandRoiTool
|
|
|
+ cornerstoneTools.addTool(FreehandRoiTool)
|
|
|
+
|
|
|
+ const ProbeTool = cornerstoneTools.ProbeTool
|
|
|
+ cornerstoneTools.addTool(ProbeTool)
|
|
|
+
|
|
|
+ const WwwcTool = cornerstoneTools.WwwcTool
|
|
|
+ //添加获取到的窗宽,窗高工具
|
|
|
+ cornerstoneTools.addTool(WwwcTool)
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
