CN110825995A - 灰度图像的快速显示方法 - Google Patents

灰度图像的快速显示方法 Download PDF

Info

Publication number
CN110825995A
CN110825995A CN201911066491.9A CN201911066491A CN110825995A CN 110825995 A CN110825995 A CN 110825995A CN 201911066491 A CN201911066491 A CN 201911066491A CN 110825995 A CN110825995 A CN 110825995A
Authority
CN
China
Prior art keywords
canvas object
image
gray
webgl
displaying
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201911066491.9A
Other languages
English (en)
Other versions
CN110825995B (zh
Inventor
彭志勇
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Individual
Original Assignee
Individual
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Individual filed Critical Individual
Priority to CN201911066491.9A priority Critical patent/CN110825995B/zh
Publication of CN110825995A publication Critical patent/CN110825995A/zh
Application granted granted Critical
Publication of CN110825995B publication Critical patent/CN110825995B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Image Processing (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本发明提供了一种灰度图像的快速显示方法，该方法包括：在浏览器网页内需显示灰度图像的区域内，建立大小完全相同的位于上面的上层canvas对象和位于下面的下层canvas对象，且所述上层canvas对象和所述下层canvas对象重叠放置；所述上层canvas对象使用2d编程接口，用来响应用户的鼠标操作，输出文字和图形，且所述上层canvas对象的背景色设置为透明的；所述下层canvas对象使用WebGL编程接口，对灰度图像进行窗宽/窗位的计算和调整、旋转、缩放和反白，以便于灰度图像的显示。本方法实现了灰度图像的分层显示和更新，大幅度提高了灰度图像的处理性能，同时也提高了灰度图像的显示速度。

Description

灰度图像的快速显示方法
技术领域
本发明涉及医学灰度图像处理领域。更具体地说，本发明涉及一种灰度图像的快速显示方法。
背景技术
在浏览器上显示图像时，由于浏览器只能直接显示每通道8位的图像，HTML DOM里的Image对象和canvas对象在处理和显示图像时也是将图像转成每通道8位的再显示。
而日常在显示医学灰度图像时，常常需要对图像应用Modality LUT(窗宽/窗位调整)、旋转/反白等处理后再显示给用户；特别是9～16位的灰度图像，则肯定是需要经过窗宽/窗位调整运算之后转换得到8位的图像再显示出来。但是，若要在浏览器中显示灰度图像时，常用的窗宽窗位调整计算都是使用JS(JavaScript)计算出来的，即依次得到某个像素的原始灰度值，然后逐个像素应用窗宽窗位等运算得到计算后的8位的灰度值，再把8位的灰度值转成成RGB的颜色值，再通过canvas的putImageData等方法或者转换成dataurl等方法传递给HTML DOM里的Image对象和canvas对象显示出来。采用这种方法最大的问题是性能非常差，对于常见的X光等分辨率比较大的图像(3000*4000等)，用JS这种计算性能比较差的语言去计算那么多次(一幅图有上千万甚至几千万个像素)，将带来非常差的响应速度，甚至会导致浏览器卡死从而变得不可用。
现在也有部分人尝试使用WebGL的方式来计算窗宽窗位等，其做法是在Web页面中用JS先将图像数据转换成像素值的byte数组(小于等于8位的灰度图像直接使用一个byte数组；大于8位的灰度图像可能拆分成LUMINANCE_ALPHA类型，及一个8位灰度值和一个8位的透明度)，然后直接使用此数组构建WebGL的Texture，最后在图像计算时，在fragement-shader里，还是根据此上面的拆分算法，针对性的还原得到原始的灰度值后，在再应用窗宽和窗位计算得到窗宽/窗位计算及ModalityLUT变换后显示图像，但是不处理图像旋转、放大、缩小等非像素类的操作，所以最终的图像应该是通过最终展示的canvas的2d接口的drawimage函数将WebGL处理后的结果，应用旋转、缩放等操作绘制到最终的展示区域。
且由于在显示灰度图像时(如医学影像DICOM图像等)，在图像的四周需要显示一些文字性的信息，如图像的信息，图像所属的人的信息等，并且通常用户还需要在图像上进行勾画等操作，但是这些操作在WebGL编程接口中是非常难以实现的。
发明内容
本发明的一个目的是解决至少上述问题和/或缺陷，并提供至少后面将说明的优点。
本发明还有一个目的是提供一种灰度图像的快速显示方法，其实现了灰度图像的分层显示和更新，大幅度提高了灰度图像的处理性能，同时也提高了灰度图像的显示速度。
为了实现本发明的这些目的和其它优点，提供了一种灰度图像的快速显示方法，包括：
在浏览器网页内需显示灰度图像的区域内，建立大小完全相同的位于上面的上层canvas对象和位于下面的下层canvas对象，且所述上层canvas对象和所述下层canvas对象重叠放置；
所述上层canvas对象使用2d编程接口，用来响应用户的鼠标操作，输出文字和图形，且所述上层canvas对象的背景色设置为透明的；
所述下层canvas对象使用WebGL编程接口，对灰度图像进行窗宽/窗位的计算和调整、旋转、缩放和反白，以便于灰度图像的显示。
优选的是，其中，所述的灰度图像的快速显示方法，所述上层canvas对象为一个canvas对象。
优选的是，其中，所述的灰度图像的快速显示方法，所述上层canvas对象包括两个大小完全相同的第一canvas对象和第二canvas对象，所述第一canvas对象位于所述第二canvas对象的上面且重叠放置，所述第一canvas对象用于快速响应鼠标的图像绘制操作和响应用户操作事件，所述第二canvas对象用于绘制已经固定的文字信息和图形。
优选的是，其中，所述的灰度图像的快速显示方法，在所述下层canvas对象使用WebGL编程接口，对灰度图像进行窗宽/窗位的计算和调整、旋转、缩放和反白之前，还包括步骤：
在浏览器Web页面中，使用DOM里的image对象加载待显示的灰度图像，若灰度图像的灰度值位数大于8位时，则需将灰度图像转换成RGB或者RGBA格式的浏览器支持的图像文件；
并将WebGL的texImage2D或者texSubImage2D转成WebGL的纹理对象Texture。
优选的是，其中，所述的灰度图像的快速显示方法，所述下层canvas对象使用WebGL编程接口，对灰度图像进行窗宽/窗位的计算和调整、旋转、缩放和反白具体包括：
在WebGL环境中显示灰度图像时，对于RGB或者RGBA格式的灰度图像，在fragmentshader中，则需先将通过RGB或者RGBA传递进来的灰度值复原，然后进行窗宽/窗位的计算及ModalityLUT的变换，再使用vertex shader进行灰度图像的旋转和缩放操作，以使所述下层canvas对象呈现的是最后显示的结果。
优选的是，其中，所述的灰度图像的快速显示方法，所述建立大小完全相同的位于上面的上层canvas对象和位于下面的下层canvas对象中，通过z-index属性来控制canvas对象显示的优先级。
本发明至少包括以下有益效果：由于在浏览器网页内需显示灰度图像的区域内，建立了大小完全相同的位于上面的上层canvas对象和位于下面的下层canvas对象，且所述上层canvas对象和所述下层canvas对象重叠放置，也就是说灰度图像的显示由这两层的canvas对象共同操作决定。灰度图像显示时，将复杂的、计算量大的图像操作由下层canvas对象使用的WebGL编程接口去实现，而需要灵活控制，或者WebGL编程接口极难实现的文字显示等操作由上层canvas对象使用2d编程接口来实现，编程灵活性提高的同时也提高了灰度图像的处理性能，能够快速显示图像。此外，灰度图像的分层显示和更新，能够进行细化的更新控制，从而获得比全部刷新更好的性能。
本发明的其它优点、目标和特征将部分通过下面的说明体现，部分还将通过对本发明的研究和实践而为本领域的技术人员所理解。
具体实施方式
下面对本发明做进一步的详细说明，以令本领域技术人员参照说明书文字能够据以实施。
本发明实施例提供了一种灰度图像的快速显示方法，该方法包括：在浏览器网页内需显示灰度图像的区域内，建立大小完全相同的位于上面的上层canvas对象和位于下面的下层canvas对象，且所述上层canvas对象和所述下层canvas对象重叠放置，具体操作过程中，通过z-index属性来控制canvas对象显示的优先级；所述上层canvas对象使用2d编程接口，用来响应用户的鼠标操作，输出文字和图形，所述图形可以为直线、圆等等，且所述上层canvas对象的背景色设置为透明的；所述下层canvas对象使用WebGL编程接口，对灰度图像进行窗宽/窗位的计算和调整、旋转、缩放和反白，以便于灰度图像的显示。
由于在浏览器网页内需显示灰度图像的区域内，建立了大小完全相同的位于上面的上层canvas对象和位于下面的下层canvas对象，且所述上层canvas对象和所述下层canvas对象重叠放置，也就是说灰度图像的显示由这两层的canvas对象共同操作决定。灰度图像显示时，将复杂的、计算量大的图像操作由下层canvas对象使用的WebGL编程接口去实现，而需要灵活控制，或者WebGL编程接口极难实现的文字显示等操作由上层canvas对象使用2d编程接口来实现，编程灵活性提高的同时也提高了灰度图像的处理性能，能够快速显示图像。
在其中一个具体实施方式中，所述的灰度图像的快速显示方法，所述上层canvas对象为一个canvas对象。
在其中一个具体实施方式中，所述的灰度图像的快速显示方法，所述上层canvas对象包括两个大小完全相同的第一canvas对象和第二canvas对象，所述第一canvas对象位于所述第二canvas对象的上面且重叠放置，所述第一canvas对象用于快速响应鼠标的图像绘制操作，如用户鼠标痕迹的追踪等，并响应用户操作事件，所述第二canvas对象用于绘制已经固定的文字信息和图形。
对于上层canvas对象的设置，可以一个canvas对象，或者在某些优化的场景下，设置二个canvas对象，位于下面的那个canvas对象用来绘制不经常变化的内容，如固定下来的文字信息、直线等。因此，灰度图像的分层显示和更新，能够进行细化的更新控制，从而获得比全部刷新更好的性能。
需要说明的是，在图像处理显示的时候，根据用户的操作判断，如果是改变了图像显示的内容和处理的参数，只更新使用WebGL编程接口的下层canvas对象即可，如果只改变了图像位置等信息，只更新上层canvas对象即可；如果都更新了，逐个更新每个canvas对象即可。
在其中一个具体实施方式中，所述的灰度图像的快速显示方法，在所述下层canvas对象使用WebGL编程接口，对灰度图像进行窗宽/窗位的计算和调整、旋转、缩放和反白之前，还包括步骤：
在浏览器Web页面中，使用DOM里的image对象加载待显示的灰度图像，若灰度图像的灰度值位数大于8位时，则需将灰度图像转换成RGB或者RGBA格式的浏览器支持的图像文件，如jpg，png等；具体的转换过程可以为：把大于8位的灰度图像的像素值按一定的方式截取成若干段，分别存储在R、G、B或R、G、B、A的各个通道里。通过这个方法，能够通过转换后的RGB或RGBA的值反向计算出原始的灰度值，即分别从R、G、B和A通道中取出对应于各个通道的像素值，经过计算即可得到原始像素值，且不会造成灰度图像精度损失的问题。将灰度图像转换成RGB或者RGBA格式的浏览器支持的图像文件也可以采用其它的方法，并不局限于本实施例所述的方法，只要这个方法是可逆的即可。
并将WebGL的texImage2D或者texSubImage2D转成WebGL的纹理对象Texture。
在其中一个具体实施方式中，所述的灰度图像的快速显示方法，所述下层canvas对象使用WebGL编程接口，对灰度图像进行窗宽/窗位的计算和调整、旋转、缩放和反白具体包括：在WebGL环境中显示灰度图像时，对于RGB或者RGBA格式的灰度图像，在fragmentshader中，则需先将通过RGB或者RGBA传递进来的灰度值复原，然后应用DICOM图像常用的窗宽/窗位计算及ModalityLUT的变换后，再使用vertex shader进行灰度图像的旋转和缩放操作，以使所述下层canvas对象呈现的是最后显示的结果。每次刷新图像时，都是直接使用已有的纹理对象texture进行展示绘制的过程，从而保证用户操作的响应速度极快。
因此，整个图像在前端处理过程中，无需使用JS对图像进行解码或调窗运算，且不用使用2d canvas接口的drawimage接口，性能大幅度提高。
如上所述，本发明提供的方法，实现了灰度图像的分层显示和更新，大幅度提高了灰度图像的处理性能，同时也提高了灰度图像的显示速度。
尽管本发明的实施方案已公开如上，但其并不仅仅限于说明书和实施方式中所列运用。它完全可以被适用于各种适合本发明的领域。对于熟悉本领域的人员而言，可容易地实现另外的修改。因此在不背离权利要求及等同范围所限定的一般概念下，本发明并不限于特定的细节。

Claims (6)

1.灰度图像的快速显示方法，其特征在于，包括：
在浏览器网页内需显示灰度图像的区域内，建立大小完全相同的位于上面的上层canvas对象和位于下面的下层canvas对象，且所述上层canvas对象和所述下层canvas对象重叠放置；
所述上层canvas对象使用2d编程接口，用来响应用户的鼠标操作，输出文字和图形，且所述上层canvas对象的背景色设置为透明的；
所述下层canvas对象使用WebGL编程接口，对灰度图像进行窗宽/窗位的计算和调整、旋转、缩放和反白，以便于灰度图像的显示。
2.如权利要求1所述的灰度图像的快速显示方法，其特征在于，所述上层canvas对象为一个canvas对象。
3.如权利要求1所述的灰度图像的快速显示方法，其特征在于，所述上层canvas对象包括两个大小完全相同的第一canvas对象和第二canvas对象，所述第一canvas对象位于所述第二canvas对象的上面且重叠放置，所述第一canvas对象用于快速响应鼠标的图像绘制操作和响应用户操作事件，所述第二canvas对象用于绘制已经固定的文字信息和图形。
4.如权利要求1所述的灰度图像的快速显示方法，其特征在于，在所述下层canvas对象使用WebGL编程接口，对灰度图像进行窗宽/窗位的计算和调整、旋转、缩放和反白之前，还包括步骤：
在浏览器Web页面中，使用DOM里的image对象加载待显示的灰度图像，若灰度图像的灰度值位数大于8位时，则需将灰度图像转换成RGB或者RGBA格式的浏览器支持的图像文件；
并将WebGL的texImage2D或者texSubImage2D转成WebGL的纹理对象Texture。
5.如权利要求4所述的灰度图像的快速显示方法，其特征在于，所述下层canvas对象使用WebGL编程接口，对灰度图像进行窗宽/窗位的计算和调整、旋转、缩放和反白具体包括：
在WebGL环境中显示灰度图像时，对于RGB或者RGBA格式的灰度图像，在fragmentshader中，则需先将通过RGB或者RGBA传递进来的灰度值复原，然后进行窗宽/窗位的计算及ModalityLUT的变换，再使用vertex shader进行灰度图像的旋转和缩放操作，以使所述下层canvas对象呈现的是最后显示的结果。
6.如权利要求1所述的灰度图像的快速显示方法，其特征在于，所述建立大小完全相同的位于上面的上层canvas对象和位于下面的下层canvas对象中，通过z-index属性来控制canvas对象显示的优先级。
CN201911066491.9A 2019-11-04 2019-11-04 灰度图像的快速显示方法 Active CN110825995B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911066491.9A CN110825995B (zh) 2019-11-04 2019-11-04 灰度图像的快速显示方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911066491.9A CN110825995B (zh) 2019-11-04 2019-11-04 灰度图像的快速显示方法

Publications (2)

Publication Number Publication Date
CN110825995A true CN110825995A (zh) 2020-02-21
CN110825995B CN110825995B (zh) 2020-09-29

Family

ID=69552616

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911066491.9A Active CN110825995B (zh) 2019-11-04 2019-11-04 灰度图像的快速显示方法

Country Status (1)

Country Link
CN (1) CN110825995B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112185522A (zh) * 2020-09-27 2021-01-05 上海联影医疗科技股份有限公司 一种信息处理方法、装置及终端

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106709240A (zh) * 2016-12-01 2017-05-24 彭志勇 医学dicom图像显示方法
CN106709880A (zh) * 2016-12-08 2017-05-24 彭志勇 灰度图像的保存方法和灰度图像原始像素的获取方法
WO2017105769A1 (en) * 2015-12-18 2017-06-22 Intel Corporation Technologies for native game experience in web rendering engine
CN107038734A (zh) * 2016-11-23 2017-08-11 浙江工业大学 一种用于Windows系统的图像叠加文本的方法
CN107729105A (zh) * 2017-09-29 2018-02-23 中国石油化工股份有限公司 一种基于Web的地震底图与剖面联动方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2017105769A1 (en) * 2015-12-18 2017-06-22 Intel Corporation Technologies for native game experience in web rendering engine
CN107038734A (zh) * 2016-11-23 2017-08-11 浙江工业大学 一种用于Windows系统的图像叠加文本的方法
CN106709240A (zh) * 2016-12-01 2017-05-24 彭志勇 医学dicom图像显示方法
CN106709880A (zh) * 2016-12-08 2017-05-24 彭志勇 灰度图像的保存方法和灰度图像原始像素的获取方法
CN107729105A (zh) * 2017-09-29 2018-02-23 中国石油化工股份有限公司 一种基于Web的地震底图与剖面联动方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
谢贤博 等: "基于WebGL的Canvas元素2D绘制加速", 《设计研究与应用》 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112185522A (zh) * 2020-09-27 2021-01-05 上海联影医疗科技股份有限公司 一种信息处理方法、装置及终端

Also Published As

Publication number Publication date
CN110825995B (zh) 2020-09-29

Similar Documents

Publication Publication Date Title
EP1272977B1 (en) Shape processor
US20190130217A1 (en) Trainable vision scaler
JP3072250B2 (ja) グリッド・フィッティド・フォントのグレイスケール処理を用いたフォント・レンダリング方法
US7417647B2 (en) Making an overlay image edge artifact less conspicuous
CN105575314B (zh) 一种灰阶处理方法、灰阶处理装置及显示装置
CA2421894A1 (en) Hardware-enhanced graphics acceleration of pixel sub-component-oriented images
US20150287220A1 (en) Rendering text using anti-aliasing techniques, cached coverage values, and/or reuse of font color values
US20100141670A1 (en) Color Packing Glyph Textures with a Processor
EP2766874B1 (en) Caching coverage values for rendering text using anti-aliasing techniques
US20100283780A1 (en) Information processing apparatus, information processing method, and storage medium
CN109949769A (zh) 能够灰度扩展的显示装置
WO2005094061A1 (en) Graphics processor with gamma translation
CN110825995B (zh) 灰度图像的快速显示方法
JPH01113789A (ja) 中間調表示装置
WO2007014365A2 (en) Image processing using saltating samples
EP2583239B1 (en) Lookup tables for text rendering
US20090256852A1 (en) Character display apparatus
JPH06282648A (ja) グレイスケールスプライン調整方法、装置及びデータ処理システム
US7006107B2 (en) Anisotropic anti-aliasing
US20130063475A1 (en) System and method for text rendering
KR100705188B1 (ko) 문자 폰트 표시 방법
CN113704164B (zh) 彩屏阅读器的刷新方法、彩屏阅读器及计算机存储介质
CN103456255B (zh) 显示器像素驱动系统及显示器子像素驱动流程
CN108230244B (zh) 一种针对医学图像减少放大精度损失的方法
CN112287636A (zh) 一种点阵字阴影叠加方法及系统

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant