【前端】【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);