【前端】【cornerstone】【未完善】cornerstone重新加载图像尝试——拒绝花里胡哨

问题
正常加载图像
尝试方法
- 方法1【无效】：直接修改columnPixelSpacing、rowPixelSpacing
- 方法2【无效】：生成新的viewport
- 方法3【有效】：还是采用加载图像的老办法用loadimage重新加载一遍

cornerstone源码：
cornerstone/src/reset.js
cornerstone/src/internal/getDefaultViewport.js
cornerstone/src/getDefaultViewportForImage.js
cornerstone/src/displayImage.js

问题

问题：重新加载element承载的图像时可能直接加载出来图像大小/位置就不对，或采用cornerstone.reset(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只能为undefinedminPixelValue : 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);

【前端】【cornerstone】【未完善】cornerstone重新加载图像大小问题——拒绝花里胡哨相关推荐

解密 | OpenCV加载图像大小是有限制的？
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达问题来由最近有人问一个问题,就是它有个大小800MB的图像文件, ...
【js】【cornerstone】cornerstone使用url方式加载图像
[js][cornerstone]cornerstone使用url方式加载图像引入cornerstoneWebImageLoader loadImage 引入cornerstoneWebImageL ...
前端性能优化学习 08 资源加载优化
图片延迟加载什么是延迟加载首先来想象一个场景,当浏览一个内容丰富的网站时,比如电商的商品列表页.主流视频网站的节目列表等,由于屏幕尺寸的限制,每次只能查看到视窗中的那部分内容,而要浏览完页面所包含 ...
前端性能优化——如何提高页面加载速度？
1.将样式表放在头部首先说明一下,将样式表放在头部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现,改善用户体验,防止"白屏". 我们 ...
前端性能优化：使用媒体查询加载指定大小的背景图片
日期:2013-7-8 来源:GBin1.com 直到CSS @supports被广泛支持,CSS媒体查询的使用接近于CSS中写逻辑控制.我们经常用CSS媒体查询来根据设备调整CSS属性(通常根据屏 ...
在HBuilder创建前端web项目时，图片加载不出来，怎么解决？
在HBuilder创建前端web项目时,图片加载不出来,如下: 解决方法: 将图片文件路径减少,可正常显示,如图:
前端如何解决图片太多加载资源慢的问题
前端如何解决图片太多加载资源慢的问题使用图片服务器使用图片懒加载 CSS sprites 使用图片服务器把图片服务器与应用服务器分开,图片服务器采用独立域名 ,css.js和图片就可以并发请求了 ...
User Profile Service服务未登录，无法加载用户配置文件的解决方案
最近驱动人生用户反映win10开机提示User Profile Service服务未登录,无法加载用户配置文件.造成这个问题的原因通常是用户配置文件.文件夹被删除或用户配置文件损坏及用户已停止或禁用此 ...
用jQuery预加载图像
我正在寻找一种快速简单的方法来用JavaScript预加载图像. 如果重要的话,我正在使用jQuery. 我在这里( http://nettuts.com ... )看到了: function com ...

【前端】【cornerstone】【未完善】cornerstone重新加载图像大小问题——拒绝花里胡哨

【前端】【cornerstone】【未完善】cornerstone重新加载图像尝试——拒绝花里胡哨

问题

正常加载图像

尝试方法

方法1【无效】：直接修改columnPixelSpacing、rowPixelSpacing

方法2【无效】：生成新的viewport

方法3【有效】：还是采用加载图像的老办法用loadimage重新加载一遍

【前端】【cornerstone】【未完善】cornerstone重新加载图像大小问题——拒绝花里胡哨相关推荐

最新文章

热门文章