cornerstone.js使用记录（二）

利用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内容

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自身就支持滚轮缩放，但你要激活才有效，否则是没有效果的。