cornerstoneTool.js使用记录七

2,122 阅读1分钟

Other

官方没在官网写例子的API。cornerstoneTools.addTool第二个参数可有可无。

script

<script src="https://unpkg.com/hammerjs@2.0.8/hammer.js"></script>
<script src="https://unpkg.com/cornerstone-core@2.3.0/dist/cornerstone.js"></script>
<script src="https://unpkg.com/cornerstone-math@0.1.9/dist/cornerstoneMath.min.js"></script>
<script src="https://unpkg.com/cornerstone-wado-image-loader@3.3.1/dist/cornerstoneWADOImageLoader.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@5.1.4/dist/cornerstoneTools.js"></script>
<script src="https://unpkg.com/dicom-parser@1.8.7/dist/dicomParser.min.js"></script>
<script>
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.Hammer = Hammer;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    cornerstoneTools.init([{
        moduleName: 'globalConfiguration',
        configuration: {
            showSVGCursors: true
        }
    }, {
        moduleName: 'segmentation',
        configuration: {
            outlineWidth: 2
        }
    }]);
</script>

playClip, stopClip

播放帧动画,停止播放

//html
<div id="dicomImage" style="width: 512px;height: 512px;" oncontextmenu="return false" onmousedown="return false"></div>

//script
<script>
    let el = document.querySelector("#dicomImage");
    
    cornerstone.enable(el);
    const url = "http://127.0.0.1/download/dicom";
    const chestImageIds = new Array();
    for (let i = 1; i < 37; i++) {
        chestImageIds.push(
            `wadouri:${url}/${i}.dcm`
        );
    }
    
    const chestStack = {
        currentImageIdIndex: 0,
        imageIds: chestImageIds,
    };
    
    function loadSeries(images, element, stack) {
        images.forEach(item => cornerstone.loadAndCacheImage(item));
        return cornerstone.loadImage(images[0]).then(img => {
            cornerstone.displayImage(element, img);
            cornerstoneTools.addStackStateManager(element, ["stack"]);
            cornerstoneTools.addToolState(element, "stack", stack);
        });
    }
    
    function play(el,frames){
        cornerstoneTools.playClip(el,frames); // el 目标元素  frames 帧数
    }
    function stop(el){
        cornerstoneTools.stopClip(el);
    }
</script>

CircleRoiTool

绘制圆形图形

    //html
    <div id="dicomImage" style="width: 512px;height: 512px;" oncontextmenu="return false" onmousedown="return false"></div>
    
    //script
    <script>
        let el = document.querySelector("#dicomImage");
        cornerstone.enable(el);
        let dcm = "wadouri:http://127.0.0.1/download/1.dcm";
        cornerstone.loadAndCacheImage(dcm).then(function(image) {
            cornerstone.displayImage(el, image);
        });

        let CircleRoiTool = cornerstoneTools.CircleRoiTool;
        cornerstoneTools.addTool(CircleRoiTool, {
            configuration: {
                renderDashed: true, //是否渲染虚线
                hideHandlesIfMoving: false, //是否显示圆点移动轨迹  true 不显示  false 显示
            }
        });
        cornerstoneTools.setToolActive("CircleRoi", {
            mouseButtonMask: 1
        });
    </script>

CorrectionScissorsTool

剪刀工具(Segmentation)

    //html
    <div id="dicomImage" style="width: 512px;height: 512px;" oncontextmenu="return false" onmousedown="return false"></div>

    //script
    <script>
        let el = document.querySelector("#dicomImage");
        const imageIds = [
            `wadouri:http://127.0.0.1/download/1.dcm`,
            `wadouri:http://127.0.0.1/download/2.dcm`,
        ];

        const stack = {
            currentImageIdIndex: 0,
            imageIds: imageIds,
        };
        cornerstone.enable(el);

        cornerstone.loadAndCacheImage(imageIds[0]).then(function(image) {
            cornerstoneTools.addStackStateManager(el, ['stack']);
            cornerstoneTools.addToolState(el, 'stack', stack);
            cornerstone.displayImage(el, image);
        });

        let CorrectionScissorsTool = cornerstoneTools.CorrectionScissorsTool;
        cornerstoneTools.addTool(CorrectionScissorsTool);
        cornerstoneTools.setToolActive("CorrectionScissors", {
            mouseButtonMask: 1
        });
    </script>

FreehandRoiSculptorTool

手绘图形,暂时无效

    //html
    <div id="dicomImage" style="width: 512px;height: 512px;" oncontextmenu="return false" onmousedown="return false"></div>

    //script
    <script>
        let el = document.querySelector("#dicomImage");
        cornerstone.enable(el);
        let imageId = "wadouri:http://127.0.0.1/download/dx123.dcm";
        cornerstone.loadImage(imageId).then(function(image) {
            cornerstone.displayImage(el, image);
        });
        let FreehandRoiSculptorTool = cornerstoneTools.FreehandRoiSculptorTool;
        cornerstoneTools.addTool(FreehandRoiSculptorTool);
        cornerstoneTools.setToolActive("FreehandRoiSculptor", {
            mouseButtonMask: 1
        });
    </script>

SaveAs

保存图像

    //html
    <div id="dicomImage" style="width: 512px;height: 512px;" oncontextmenu="return false" onmousedown="return false"></div>
    
    //script
    <script>
        let el = document.querySelector("#dicomImage");
        cornerstone.enable(el);
        let imageId = "wadouri:http://127.0.0.1/download/dx123.dcm";
        cornerstone.loadImage(imageId).then(function(image) {
            cornerstone.displayImage(el, image);
            
            setTimeout(()=>{
                cornerstoneTools.SaveAs(el,Date.now() + ".jpg"); //自动下载到本地
            },3000);
        });
        
    </script>

OverlayTool

暂时找不到用处

SphericalBrushTool

球形画笔工具(Segmentation)

    //html
    <div id="dicomImage" style="width: 512px;height: 512px;" oncontextmenu="return false" onmousedown="return false"></div>
    
    //script
    <script>
        let el = document.querySelector("#dicomImage");
        cornerstone.enable(el);
        
        const imageIds = [
            `wadouri:http://10.8.12.140/download/1.dcm`,
            `wadouri:http://10.8.12.140/download/2.dcm`,
        ];

        const stack = {
            currentImageIdIndex: 0,
            imageIds: imageIds,
        };
        
        cornerstone.loadImage(imageIds[0]).then(function(image) {
            cornerstoneTools.addStackStateManager(el, ['stack']);
            cornerstoneTools.addToolState(el, 'stack', stack);
            cornerstone.displayImage(el, image);
        });

        let SphericalBrushTool = cornerstoneTools.SphericalBrushTool;
        cornerstoneTools.addTool(SphericalBrushTool, { //和Brush差不多
            configuration: {
                alwaysEraseOnClick: false
            },
        });
        cornerstoneTools.setToolActive("SphericalBrush", {
            mouseButtonMask: 1
        });
    </script>

改变窗位

头部平扫 ww 90 wl 35
头颅骨窗 ww 1600 wl 450
颈椎 ww 4000 wl 700
肺窗 ww 1500 wl -400
纵膈窗 ww 350 wl 40
腹部 ww 1500 wl -700
肝脏 ww 400 wl 40
关节骨窗 ww 1600 wl 550
血管 ww 500 wl 40

    changeWindow(90,35); //这样你就能实现部位扫描了
    function changeWindow(ww,wl){
        let viewport = cornerstone.getViewport(el);
        viewport.voi.windowWidth = ww;
        viewport.voi.windowCenter = wl;
        cornerstone.setViewport(el,viewport);
    }
基本也就这么多了,还有的话只能用到才能记录。