cornerstone.js使用记录(二)

·  阅读 696

利用cornerstone.js API做一些简单操作

HTML

<div id="dicomImage" style="width: 512px;height: 512px;" oncontextmenu="return false" onmousedown="return false"></div>
复制代码

JS src

<script src="https://unpkg.com/cornerstone-core@2.3.0/dist/cornerstone.js"></script>
<script src="https://unpkg.com/cornerstone-wado-image-loader@3.3.1/dist/cornerstoneWADOImageLoader.min.js"></script>
<script src="https://unpkg.com/dicom-parser@1.8.7/dist/dicomParser.min.js"></script>

//初始化
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
let element = document.querySelector("#dicomImage");
let imageId = "wadouri:http://127.0.0.1/download/dx123.dcm";
cornerstone.enable(element, {
    colormap: ""
});
cornerstone.loadAndCacheImage(imageId).then(img => {
    cornerstone.displayImage(element, img);
});
复制代码

需要操作先获取激活元素的 viewport对象

const viewport = cornerstone.getViewport(element); //获取
... //操作
cornerstone.setViewport(element,viewport); //更新
复制代码

viewport内容

image.png

hflip : 水平旋转
vflip : 垂直旋转
invert : 颜色反转
rotation : 旋转角度
scale : 缩放
translation : 位移
复制代码

水平旋转

viewport.hflip = !viewport.hflip;
复制代码

垂直旋转

viewport.vflip = !viewport.vflip;
复制代码

颜色反转

viewport.invert = !viewport.invert;
复制代码

旋转角度

viewport.rotation += 45;
复制代码

缩放

viewport.scale += 0.01;
复制代码

位移

viewport.translation.x += 10;
viewport.translation.y += 10;
复制代码

重置

//这个不需要上面的 viewport对象
cornerstone.reset(element);
复制代码

热力图

//这个比较特殊, 需要添加一层 layer,但不能早于 displayImage, 当设置了这个 重置的代码也要改下,不能不能清除layer层
cornerstone.loadAndCacheImage(imageId).then(img => {
    cornerstone.displayImage(element, img);
    cornerstone.addLayer(element,img,{
        name : "PET", // PET CT
        opacity : 1,
        colormap : "" //可自行参看 cornerstone.js中的colormapsData中的属性有哪些
    });
});
复制代码

重置Layer

let layer = cornerstone.getActiveLayer(element);
if(layer.viewport.colormap != "none"){
    cornerstone.removeLayer(element,layer.layerId);
    cornerstone.updateImage(element);
}
cornerstone.reset(element);
复制代码

基本操作就这些了,要想更强的操作请用 cornerstoneTools。用了cornerstoneTools后,使用 cornerstone实现的滚轮缩放会失效,原因就是 cornerstoneTools自身就支持滚轮缩放,但你要激活才有效,否则是没有效果的。

分类:
前端
分类:
前端