【前端】【cornerstone】【未完善】cornerstone重新加载图像尝试——拒绝花里胡哨
cornerstone源码:
cornerstone/src/reset.js
cornerstone/src/internal/getDefaultViewport.js
cornerstone/src/getDefaultViewportForImage.js
cornerstone/src/displayImage.js
问题
问题:重新加载element
承载的图像时可能直接加载出来图像大小/位置就不对,或采用cornerstone.reset(element);
重置视图时大小、位置会发生偏差。
正常加载图像
注册element
。
const element = document.getElementById('dicomimage');
cornerstone.enable(element);
this.img_show_element = element;
this.img_show_element.tabIndex = 0;
this.img_show_element.focus();
加载图像
imageId = ...
cornerstone.loadImage(imageId).then(function(image) {
that.imageHeight = image.height;
that.imageWidth = image.width;
// 若需要对图像进行处理
imgData = ...
function loadPixelData () {
return imgData;
}
// 这些参数都是需要调试的
var modified_image = {
imageId: imgIdItem, // XXX: 注意这个imageId很重要,没有的话注册的组件所对应的element的imageId只能为undefined
minPixelValue : 0,
maxPixelValue : 255,
slope: 1.0,
intercept: 0,
windowCenter : 127,
windowWidth : 256,
getPixelData: loadPixelData,
rows: that.imageHeight,
columns: that.imageWidth,
height: that.imageHeight,
width: that.imageWidth,
color: true,
rgba: true,
columnPixelSpacing: .8984375,
rowPixelSpacing: .8984375,
sizeInBytes: that.imageWidth * that.imageHeight * 4
};
var viewport = cornerstone.getDefaultViewportForImage(that.img_show_element, image);
cornerstone.displayImage(that.img_show_element, modified_image, viewport);
// 若不进行处理直接加载image即可(把上面的modified_image换成image)
});
尝试方法
方法1【无效】:直接修改columnPixelSpacing、rowPixelSpacing
that.img_show_element = ...
modified_image = ...
const cornerstone_canvas = that.img_show_element
that.cornerstone_show_height = cornerstone_canvas.offsetHeight//getAttribute('height')
that.cornerstone_show_width = cornerstone_canvas.offsetWidth//getAttribute('width')
if(modified_image.width / modified_image.height >= that.cornerstone_show_width / that.cornerstone_show_height){
modified_image.columnPixelSpacing = modified_image.rowPixelSpacing = that.cornerstone_show_width / modified_image.width;
}else{
modified_image.columnPixelSpacing = modified_image.rowPixelSpacing = that.cornerstone_show_height / modified_image.height;
let viewPortOpion = cornerstone.getViewport(that.img_show_element)
viewPortOpion.scale = modified_image.columnPixelSpacing;
viewPortOpion.displayedArea.tlhc.x = 1;
viewPortOpion.displayedArea.tlhc.y = 1;
viewPortOpion.displayedArea.brhc.x = modified_image.width;
viewPortOpion.displayedArea.brhc.y = modified_image.height;
// TODO:该项设置后仍然不好使,那不知道displayedArea.rowPixelSpacing是干啥的
viewPortOpion.displayedArea.rowPixelSpacing = modified_image.rowPixelSpacing;
viewPortOpion.displayedArea.columnPixelSpacing = modified_image.columnPixelSpacing;
cornerstone.setViewport(that.img_show_element, viewPortOpion);
cornerstone.displayImage(that.img_show_element, modified_image, viewPortOpion);
}
方法2【无效】:生成新的viewport
that.img_show_element = ...
modified_image = ...
var viewport = cornerstone.getDefaultViewportForImage(that.img_show_element, modified_image);
cornerstone.displayImage(that.img_show_element, modified_image, that.viewport);
方法3【有效】:还是采用加载图像的老办法用loadimage重新加载一遍
也就是虽然原有的that.img_show_element
也包含canvas
,但是不要想着用已有的canvas
。
可以通过cornerstone.getEnabledElement
查看一下:
console.log('loadImageData.this.img_show_element', cornerstone.getEnabledElement(that.img_show_element))
var enableElement = cornerstone.getEnabledElement(that.img_show_element);
// 这实际上就应该是开头说的cornerstone.reset()的调用效果,具体可以看一开始给出的源代码链接。调了很多次都不对,不过可能是能调出来的
var reset_viewport = cornerstone.getDefaultViewportForImage(that.img_show_element, enableElement.image);
console.log('loadImageData->reset_viewport', reset_viewport);