bill
/
kankan-mix


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
							<!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>