CN114549303B - 图像显示、处理方法、装置、设备和存储介质 - Google Patents
图像显示、处理方法、装置、设备和存储介质 Download PDFInfo
- Publication number
- CN114549303B CN114549303B CN202210040729.6A CN202210040729A CN114549303B CN 114549303 B CN114549303 B CN 114549303B CN 202210040729 A CN202210040729 A CN 202210040729A CN 114549303 B CN114549303 B CN 114549303B
- Authority
- CN
- China
- Prior art keywords
- image
- transformation
- processing
- size
- conversion
- 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.)
- Active
Links
- 238000012545 processing Methods 0.000 title claims abstract description 160
- 238000000034 method Methods 0.000 title claims abstract description 101
- 238000003672 processing method Methods 0.000 title claims abstract description 14
- 230000009466 transformation Effects 0.000 claims abstract description 231
- 238000006243 chemical reaction Methods 0.000 claims abstract description 127
- 230000008569 process Effects 0.000 claims description 58
- 238000013519 translation Methods 0.000 claims description 35
- 230000009467 reduction Effects 0.000 claims description 18
- 230000001131 transforming effect Effects 0.000 claims description 9
- 230000007704 transition Effects 0.000 claims description 9
- 230000004044 response Effects 0.000 claims description 8
- 230000003321 amplification Effects 0.000 claims description 6
- 238000003199 nucleic acid amplification method Methods 0.000 claims description 6
- 238000012544 monitoring process Methods 0.000 claims description 3
- 230000000694 effects Effects 0.000 abstract description 14
- 238000013473 artificial intelligence Methods 0.000 abstract description 3
- 238000013135 deep learning Methods 0.000 abstract description 3
- 238000002372 labelling Methods 0.000 description 47
- 239000011159 matrix material Substances 0.000 description 23
- 238000010586 diagram Methods 0.000 description 22
- 238000004590 computer program Methods 0.000 description 10
- 238000004891 communication Methods 0.000 description 9
- 230000005540 biological transmission Effects 0.000 description 7
- 230000008901 benefit Effects 0.000 description 5
- 238000006073 displacement reaction Methods 0.000 description 4
- 230000007246 mechanism Effects 0.000 description 4
- 230000000903 blocking effect Effects 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 230000003993 interaction Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 238000004091 panning Methods 0.000 description 3
- 230000009471 action Effects 0.000 description 2
- 238000013136 deep learning model Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000012549 training Methods 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 239000008186 active pharmaceutical agent Substances 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T3/00—Geometric image transformations in the plane of the image
- G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T3/00—Geometric image transformations in the plane of the image
- G06T3/60—Rotation of whole images or parts thereof
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Image Processing (AREA)
- Editing Of Facsimile Originals (AREA)
Abstract
本公开提供了一种图像显示、处理方法、装置、设备和存储介质，涉及计算机技术领域，具体涉及网页处理、图像处理、深度学习等人工智能技术领域。图像显示方法包括：响应于针对操作对象的变换操作，获取所述变换操作对应的变换参数，所述操作对象承载当前图像，所述当前图像的尺寸小于所述当前图像对应的原图的尺寸；将所述变换参数发送给服务端，所述变换参数用于触发所述服务端基于所述变换参数，对所述原图进行转换处理，以获得转换图像，其中，所述转换图像的尺寸与所述当前图像的尺寸相同；接收所述服务端发送的所述转换图像；采用所述转换图像替换所述当前图像，并显示所述操作对象承载的所述转换图像。本公开可以提高图像显示效果。
Description
技术领域
本公开涉及计算机技术领域，具体涉及网页处理、图像处理、深度学习等人工智能技术领域，尤其涉及一种图像显示、处理方法、装置、设备和存储介质。
背景技术
随着深度学习技术的发展，越来越多场景下可以使用深度学习模型进行处理。深度学习模型可以基于训练数据进行训练，训练数据可以包括图像以及图像的标注数据。
为了提高标注数据的准确度，通常采用超高分辨率图像。
发明内容
本公开提供了一种图像显示、处理方法、装置、设备和存储介质。
根据本公开的一方面，提供了一种图像显示方法，包括：响应于针对操作对象的变换操作，获取所述变换操作对应的变换参数，所述操作对象承载当前图像，所述当前图像的尺寸小于所述当前图像对应的原图的尺寸；将所述变换参数发送给服务端，所述变换参数用于触发所述服务端基于所述变换参数，对所述原图进行转换处理，以获得转换图像，其中，所述转换图像的尺寸与所述当前图像的尺寸相同；接收所述服务端发送的所述转换图像；采用所述转换图像替换所述当前图像，并显示所述操作对象承载的所述转换图像。
根据本公开的另一方面，提供了一种图像处理方法，包括：接收客户端发送的变换参数，所述变换参数基于所述客户端内的操作对象的变换操作产生，所述操作对象承载当前图像，所述当前图像的尺寸小于所述当前图像对应的原图的尺寸；基于所述变换参数，对所述原图进行转换处理，以获得转换图像，其中，所述转换图像的尺寸与所述当前图像的尺寸相同；将所述转换图像发送给所述客户端。
根据本公开的另一方面，提供了一种图像显示装置，包括：获取模块，用于响应于针对操作对象的变换操作，获取所述变换操作对应的变换参数，所述操作对象承载当前图像，所述当前图像的尺寸小于所述当前图像对应的原图的尺寸；第一发送模块，用于将所述变换参数发送给服务端，所述变换参数用于触发所述服务端基于所述变换参数，对所述原图进行转换处理，以获得转换图像，其中，所述转换图像的尺寸与所述当前图像的尺寸相同；第一接收模块，用于接收所述服务端发送的所述转换图像；第一显示模块，用于采用所述转换图像替换所述当前图像，并显示所述操作对象承载的所述转换图像。
根据本公开的另一方面，提供了一种图像处理装置，包括：第一接收模块，用于接收客户端发送的变换参数，所述变换参数基于所述客户端内的操作对象的变换操作产生，所述操作对象承载当前图像，所述当前图像的尺寸小于所述当前图像对应的原图的尺寸；第一处理模块，用于基于所述变换参数，对所述原图进行转换处理，以获得转换图像，其中，所述转换图像的尺寸与所述当前图像的尺寸相同；第一发送模块，用于将所述转换图像发送给所述客户端。
根据本公开的另一方面，提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如上述任一方面的任一项所述的方法。
根据本公开的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据上述任一方面的任一项所述的方法。
根据本公开的另一方面，提供了一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据上述任一方面的任一项所述的方法。
根据本公开的技术方案，可以提高图像显示效果。
应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。
附图说明
附图用于更好地理解本方案，不构成对本公开的限定。其中：
图1是根据本公开第一实施例的示意图；
图2是根据本公开第二实施例的示意图；
图3是根据本公开第三实施例的示意图；
图4是根据本公开第四实施例的示意图；
图5是根据本公开第五实施例的示意图；
图6是根据本公开第六实施例的示意图；
图7是根据本公开第七实施例的示意图；
图8是根据本公开第八实施例的示意图；
图9是根据本公开第九实施例的示意图；
图10是用来实现本公开实施例的图像显示方法或图像处理方法的电子设备的示意图。
具体实施方式
以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
为了提高标注数据的准确度，通常采用超高分辨率图像。超高分辨率图像的宽和高的像素个数通常为5000以上，比如，超高分辨率图像的尺寸为9600px*5400px，px表示像素。
超高分辨率图像具有清晰度高、细节良好的优点，但伴随而来的是，超高分辨率图像的尺寸和体积较大。又由于用于标注数据的客户端(可称为标注组件)，一般从服务端获取超高分辨率图像，从而，在客户端，存在加载速度慢、响应速度慢、卡顿、长时间白屏等问题。
为了至少在一定程度上解决上述至少一个问题，本公开可以提供如下实施例。
图1是根据本公开第一实施例的示意图，本实施例提供一种图像显示方法，本实施例的方法包括：
101、响应于针对操作对象的变换操作，获取所述变换操作对应的变换参数，所述操作对象承载当前图像，所述当前图像的尺寸小于所述当前图像对应的原图的尺寸。
102、将所述变换参数发送给服务端，所述变换参数用于触发所述服务端基于所述变换参数，对所述原图进行转换处理，以获得转换图像，其中，所述转换图像的尺寸与所述当前图像的尺寸相同。
103、接收所述服务端发送的所述转换图像。
104、采用所述转换图像替换所述当前图像，并显示所述操作对象承载的所述转换图像。
其中，本实施例的图像显示方法可以应用于训练数据的标注场景，具体可以应用于工业视觉智能平台的标注组件，相应地，图像可以为待标注的图像。
以标注场景为例，如图2所示，标注场景下的系统可以包括：客户端201和服务端202，客户端与服务端可以通过通信网络连接。客户端201可以部署在用户终端上，服务端202可以部署在服务器上，用户终端可以包括：个人电脑(Personal Computer，PC)、移动设备(如手机、便携式电脑)等；服务器可以为本地服务器或者云端服务器等。客户端可以为Web端、PC端、移动端等，本实施例为此不作限定。
本实施例的执行主体可以为客户端，以Web端为例，客户端可以具体为浏览器中的标注组件。
可以理解的是，上述场景说明只是便于对本公开实施例的理解进行的示例性说明，本公开实施例的执行不限于上述场景，还可以应用到任何适用的场景中。
以标注场景为例，对本实施例的图像显示方法进行说明如下：
操作对象，可以为标注组件内的操作对象，具体可以为画布(canvas)。
如图3所示，标注组件的显示区域，可以称为视口(viewport)301，标注组件内的画布302的初始尺寸可以与视口的尺寸相同，画布302上可以承载(carry)有图像303(图3中斜线填充图表示)。
图像可以跟随画布变换，比如，用户(如，标注员)对画布进行放大操作，此时，画布上承载的图像可以跟随画布放大，随着画布的放大，标注组件的显示区域(视口)可能只能显示未放大时的部分图像，其余图像处于非显示状态，即隐藏状态。参见图3，随着画布的放大，图像可以从占据视口的部分区域，变换为占据视口的全部区域。
当前图像，是指操作对象上承载的图像，为客户端显示的图像，相应地，服务端可以存储当前图像对应的原图。
原图，是指未经压缩等处理的图像，原图的分辨率较高。在标注场景下，原图可以为超高分辨率图像，比如，尺寸为9600px*5400px的图像。
客户端的显示区域(如，标注组件的视口)的尺寸，通常比原图的尺寸小，比如，视口的尺寸为960px*540px。
当前图像的尺寸将基于视口的尺寸确定，当前图像的尺寸小于原图的尺寸，最大为视口的尺寸。
画布可以基于用户的变换操作进行变换，变换操作可以包括：平移操作、旋转操作、缩放操作中的一项或多项。相应地，变换参数可以包括：平移参数、旋转参数、缩放参数中的一项或多项。
变换参数可以具体为二维矢量变换矩阵(viewporTransform)，二维矢量变换矩阵可以包括6个参数，可以表示为：
[scaleX,skewX,skewY,scaleY,translateX,translateY]；
各参数的含义如表1所示：
表1
| 参数 | 含义 | 默认值 |
| scaleX | X轴方向缩放比 | 1 |
| skewX | X轴旋转角度 | 0 |
| skewY | Y轴旋转角度 | 0 |
| scaleY | Y轴方向缩放比 | 1 |
| translateX | X轴方向位移 | 0 |
| translateY | Y轴方向位移 | 0 |
其中，translateX和translateY为平移参数，skewX和skewY为旋转参数，scaleX和scaleY为缩放参数。
针对操作对象的变换操作对应的变换参数，可用于服务端的图像处理过程，使得客户端的操作对象的变换过程与服务端的图像变换过程的一致，从而，可以实现操作对象承载的图像跟随操作对象变换。
针对服务端，服务端是对原图进行处理，以保证图像的清晰度和细节，另外，服务端获得的转换图像的尺寸与当前图像的尺寸相同，而不是服务端直接将原图返回给客户端，由于转换图像的尺寸相对原图的尺寸较小，客户端可以较快地从服务端获取转换图像，可以避免客户端长时间白屏的问题。关于服务端的图像处理过程，具体可以参见后续实施例。
客户端接收到服务端发送的转换图像后，可以采用转换图像替换当前图像，并显示该转换图像。
具体地，客户端接收的来自服务端的转换图像，可以认为是客户端从服务端下载转换图像，客户端可以在下载完成后，采用转换图像替换当前图像，并显示该转换图像。
本实施例中，针对操作对象的变换操作，服务端可以基于客户端发送的变换参数对原图进行转换处理，由于原图的尺寸较大，即分辨率较高，因此，对原图进行转换处理，可以保留原图的清晰度高、细节良好的优点；并且，转换图像的尺寸与当前图像的尺寸相同，即，服务端返回给客户端的是尺寸较小的图像，从而可以提高图像数据的传输速度，避免客户端长时间白屏的问题。因此，本实施例可以提高图像显示效果。
如上描述，客户端可以从服务端获取图像。
获取过程可以分为初始化过程，以及操作对象的变换操作过程。
初始化过程中，客户端从服务端获取的图像可以称为初始化图像。在标注组件场景下，初始化图像的尺寸将基于标注组件的视口的尺寸确定，所以，该初始化图像也可以称为视口图。
客户端(如，标注组件)获得初始化图像(如，视口图)后，初始化图像可以承载在客户端内的操作对象(如，画布)上，并通过客户端的显示区域(如，标注组件的视口)进行显示。
用户可以对操作对象进行变换操作，随着操作对象的变换，操作对象承载的图像也跟随变换。当前显示阶段对应的图像可以称为当前图像，当前图像可以为初始化图像，或者，跟随操作对象变换后的图像。
比如，画布上承载的初始化图像用P0表示，用户对画布进行放大操作后，画布上承载的图像用P1表示，用户还可以在显示P1后，再次对画布进行放大操作。基于上述示例，用户针对承载P0的画布进行变换操作时的当前图像为P0，针对承载P1的画布进行变换操作时的当前图像为P1。
不论，当前图像为P0(初始化图像)或P1(非初始化图像)，变换参数均用于表明变换后的操作对象相对于初始状态的操作对象的变换关系，或者说，变换后的图像相对于初始化图像的变换关系。比如，在承载P0的基础上，对画布放大2倍时的变换参数为放大2倍，假设放大2倍后，画布上承载P1，在承载P1的基础上，再次对画布放大2倍时的变换参数为放大4倍(相对于P0，而不是P1)。
针对初始化过程：
一些实施例中，若所述当前图像为初始化图像，所述响应于针对操作对象的变换操作之前，所述方法包括：向所述服务端发送请求消息，所述请求消息中包含尺寸标识信息，所述尺寸标识信息用于标识显示区域的尺寸，所述请求消息用于触发所述服务端基于所述尺寸标识信息，对所述原图进行缩小处理，以获得所述初始化图像；接收所述服务端发送的所述初始化图像；在所述显示区域，显示所述操作对象承载的所述初始化图像。
其中，以客户端为Web端的标注组件，显示区域为标注组件视口为例，如图4所示，Web端初始化时，Web端可以显示加载中(loading)，Web端向服务端发送请求消息，该请求消息中包含用于标识视口尺寸的尺寸标识信息。
服务端可以预先配置尺寸标识信息与尺寸之间的相互关系，比如，可以配置尺寸标识信息为0，对应一种尺寸，尺寸标识信息为1，对应另一种尺寸，从而，服务端可以基于尺寸标识信息确定标注组件视口的尺寸，进而获得符合标注组件视口要求的初始化图像。
以标注组件视口的尺寸为960px*540px为例，假设尺寸标识信息为1对应该视图尺寸960px*540px，因此，Web端可以向服务端发送尺寸标识信息＝1，服务端接收该尺寸标识信息确定标注组件视口的尺寸为960px*540px。
服务端存储的原图为超高分辨率图像，假设尺寸为9600px*5400px。服务端确定标注组件视口的尺寸后，可以基于该尺寸对原图进行缩小处理。
进一步地，缩小处理可以具体为等比例缩小处理，等比例是指图像的宽(width)和高(height)的缩小比例值是相同的。另外，缩小处理时可以是以原图的中点作为基准点进行等比例缩小处理，即，缩小处理后的图像的中点与原图的中点一致。
基于上述示例，可以对原图进行等比例缩小10倍，以获得初始化图像，图4中的初始化图像用视口图表示。
上述示例，以视口尺寸与原图尺寸的宽、高比例一致为例，在两者不一致时，可以采用如下方式进行处理：
视口的宽高分别用vw、vh表示，原图的宽高分别用w、h表示。计算将w缩小为vw时的缩放比r＝vw/w，若r*h<＝vh，说明标注组件视口能完整包含视口图，则确定最终缩放比(具体为缩小处理的比例值)为r＝vw/w；若r*h>vh，说明标注组件视口不能完整包含视口图，此时需要以高为基准，即，确定最终缩放比(具体为缩小处理的比例值)为r＝vh/h。
服务端生成视口图后，可以将视口图发送给Web端，以供Web端显示。具体显示方式可以是Web端将接收的视口图渲染在浏览器的网页上，渲染方式可以为上下左右居中。
从上述初始化过程可知，初始化图像是服务端对原图进行缩小处理后获得的图像，由于初始化图像比原图的尺寸小很多，可以解决客户端加载速度慢的问题。
针对操作对象的变换操作过程：
以当前图像为初始化图像、操作对象为画布为例，用户可以对承载初始化图像的操作对象进行变换操作。
如图5所示，初始化图像用视口图表示，画布在变换操作后，即Web端更新后，画布上承载的图像为转换图像。
标注组件视口的尺寸为vw*vh，原图的尺寸为w*h。
其中，用户对画布进行变换操作时，Web端可以将变换操作对应的变换参数发送给服务端，服务端基于变换参数对原图进行转换处理，以获得转换图像，并将转换图像发送给Web端进行显示。
针对服务端的处理流程，一些实施例中，所述原图在所述变换处理之前所在区域为裁剪区，所述基于所述变换参数，对所述原图进行转换处理，以获得转换图像，包括：基于所述变换参数，对所述原图进行变换处理，以获得变换处理后的原图；基于所述裁剪区，对所述变换处理后的原图进行裁剪处理，以获得裁剪处理后的原图；基于所述原始的尺寸与初始化图像的尺寸之间的比例值，对所述裁剪处理后的原图进行缩小处理，以获得所述转换图像。
所述变换参数包括：平移参数、旋转参数、缩放参数中的一项或多项，相应地，所述基于所述变换参数，对所述原图进行变换处理，包括如下项中的一项或多项：基于所述平移参数和所述比例值，对所述原图进行平移处理；基于所述旋转参数，对所述原图进行旋转处理；基于所述缩放参数，对所述原图进行缩放处理。
其中，参见图5，以变换处理包括平移处理和缩放处理为例。变换参数可以为二维矢量变换矩阵，该矩阵可以具体为[2,0,0,2,100,100]。假设原图的尺寸与初始化图像的尺寸的比例值用ratio表示，其中，若原图的尺寸为9600px*5400px，视口的尺寸为960px*540px，则ratio＝10。如图5所示，在服务端，可以基于平移参数以及比例值(100,100,ratio)，对原图(尺寸为w*h)进行平移变换，即，x轴方向平移100*ratio，y轴方向平移100*ratio；再对平移变换后的原图，以平移变换后的原图的中点为基准点进行缩放变换，本实施例中，缩放变换具体为放大2倍，即放大参数为(2,2)；再基于裁剪区，对放大变换后的原图进行裁剪；其中，裁剪区为原图在变换处理之前所在区域，比如，可以以原图的左上角为坐标原点，裁剪区在x轴方向上的尺寸为原图的宽w，在y轴方向上的尺寸为原图的高h；再对裁剪后的原图，按照比例值ratio，缩小为尺寸为vw*vh的转换图像，即，vw＝w/ratio，vh＝h/ratio。之后，将该转换图像渲染在Web端。
上述先平移再缩放为例，可以理解的是，平移、缩放、旋转的执行顺序不限定。
上述过程中，服务端可以基于客户端发送的变换参数对原图进行转换，并将变换后的原图等比例缩小到客户端的视口大小，以获得转换图像。由于转换图像的尺寸与视口图的尺寸一致，尺寸和体积较小，从而传输速度较快，可以解决客户端长时间白屏的问题；并且，转换图像由于是对原图进行转换后获得的，清晰度和细节与原图一致，从而显示效果好。
进一步地，变换处理可以包括平移、缩放、旋转中的一项或多项，可以适用于多种变换场景。
图6是根据本公开第六实施例的示意图，本实施例提供一种图像处理方法，本实施例的方法包括：
601、接收客户端发送的变换参数，所述变换参数基于所述客户端内的操作对象的变换操作产生，所述操作对象承载当前图像，所述当前图像的尺寸小于所述当前图像对应的原图的尺寸。
602、基于所述变换参数，对所述原图进行转换处理，以获得转换图像，其中，所述转换图像的尺寸与所述当前图像的尺寸相同。
603、将所述转换图像发送给所述客户端。
结合图2所示的场景图，本实施例的图像处理方法可以应用于服务端。
本实施例中，服务端可以基于客户端发送的变换参数对原图进行转换处理，由于原图的尺寸较大，即分辨率较高，因此，对原图进行转换处理，可以保留原图的清晰度高、细节良好的优点；并且，转换图像的尺寸与当前图像的尺寸相同，即，服务端返回给客户端的是尺寸较小的图像，从而可以提高图像数据的传输速度，避免客户端长时间白屏的问题。因此，本实施例可以提高图像处理效果，进而在客户端可以提高图像显示效果。
一些实施例中，若所述当前图像为初始化图像，所述初始化图像显示在所述客户端的显示区域，所述接收客户端发送的变换参数之前，所述方法还包括：接收所述客户端发送的请求消息，所述请求消息中包含尺寸标识信息，所述尺寸标识信息用于标识所述显示区域的尺寸；基于所述尺寸标识信息，对所述原图进行缩小处理，以获得所述初始化图像；将所述初始化图像发送给所述客户端。
其中，关于初始化图像的获取过程可以参见图4。
从上述初始化过程可知，初始化图像是服务端对原图进行缩小处理后获得的图像，由于初始化图像比原图的尺寸小很多，可以解决客户端加载速度慢的问题。
一些实施例中，所述原图在所述变换处理之前所在区域为裁剪区，所述基于所述变换参数，对所述原图进行转换处理，以获得转换图像，包括：基于所述变换参数，对所述原图进行变换处理，以获得变换处理后的原图；
基于所述裁剪区，对所述变换处理后的原图进行裁剪处理，以获得裁剪处理后的原图；基于所述原始的尺寸与初始化图像的尺寸之间的比例值，对所述裁剪处理后的原图进行缩小处理，以获得所述转换图像。
其中，所述变换参数包括：平移参数、旋转参数、缩放参数中的一项或多项，相应地，所述基于所述变换参数，对所述原图进行变换处理，包括如下项中的一项或多项：基于所述平移参数和所述比例值，对所述原图进行平移处理；基于所述旋转参数，对所述原图进行旋转处理；基于所述缩放参数，对所述原图进行缩放处理。
其中，基于变换参数对原图进行转换的过程可以参见图5。
服务端可以基于客户端发送的变换参数对原图进行转换，并将变换后的原图等比例缩小到客户端的视口大小，以获得转换图像。由于转换图像的尺寸与视口图的尺寸一致，尺寸和体积较小，从而传输速度较快，可以解决客户端长时间白屏的问题；并且，转换图像由于是对原图进行转换后获得的，清晰度和细节与原图一致，从而显示效果好。
通过变换处理可以包括平移、缩放、旋转中的一项或多项，可以适用于多种变换场景。
上述分别描述了客户端和服务端的执行流程，下面将结合客户端和服务端，对两者的交互流程进行描述。
图7是根据本公开第七实施例的示意图，本实施例提供一种图像显示方法，本实施例以客户端为标注组件，操作对象为画布，显示区域为标注组件的视口，变换参数为二维矢量变换矩阵为例，本实施例的方法包括：
701、标注组件向服务端发送请求消息，所述请求消息中包含尺寸标识信息，所述尺寸标识信息用于标识所述标注组件的视口的尺寸。
702、服务端基于所述尺寸标识信息，对原图进行缩小处理，以获得初始化图像。
703、服务端将初始化图像发送给标注组件。
704、标注组件在视口中显示画布的内容层承载的初始化图像。
其中，画布可以分为多层，比如包括内容层和背景层，其中，内容层位于背景层的上方。内容层也可以称为标注层。
本实施例中，内容层用于承载初始化图像，以及转换图像，背景层用于承载背景图像。
705、标注组件对所述初始化图像进行复制处理，以获得背景图像。
其中，通过复制处理，可以得到尺寸以及内容与初始化图像一致的背景图像。
通过获得背景图像，可以在标注组件未获得服务端返回的转换图像之前，显示转换后的背景图像，实现快速响应用户操作，提高转换过程的平滑性。
其中，704-705无时序限定关系。
706、标注组件响应于针对所述画布的变换操作，获取所述变换操作对应的二维矢量变换矩阵。
其中，标注组件可以监听用户针对所述画布的变换操作所产生的事件；以及，响应于所述事件，获取所述画布的上下文(context)的变换属性信息，将所述变换属性信息作为所述变换参数。
具体地，标注组件底层基于canvas技术开发。和canvas一样，标注组件内存中维护着代表当前2D变换数值的二维矢量变换矩阵。默认值为一个单位矩阵[1,0,0,1,0,0]。代表着标注组件初始缩放倍率为1，在x轴和y轴方向的位移和旋转值均为0。标注组件底层基于Web端浏览器事件封装了一整套完整的事件响应机制，当用户触发事件后，每一个事件响应机制都会首先获取canvas上下文的缩放倍率、x轴和y轴方向的位移、旋转值这些属性，并与标注组件当前二维矢量变换矩阵对应的各个属性做对比。如果属性值发生了变化，则使用canvas上下文中的相应属性通过标注组件封装的如下API：
setViewporTransfor(scaleX,skewX,skewY,scaleY,translateX,translateY)来更新标注组件二维矢量变换矩阵对应的属性。这种基于事件驱动的方式便可以精确地获取到最新的标注组件二维矢量变换矩阵。
其中，用户针对画布的变换操作，可以是用户通过终端的输入装置(如鼠标、键盘等)输入的，比如，用户滚动鼠标滚轮来触发对画布的缩放操作。
本实施例中，可以基于事件触发机制获得二维矢量变换矩阵，相比于其他方式，比如，基于画布大小等方式，实现更灵活，获取的二维矢量变换矩阵更准确。
707、标注组件基于所述二维矢量变换矩阵，对所述背景图像进行转换处理，以获得转换处理后的背景图像。
708、标注组件在视口显示所述背景层承载的所述转换处理后的背景图像，以及，将所述内容层设置为透明状态。
其中，由于内容层位于背景层的上方，通过将内容层设置为透明状态，可以显示出背景层的转换后的背景图像。
709、标注组件将所述二维矢量变换矩阵发送给服务端。
710、服务端基于所述二维矢量变换矩阵，对原图进行转换处理，以获得转换图像，其中，所述转换图像的尺寸与所述当前图像的尺寸相同。
711、标注组件接收所述服务端发送的所述转换图像。
712、标注组件采用所述转换图像替换所述初始化图像，并在视口显示所述画布的内容层承载的所述转换图像，以及，将所述内容层设置为非透明状态。
其中，通过将内容层设置为非透明状态，可以显示出内容层承载的转换图像。
其中，以用户(如，标注员)对画布进行缩放处理为例，标注组件完成初始化后，标注员滚动鼠标滚轮缩放画布到滚轮停止滚动，缩放结束这个时间段内，称为一次转换(Transform)过程。在这个过程中标注组件还没有从服务端获得针对最新二维矢量变换矩阵合成的转换图像，标注组件视口内会出现明显的图像部分缺失、闪烁卡顿的现象。导致标注组件的Transform过程无法平滑过渡。为了解决上述问题，标注组件可以分层渲染，从上到下依次为内容层(也可以称为标注层)、背景层，标注组件在每一次Transform过程中：
①标注组件在Transform过程中不向服务端请求转换图像，而是将标注组件初始化后保留在背景层中的背景图像放大到原图大小后利用最新的二维矢量变换矩阵对其进行2D转换，使其与接下来原图生成的转换图像匹配。这一步和服务端生成转换图像的原理相似。不同点在于标注组件用背景图像生成的转换图像清晰度低于服务端用原图生成的转换图像，但是考虑到标注组件Transform过程中无标注动作，不需要展示图片细节。所以这一策略完全满足需求。
针对背景图像，可以基于所述原图的尺寸与初始化图像的尺寸之间的比例值，对所述背景图像进行放大处理，以获得放大处理后的背景图像，所述放大处理后的背景图像的尺寸与所述原图的尺寸相同；基于所述变换参数，对所述放大处理后的背景图像进行变换处理，以获得变换处理后的背景图像；基于所述裁剪区，对所述变换处理后的背景图像进行裁剪处理，以获得所述转换处理后的背景图像。
通过对背景图像进行类似服务端对原图的处理过程，可以保证转换后的背景图像与转换后的原图的匹配性，提升显示效果。
上述的变换参数可以包括：平移参数、旋转参数、缩放参数中的一项或多项，相应地，所述基于所述变换参数，对所述放大处理后的背景图像进行变换处理，包括如下项中的一项或多项：基于所述平移参数和所述比例值，对所述放大处理后的背景图像进行平移处理；基于所述旋转参数，对所述放大处理后的背景图像进行旋转处理；基于所述缩放参数，对所述放大处理后的背景图像进行缩放处理。
通过变换处理可以包括平移、缩放、旋转中的一项或多项，可以适用于多种变换场景。
②将标注层中的图像(或称为图片)的透明度设置为0，即，标注层可以被设置为透明状态，从而可以显示出标注层下发的背景层中的转换处理后的背景图像。其中，可以采用obj.set({opacity:0})，将透明度设置为0。
③标注组件用最新的二维矢量变换矩阵向服务端请求真实的转换图像，收到服务端返回的转换图像后，替换掉标注层中的图像，并设置图像的透明度为1，即，将标注层设置为非透明状态，使之重新渲染并显示服务端返回的转换图像。其中，可以采用obj.set({opacity:1})，将透明度设置为1。
④使用单位矩阵将背景层中的背景图恢复成视口图，这张图片将用于标注组件下一次Transform过程平滑过渡。
另外，针对标注组件，标注组件还可以获得标注员基于转换图像和/或初始化图像，获得的标注数据，并将图像与对应的标注数据进行存储。
本实施例中，用户对画布进行变换操作时，客户端将二维矢量变换矩阵发送给服务端，服务端基于二维矢量变换矩阵对原图进行变换，并对变换后的原图等比例缩放到客户端的视口大小，以获得转换图像。由于转换图像的尺寸与视口一致，可以解决响客户端长时间白屏的问题，并且，转换图像的清晰度和细节，与原图一致，显示效果好。另外，客户端初始化获得视口图后，会将其复制到背景层，变换操作过程中，在获得转换图像之前，客户端会先对背景图像基于二维矢量变换矩阵进行变换，快速响应用户操作，让转换过程更平滑。等到获得转换图像后再将转换图像替换掉之前的视口图，这样就省去了本地操作原图的时间，从而解决卡顿和响应速度慢的问题。
图8是根据本公开第八实施例的示意图，本实施例提供一种图像显示装置。如图8所示，该装置800包括：获取模块801、第一发送模块802、第一接收模块803和第一显示模块804。
获取模块801用于响应于针对操作对象的变换操作，获取所述变换操作对应的变换参数，所述操作对象承载当前图像，所述当前图像的尺寸小于所述当前图像对应的原图的尺寸；第一发送模块802用于将所述变换参数发送给服务端，所述变换参数用于触发所述服务端基于所述变换参数，对所述原图进行转换处理，以获得转换图像，其中，所述转换图像的尺寸与所述当前图像的尺寸相同；第一接收模块803用于接收所述服务端发送的所述转换图像；第一显示模块804用于采用所述转换图像替换所述当前图像，并显示所述操作对象承载的所述转换图像。
本实施例中，针对操作对象的变换操作，服务端可以基于客户端发送的变换参数对原图进行转换处理，由于原图的尺寸较大，即分辨率较高，因此，对原图进行转换处理，可以保留原图的清晰度高、细节良好的优点；并且，转换图像的尺寸与当前图像的尺寸相同，即，服务端返回给客户端的是尺寸较小的图像，从而可以提高图像数据的传输速度，避免客户端长时间白屏的问题。因此，本实施例可以提高图像显示效果。
一些实施例中，若所述当前图像为初始化图像，所述装置800还包括：
第二发送模块，用于向所述服务端发送请求消息，所述请求消息中包含尺寸标识信息，所述尺寸标识信息用于标识显示区域的尺寸，所述请求消息用于触发所述服务端基于所述尺寸标识信息，对所述原图进行缩小处理，以获得所述初始化图像；第二接收模块，用于接收所述服务端发送的所述初始化图像；第二显示模块，用于在所述显示区域，显示所述操作对象承载的所述初始化图像。
初始化图像是服务端对原图进行缩小处理后获得的图像，由于初始化图像比原图的尺寸小很多，可以解决客户端加载速度慢的问题。
一些实施例中，所述装置800还包括：复制模块，用于对所述初始化图像进行复制处理，以获得背景图像。
其中，通过复制处理，可以得到尺寸以及内容与初始化图像一致的背景图像。
通过获得背景图像，可以在标注组件未获得服务端返回的转换图像之前，显示转换后的背景图像，实现快速响应用户操作，提高转换过程的平滑性。
一些实施例中，所述操作对象包括内容层和背景层，所述内容层位于所述背景层的上方，所述当前图像承载在所述内容层，所述背景层承载背景图像，所述装置800还包括：转换模块，用于基于所述变换参数，对所述背景图像进行转换处理，以获得转换处理后的背景图像；第三显示模块，用于显示所述背景层承载的所述转换处理后的背景图像；以及，设置模块，用于将所述内容层设置为透明状态。
其中，由于内容层位于背景层的上方，通过将内容层设置为透明状态，可以显示出背景层的转换后的背景图像。
一些实施例中，所述第一显示模块804进一步用于：显示所述操作对象的内容层承载的所述转换图像；以及，将所述内容层设置为非透明状态。
其中，通过将内容层设置为非透明状态，可以显示出内容层承载的转换图像。
一些实施例中，所述背景图像在所述转换处理之前所在区域为裁剪区，所述转换模块进一步用于：基于所述原图的尺寸与初始化图像的尺寸之间的比例值，对所述背景图像进行放大处理，以获得放大处理后的背景图像，所述放大处理后的背景图像的尺寸与所述原图的尺寸相同；基于所述变换参数，对所述放大处理后的背景图像进行变换处理，以获得变换处理后的背景图像；基于所述裁剪区，对所述变换处理后的背景图像进行裁剪处理，以获得所述转换处理后的背景图像。
通过对背景图像进行类似服务端对原图的处理过程，可以保证转换后的背景图像与转换后的原图的匹配性，提升显示效果。
一些实施例中，所述变换参数包括：平移参数、旋转参数、缩放参数中的一项或多项，相应地，所述转换模块进一步用于执行如下项中的一项或多项：基于所述平移参数和所述比例值，对所述放大处理后的背景图像进行平移处理；基于所述旋转参数，对所述放大处理后的背景图像进行旋转处理；基于所述缩放参数，对所述放大处理后的背景图像进行缩放处理。
通过变换处理可以包括平移、缩放、旋转中的一项或多项，可以适用于多种变换场景。
一些实施例中，所述操作对象为画布，所述获取模块801进一步用于：监听用户针对所述画布的变换操作所产生的事件；响应于所述事件，获取所述画布的上下文的变换属性信息，将所述变换属性信息作为所述变换参数。
本实施例中，可以基于事件触发机制获得二维矢量变换矩阵，相比于其他方式，比如，基于画布大小等方式，实现更灵活，获取的二维矢量变换矩阵更准确。
图9是根据本公开第九实施例的示意图，本实施例提供一种图像处理装置。如图9所示，该装置900包括：第一接收模块901、第一处理模块902和第一发送模块903。
第一接收模块901用于接收客户端发送的变换参数，所述变换参数基于所述客户端内的操作对象的变换操作产生，所述操作对象承载当前图像，所述当前图像的尺寸小于所述当前图像对应的原图的尺寸；第一处理模块902用于基于所述变换参数，对所述原图进行转换处理，以获得转换图像，其中，所述转换图像的尺寸与所述当前图像的尺寸相同；第一发送模块903用于将所述转换图像发送给所述客户端。
本实施例中，服务端可以基于客户端发送的变换参数对原图进行转换处理，由于原图的尺寸较大，即分辨率较高，因此，对原图进行转换处理，可以保留原图的清晰度高、细节良好的优点；并且，转换图像的尺寸与当前图像的尺寸相同，即，服务端返回给客户端的是尺寸较小的图像，从而可以提高图像数据的传输速度，避免客户端长时间白屏的问题。因此，本实施例可以提高图像处理效果，进而在客户端可以提高图像显示效果。
一些实施例中，若所述当前图像为初始化图像，所述初始化图像显示在所述客户端的显示区域，所述装置900还包括：第二接收模块，用于接收所述客户端发送的请求消息，所述请求消息中包含尺寸标识信息，所述尺寸标识信息用于标识所述显示区域的尺寸；第二处理模块，用于基于所述尺寸标识信息，对所述原图进行缩小处理，以获得所述初始化图像；第二发送模块，用于将所述初始化图像发送给所述客户端。
其中，关于初始化图像的获取过程可以参见图4。
从上述初始化过程可知，初始化图像是服务端对原图进行缩小处理后获得的图像，由于初始化图像比原图的尺寸小很多，可以解决客户端加载速度慢的问题。
一些实施例中，所述原图在所述变换处理之前所在区域为裁剪区，所述第一处理模块902进一步用于：基于所述变换参数，对所述原图进行变换处理，以获得变换处理后的原图；基于所述裁剪区，对所述变换处理后的原图进行裁剪处理，以获得裁剪处理后的原图；基于所述原始的尺寸与初始化图像的尺寸之间的比例值，对所述裁剪处理后的原图进行缩小处理，以获得所述转换图像。
其中，基于变换参数对原图进行转换的过程可以参见图5。
服务端可以基于客户端发送的变换参数对原图进行转换，并将变换后的原图等比例缩小到客户端的视口大小，以获得转换图像。由于转换图像的尺寸与视口图的尺寸一致，尺寸和体积较小，从而传输速度较快，可以解决客户端长时间白屏的问题；并且，转换图像由于是对原图进行转换后获得的，清晰度和细节与原图一致，从而显示效果好。
一些实施例中，所述变换参数包括：平移参数、旋转参数、缩放参数中的一项或多项，相应地，所述第一处理模块902进一步用于执行如下项中的一项或多项：基于所述平移参数和所述比例值，对所述原图进行平移处理；基于所述旋转参数，对所述原图进行旋转处理；基于所述缩放参数，对所述原图进行缩放处理。
通过变换处理可以包括平移、缩放、旋转中的一项或多项，可以适用于多种变换场景。
可以理解的是，本公开实施例中，不同实施例中的相同或相似内容可以相互参考。
可以理解的是，本公开实施例中的“第一”、“第二”等只是用于区分，不表示重要程度高低、时序先后等。
本公开的技术方案中，所涉及的用户个人信息的收集、存储、使用、加工、传输、提供和公开等处理，均符合相关法律法规的规定，且不违背公序良俗。
根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。
图10示出了可以用来实施本公开的实施例的示例电子设备1000的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字助理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。
如图10所示，电子设备1000包括计算单元1001，其可以根据存储在只读存储器(ROM)1002中的计算机程序或者从存储单元1008加载到随机访问存储器(RAM)1003中的计算机程序，来执行各种适当的动作和处理。在RAM 1003中，还可存储电子设备1000操作所需的各种程序和数据。计算单元1001、ROM 1002以及RAM 1003通过总线1004彼此相连。输入/输出(I/O)接口1005也连接至总线1004。
电子设备1000中的多个部件连接至I/O接口1005，包括：输入单元1006，例如键盘、鼠标等；输出单元1007，例如各种类型的显示器、扬声器等；存储单元1008，例如磁盘、光盘等；以及通信单元1009，例如网卡、调制解调器、无线通信收发机等。通信单元1009允许电子设备1000通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。
计算单元1001可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元1001的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元1001执行上文所描述的各个方法和处理，例如图像处理方法。例如，在一些实施例中，图像处理方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元1008。在一些实施例中，计算机程序的部分或者全部可以经由ROM 1002和/或通信单元1009而被载入和/或安装到电子设备1000上。当计算机程序加载到RAM 1003并由计算单元1001执行时，可以执行上文描述的图像处理方法的一个或多个步骤。备选地，在其他实施例中，计算单元1001可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行图像处理方法。
本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统(SOC)、复杂可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程地图数据采集装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。
在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。
计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与VPS服务("Virtual Private Server"，或简称"VPS")中，存在的管理难度大，业务扩展性弱的缺陷。服务器也可以为分布式系统的服务器，或者是结合了区块链的服务器。
应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。
上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。
Claims (16)
1.一种图像显示方法，应用于单次转换过程中，包括：
响应于针对操作对象的变换操作，获取所述变换操作对应的变换参数，所述操作对象承载当前图像，所述当前图像是初始化图像，所述当前图像的尺寸小于所述当前图像对应的原图的尺寸；其中，所述操作对象为画布；
将所述变换参数发送给服务端，所述变换参数用于触发所述服务端基于所述变换参数，对所述原图进行转换处理，以获得转换图像，其中，所述转换图像的尺寸与所述当前图像的尺寸相同；
接收所述服务端发送的所述转换图像；
采用所述转换图像替换所述当前图像，并通过显示区域显示所述操作对象承载的所述转换图像；其中，所述显示区域的尺寸小于所述原图的尺寸；
其中，所述操作对象包括内容层和背景层，所述内容层位于所述背景层的上方，所述当前图像承载在所述内容层，所述背景层承载背景图像，所述背景图像是对所述初始化图像进行复制处理后得到的，所述背景图像用于转换过程的平滑过渡，所述获取所述变换操作对应的变换参数之后，且，所述接收所述服务端发送的所述转换图像之前，所述方法还包括：
基于所述变换参数，对所述背景图像进行转换处理，以获得转换处理后的背景图像，以使所述转换处理后的背景图像与所述转换图像匹配；
显示所述背景层承载的所述转换处理后的背景图像；以及，
将所述内容层设置为透明状态，以使所述内容层下方的所述背景层中的所述转换处理后的背景图像能够被显示；
所述显示所述操作对象承载的所述转换图像，包括：
显示所述操作对象的内容层承载的所述转换图像；以及，
将所述内容层设置为非透明状态，以使所述内容层承载的所述转换图像能够被显示；
其中，所述变换参数用于表明变换后的操作对象相对于初始状态的操作对象的变换关系；
其中，所述转换图像是服务端采用如下方式获得的：基于所述变换参数，对所述原图进行变换处理，以获得变换处理后的原图；基于所述原图在所述变换处理之前所在的裁剪区，对所述变换处理后的原图进行裁剪处理，以获得裁剪处理后的原图；基于所述原图的尺寸与初始化图像的尺寸之间的比例值，对所述裁剪处理后的原图进行缩小处理，以获得所述转换图像；
其中，所述背景图像在所述转换处理之前所在区域为裁剪区，所述基于所述变换参数，对所述背景图像进行转换处理，以获得转换处理后的背景图像，包括：
基于所述原图的尺寸与初始化图像的尺寸之间的比例值，对所述背景图像进行放大处理，以获得放大处理后的背景图像，所述放大处理后的背景图像的尺寸与所述原图的尺寸相同；
基于所述变换参数，对所述放大处理后的背景图像进行变换处理，以获得变换处理后的背景图像；
基于所述裁剪区，对所述变换处理后的背景图像进行裁剪处理，以获得所述转换处理后的背景图像。
2.根据权利要求1所述的方法，其中，所述响应于针对操作对象的变换操作之前，所述方法还包括：
向所述服务端发送请求消息，所述请求消息中包含尺寸标识信息，所述尺寸标识信息用于标识显示区域的尺寸，所述请求消息用于触发所述服务端基于所述尺寸标识信息，对所述原图进行缩小处理，以获得所述初始化图像；
接收所述服务端发送的所述初始化图像；
在所述显示区域，显示所述操作对象承载的所述初始化图像。
3.根据权利要求1所述的方法，其中，所述变换参数包括：平移参数、旋转参数、缩放参数中的一项或多项，相应地，所述基于所述变换参数，对所述放大处理后的背景图像进行变换处理，包括如下项中的一项或多项：
基于所述平移参数和所述比例值，对所述放大处理后的背景图像进行平移处理；
基于所述旋转参数，对所述放大处理后的背景图像进行旋转处理；
基于所述缩放参数，对所述放大处理后的背景图像进行缩放处理。
4.根据权利要求1-3任一项所述的方法，其中，所述操作对象为画布，所述响应于针对操作对象的变换操作，获取所述变换操作对应的变换参数，包括：
监听用户针对所述画布的变换操作所产生的事件；
响应于所述事件，获取所述画布的上下文的变换属性信息，将所述变换属性信息作为所述变换参数。
5.一种图像处理方法，应用于单次转换过程中，包括：
接收客户端发送的变换参数，所述变换参数基于所述客户端内的操作对象的变换操作产生，所述操作对象承载当前图像，所述当前图像是初始化图像，所述当前图像的尺寸小于所述当前图像对应的原图的尺寸；其中，所述操作对象为画布；
基于所述变换参数，对所述原图进行转换处理，以获得转换图像，其中，所述转换图像的尺寸与所述当前图像的尺寸相同；
将所述转换图像发送给所述客户端；其中，所述转换图像通过所述客户端的显示区域显示，所述显示区域的尺寸小于所述原图的尺寸；
其中，所述操作对象包括内容层和背景层，所述内容层位于所述背景层的上方，所述当前图像承载在所述内容层，所述背景层承载背景图像，所述背景图像是对所述初始化图像进行复制处理后得到的，所述背景图像用于转换过程的平滑过渡，所述客户端用于：
在获取所述变换操作对应的变换参数之后，且，接收服务端发送的所述转换图像之前，基于所述变换参数，对所述背景图像进行转换处理，以获得转换处理后的背景图像，以使所述转换处理后的背景图像与所述转换图像匹配；显示所述背景层承载的所述转换处理后的背景图像；以及，将所述内容层设置为透明状态，以使所述内容层下方的所述背景层中的所述转换处理后的背景图像能够被显示；且，
在获取所述转换图像之后，显示所述操作对象的内容层承载的所述转换图像；以及，将所述内容层设置为非透明状态，以使所述内容层承载的所述转换图像能够被显示；
其中，所述变换参数用于表明变换后的操作对象相对于初始状态的操作对象的变换关系；
其中，所述背景图像是客户端采用如下方式进行转换的：基于所述原图的尺寸与初始化图像的尺寸之间的比例值，对所述背景图像进行放大处理，以获得放大处理后的背景图像，所述放大处理后的背景图像的尺寸与所述原图的尺寸相同；基于所述变换参数，对所述放大处理后的背景图像进行变换处理，以获得变换处理后的背景图像；基于所述背景图像在所述转换处理之前所在的裁剪区，对所述变换处理后的背景图像进行裁剪处理，以获得所述转换处理后的背景图像；
其中，所述原图在所述变换处理之前所在区域为裁剪区，所述基于所述变换参数，对所述原图进行转换处理，以获得转换图像，包括：
基于所述变换参数，对所述原图进行变换处理，以获得变换处理后的原图；
基于所述裁剪区，对所述变换处理后的原图进行裁剪处理，以获得裁剪处理后的原图；
基于所述原图的尺寸与初始化图像的尺寸之间的比例值，对所述裁剪处理后的原图进行缩小处理，以获得所述转换图像。
6.根据权利要求5所述的方法，其中，所述初始化图像显示在所述客户端的显示区域，所述接收客户端发送的变换参数之前，所述方法还包括：
接收所述客户端发送的请求消息，所述请求消息中包含尺寸标识信息，所述尺寸标识信息用于标识所述显示区域的尺寸；
基于所述尺寸标识信息，对所述原图进行缩小处理，以获得所述初始化图像；
将所述初始化图像发送给所述客户端。
7.根据权利要求5所述的方法，其中，所述变换参数包括：平移参数、旋转参数、缩放参数中的一项或多项，相应地，所述基于所述变换参数，对所述原图进行变换处理，包括如下项中的一项或多项：
基于所述平移参数和所述比例值，对所述原图进行平移处理；
基于所述旋转参数，对所述原图进行旋转处理；
基于所述缩放参数，对所述原图进行缩放处理。
8.一种图像显示装置，应用于单次转换过程中，包括：
获取模块，用于响应于针对操作对象的变换操作，获取所述变换操作对应的变换参数，所述操作对象承载当前图像，所述当前图像是初始化图像，所述当前图像的尺寸小于所述当前图像对应的原图的尺寸；其中，所述操作对象为画布；
第一发送模块，用于将所述变换参数发送给服务端，所述变换参数用于触发所述服务端基于所述变换参数，对所述原图进行转换处理，以获得转换图像，其中，所述转换图像的尺寸与所述当前图像的尺寸相同；
第一接收模块，用于接收所述服务端发送的所述转换图像；
第一显示模块，用于采用所述转换图像替换所述当前图像，并通过显示区域显示所述操作对象承载的所述转换图像；其中，所述显示区域的尺寸小于所述原图的尺寸；
其中，所述操作对象包括内容层和背景层，所述内容层位于所述背景层的上方，所述当前图像承载在所述内容层，所述背景层承载背景图像，所述背景图像是对所述初始化图像进行复制处理后得到的，所述背景图像用于转换过程的平滑过渡，所述获取所述变换操作对应的变换参数之后，且，所述接收所述服务端发送的所述转换图像之前，所述装置还包括：
转换模块，用于基于所述变换参数，对所述背景图像进行转换处理，以获得转换处理后的背景图像，以使所述转换处理后的背景图像与所述转换图像匹配；
第三显示模块，用于显示所述背景层承载的所述转换处理后的背景图像；以及，
设置模块，用于将所述内容层设置为透明状态，以使所述内容层下方的所述背景层中的所述转换处理后的背景图像能够被显示；
所述第一显示模块进一步用于：
显示所述操作对象的内容层承载的所述转换图像；以及，
将所述内容层设置为非透明状态，以使所述内容层承载的所述转换图像能够被显示；
其中，所述变换参数用于表明变换后的操作对象相对于初始状态的操作对象的变换关系；
其中，所述转换图像是服务端采用如下方式获得的：基于所述变换参数，对所述原图进行变换处理，以获得变换处理后的原图；基于所述原图在所述变换处理之前所在的裁剪区，对所述变换处理后的原图进行裁剪处理，以获得裁剪处理后的原图；基于所述原图的尺寸与初始化图像的尺寸之间的比例值，对所述裁剪处理后的原图进行缩小处理，以获得所述转换图像；
其中，所述背景图像在所述转换处理之前所在区域为裁剪区，所述转换模块进一步用于：
基于所述原图的尺寸与初始化图像的尺寸之间的比例值，对所述背景图像进行放大处理，以获得放大处理后的背景图像，所述放大处理后的背景图像的尺寸与所述原图的尺寸相同；
基于所述变换参数，对所述放大处理后的背景图像进行变换处理，以获得变换处理后的背景图像；
基于所述裁剪区，对所述变换处理后的背景图像进行裁剪处理，以获得所述转换处理后的背景图像。
9.根据权利要求8所述的装置，其中，所述响应于针对操作对象的变换操作之前，所述装置还包括：
第二发送模块，用于向所述服务端发送请求消息，所述请求消息中包含尺寸标识信息，所述尺寸标识信息用于标识显示区域的尺寸，所述请求消息用于触发所述服务端基于所述尺寸标识信息，对所述原图进行缩小处理，以获得所述初始化图像；
第二接收模块，用于接收所述服务端发送的所述初始化图像；
第二显示模块，用于在所述显示区域，显示所述操作对象承载的所述初始化图像。
10.根据权利要求8所述的装置，其中，所述变换参数包括：平移参数、旋转参数、缩放参数中的一项或多项，相应地，所述转换模块进一步用于执行如下项中的一项或多项：
基于所述平移参数和所述比例值，对所述放大处理后的背景图像进行平移处理；
基于所述旋转参数，对所述放大处理后的背景图像进行旋转处理；
基于所述缩放参数，对所述放大处理后的背景图像进行缩放处理。
11.根据权利要求8-10任一项所述的装置，其中，所述操作对象为画布，所述获取模块进一步用于：
监听用户针对所述画布的变换操作所产生的事件；
响应于所述事件，获取所述画布的上下文的变换属性信息，将所述变换属性信息作为所述变换参数。
12.一种图像处理装置，应用于单次转换过程中，包括：
第一接收模块，用于接收客户端发送的变换参数，所述变换参数基于所述客户端内的操作对象的变换操作产生，所述操作对象承载当前图像，所述当前图像是初始化图像，所述当前图像的尺寸小于所述当前图像对应的原图的尺寸；其中，所述操作对象为画布；
第一处理模块，用于基于所述变换参数，对所述原图进行转换处理，以获得转换图像，其中，所述转换图像的尺寸与所述当前图像的尺寸相同；
第一发送模块，用于将所述转换图像发送给所述客户端；其中，所述转换图像通过所述客户端的显示区域显示，所述显示区域的尺寸小于所述原图的尺寸；
其中，所述操作对象包括内容层和背景层，所述内容层位于所述背景层的上方，所述当前图像承载在所述内容层，所述背景层承载背景图像，所述背景图像是对所述初始化图像进行复制处理后得到的，所述背景图像用于转换过程的平滑过渡，所述客户端用于：
在获取所述变换操作对应的变换参数之后，且，接收服务端发送的所述转换图像之前，基于所述变换参数，对所述背景图像进行转换处理，以获得转换处理后的背景图像，以使所述转换处理后的背景图像与所述转换图像匹配；显示所述背景层承载的所述转换处理后的背景图像；以及，将所述内容层设置为透明状态，以使所述内容层下方的所述背景层中的所述转换处理后的背景图像能够被显示；且，
在获取所述转换图像之后，显示所述操作对象的内容层承载的所述转换图像；以及，将所述内容层设置为非透明状态，以使所述内容层承载的所述转换图像能够被显示；
其中，所述变换参数用于表明变换后的操作对象相对于初始状态的操作对象的变换关系；
其中，所述背景图像是客户端采用如下方式进行转换的：基于所述原图的尺寸与初始化图像的尺寸之间的比例值，对所述背景图像进行放大处理，以获得放大处理后的背景图像，所述放大处理后的背景图像的尺寸与所述原图的尺寸相同；基于所述变换参数，对所述放大处理后的背景图像进行变换处理，以获得变换处理后的背景图像；基于所述背景图像在所述转换处理之前所在的裁剪区，对所述变换处理后的背景图像进行裁剪处理，以获得所述转换处理后的背景图像；
其中，所述原图在所述变换处理之前所在区域为裁剪区，所述第一处理模块进一步用于：
基于所述变换参数，对所述原图进行变换处理，以获得变换处理后的原图；
基于所述裁剪区，对所述变换处理后的原图进行裁剪处理，以获得裁剪处理后的原图；
基于所述原图的尺寸与初始化图像的尺寸之间的比例值，对所述裁剪处理后的原图进行缩小处理，以获得所述转换图像。
13.根据权利要求12所述的装置，其中，所述初始化图像显示在所述客户端的显示区域，所述接收客户端发送的变换参数之前，所述装置还包括：
第二接收模块，用于接收所述客户端发送的请求消息，所述请求消息中包含尺寸标识信息，所述尺寸标识信息用于标识所述显示区域的尺寸；
第二处理模块，用于基于所述尺寸标识信息，对所述原图进行缩小处理，以获得所述初始化图像；
第二发送模块，用于将所述初始化图像发送给所述客户端。
14.根据权利要求12所述的装置，其中，所述变换参数包括：平移参数、旋转参数、缩放参数中的一项或多项，相应地，所述第一处理模块进一步用于执行如下项中的一项或多项：
基于所述平移参数和所述比例值，对所述原图进行平移处理；
基于所述旋转参数，对所述原图进行旋转处理；
基于所述缩放参数，对所述原图进行缩放处理。
15. 一种电子设备，包括：
至少一个处理器；以及
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7中任一项所述的方法。
16.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1-7中任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210040729.6A CN114549303B (zh) | 2022-01-14 | 2022-01-14 | 图像显示、处理方法、装置、设备和存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210040729.6A CN114549303B (zh) | 2022-01-14 | 2022-01-14 | 图像显示、处理方法、装置、设备和存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114549303A CN114549303A (zh) | 2022-05-27 |
| CN114549303B true CN114549303B (zh) | 2023-10-20 |
Family
ID=81672242
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210040729.6A Active CN114549303B (zh) | 2022-01-14 | 2022-01-14 | 图像显示、处理方法、装置、设备和存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114549303B (zh) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115309313A (zh) * | 2022-08-09 | 2022-11-08 | 盈帜科技（常州）有限公司 | 一种二维场景海量矢量数据显示方法及设备 |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2004013297A (ja) * | 2002-06-04 | 2004-01-15 | Yafoo Japan Corp | Ｗｅｂ画像の表示制御方法、Ｗｅｂ画像表示制御装置 |
| JP2006185134A (ja) * | 2004-12-27 | 2006-07-13 | Canon Inc | ネットワークシステム及び画像配信方法 |
| CN1805354A (zh) * | 2006-01-23 | 2006-07-19 | 北京航空航天大学 | 一种基于远程渲染的三维模型网络发布方法 |
| US8208762B1 (en) * | 2008-08-12 | 2012-06-26 | Adobe Systems Incorporated | Optimizing the performance of an image editing system in a client-server environment |
| CN109299412A (zh) * | 2018-08-24 | 2019-02-01 | 四川爱创科技有限公司 | 应用于web端的图片预处理方法 |
| CN110673775A (zh) * | 2018-07-02 | 2020-01-10 | 北京京东尚科信息技术有限公司 | 图片展示方法、装置和终端 |
| CN111402120A (zh) * | 2020-03-19 | 2020-07-10 | 北京远鉴信息技术有限公司 | 一种标注图像处理方法及装置 |
| CN111930979A (zh) * | 2020-07-29 | 2020-11-13 | 广州华多网络科技有限公司 | 图像处理方法、装置、设备及存储介质 |
| CN113206915A (zh) * | 2021-04-28 | 2021-08-03 | Oppo广东移动通信有限公司 | 显示方法及装置、计算机可读介质和电子设备 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090089448A1 (en) * | 2007-09-28 | 2009-04-02 | David Sze | Mobile browser with zoom operations using progressive image download |
| US8954386B2 (en) * | 2011-03-22 | 2015-02-10 | Microsoft Corporation | Locally editing a remotely stored image |
-
2022
- 2022-01-14 CN CN202210040729.6A patent/CN114549303B/zh active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2004013297A (ja) * | 2002-06-04 | 2004-01-15 | Yafoo Japan Corp | Ｗｅｂ画像の表示制御方法、Ｗｅｂ画像表示制御装置 |
| JP2006185134A (ja) * | 2004-12-27 | 2006-07-13 | Canon Inc | ネットワークシステム及び画像配信方法 |
| CN1805354A (zh) * | 2006-01-23 | 2006-07-19 | 北京航空航天大学 | 一种基于远程渲染的三维模型网络发布方法 |
| US8208762B1 (en) * | 2008-08-12 | 2012-06-26 | Adobe Systems Incorporated | Optimizing the performance of an image editing system in a client-server environment |
| CN110673775A (zh) * | 2018-07-02 | 2020-01-10 | 北京京东尚科信息技术有限公司 | 图片展示方法、装置和终端 |
| CN109299412A (zh) * | 2018-08-24 | 2019-02-01 | 四川爱创科技有限公司 | 应用于web端的图片预处理方法 |
| CN111402120A (zh) * | 2020-03-19 | 2020-07-10 | 北京远鉴信息技术有限公司 | 一种标注图像处理方法及装置 |
| CN111930979A (zh) * | 2020-07-29 | 2020-11-13 | 广州华多网络科技有限公司 | 图像处理方法、装置、设备及存储介质 |
| CN113206915A (zh) * | 2021-04-28 | 2021-08-03 | Oppo广东移动通信有限公司 | 显示方法及装置、计算机可读介质和电子设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114549303A (zh) | 2022-05-27 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113077548B (zh) | 针对物体的碰撞检测方法、装置、设备和存储介质 | |
| CN115147265B (zh) | 虚拟形象生成方法、装置、电子设备和存储介质 | |
| CN112529097B (zh) | 样本图像生成方法、装置以及电子设备 | |
| CN114792355B (zh) | 虚拟形象生成方法、装置、电子设备和存储介质 | |
| US10403040B2 (en) | Vector graphics rendering techniques | |
| CN114627239B (zh) | 包围盒生成方法、装置、设备及存储介质 | |
| CN113870439A (zh) | 用于处理图像的方法、装置、设备以及存储介质 | |
| CN114549303B (zh) | 图像显示、处理方法、装置、设备和存储介质 | |
| CN113657518B (zh) | 训练方法、目标图像检测方法、装置、电子设备以及介质 | |
| CN112862934B (zh) | 用于处理动画的方法、装置、设备、介质和产品 | |
| CN113112398A (zh) | 图像处理方法和装置 | |
| CN115861510A (zh) | 对象渲染方法、装置、电子设备、存储介质及程序产品 | |
| CN115082298A (zh) | 图像生成方法、装置、电子设备以及存储介质 | |
| KR20220063291A (ko) | 물체에 대한 충돌 감지 방법과, 장치, 전자 기기, 저장 매체 및 컴퓨터 프로그램 | |
| CN114119990A (zh) | 用于图像特征点匹配的方法、装置及计算机程序产品 | |
| CN113947146A (zh) | 样本数据生成方法、模型训练方法、图像检测方法及装置 | |
| CN112991451A (zh) | 图像识别方法、相关装置及计算机程序产品 | |
| CN113051491B (zh) | 地图数据处理的方法、设备、存储介质及程序产品 | |
| CN115761123B (zh) | 三维模型处理方法、装置、电子设备以及存储介质 | |
| CN114820908B (zh) | 虚拟形象生成方法、装置、电子设备和存储介质 | |
| CN116363331B (zh) | 图像生成方法、装置、设备以及存储介质 | |
| CN112465692A (zh) | 图像处理方法、装置、设备及存储介质 | |
| US20230078041A1 (en) | Method of displaying animation, electronic device and storage medium | |
| CN116843808B (zh) | 基于点云的渲染、模型训练、虚拟形象生成方法及装置 | |
| CN116168442B (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 |