CN114612584B - 图像处理方法、装置、设备及存储介质 - Google Patents

图像处理方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN114612584B
CN114612584B CN202111672778.3A CN202111672778A CN114612584B CN 114612584 B CN114612584 B CN 114612584B CN 202111672778 A CN202111672778 A CN 202111672778A CN 114612584 B CN114612584 B CN 114612584B
Authority
CN
China
Prior art keywords
frame
implicit
selection area
user interface
image
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
Application number
CN202111672778.3A
Other languages
English (en)
Other versions
CN114612584A (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.)
Beijing Chengshi Wanglin Information Technology Co Ltd
Original Assignee
Beijing Chengshi Wanglin Information Technology Co Ltd
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 Beijing Chengshi Wanglin Information Technology Co Ltd filed Critical Beijing Chengshi Wanglin Information Technology Co Ltd
Priority to CN202111672778.3A priority Critical patent/CN114612584B/zh
Publication of CN114612584A publication Critical patent/CN114612584A/zh
Application granted granted Critical
Publication of CN114612584B publication Critical patent/CN114612584B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • 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
    • 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/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/80—Creating or modifying a manually drawn or painted image using a manual input device, e.g. mouse, light pen, direction keys on keyboard
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04806—Zoom, i.e. interaction techniques or interactors for controlling the zooming operation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)
  • Processing Or Creating Images (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本申请实施例提供一种图像处理方法、装置、设备及存储介质。在本申请实施例中，在对图像用户界面上的图像进行缩放或拖动的情况下，不需要针对原始图像进行缩放或拖动，可采用隐式取图框在原始图像上进行缩放或拖动，基于该隐式取图框确定原始图像上的框选区域，并将框选区域中的图像内容绘制到画布中，得到缩放或拖动后的画布图像，并在图像用户界面上显示该画布图像。整个过程中，无需对整个原始图像进行缩放或拖动，对隐式取图框进行缩放或拖动，可提高绘制画布图像的效率。

Description

图像处理方法、装置、设备及存储介质
技术领域
本申请涉及图像处理技术领域，尤其涉及一种图像处理方法、装置、设备及存储介质。
背景技术
画布(canvas)是具有图形界面功能的组件，它可以提供图像处理功能。在一些应用场景中，图形用户界面上有展示图片的需求，例如，在线展示商品图像，且支持缩放操作。在执行缩放操作过程中，利用canvas对原始图像进行缩放，并绘制缩放后的原始图像得到画布图像，整个过程中，绘制画布的效率较低。
发明内容
本申请的多个方面提供一种图像处理方法、装置、设备及存储介质，用以提高绘制画布图像的效率。
本申请实施例提供一种图像处理方法，应用于电子终端，电子终端上存储有第一原始图像，且第一原始图像关联有隐式取图框，隐式取图框用于在第一原始图像上确定框选区域，电子终端提供有图形用户界面，方法包括：在图形用户界面上显示第一画布图像，第一画布图像是根据当前框选区域内的图像内容绘制而成的，当前框选区域是隐式取图框在第一原始图像上确定的；响应图形用户界面上的缩放/拖动操作，根据缩放/拖动操作对应的缩放/拖动参数，调整当前框选区域，以得到调整后的框选区域；将第一原始图像中位于调整后的框选区域中的图像内容绘制到画布中，得到第二画布图像，并将图形用户界面上显示的第一画布图像更新为第二画布图像。
本申请实施例还提供一种图像处理装置，图像处理装置上存储有第一原始图像，且第一原始图像关联有隐式取图框，隐式取图框用于在第一原始图像上确定框选区域，图像处理装置提供有图形用户界面，图像处理装置包括：显示模块、调整模块、绘制模块以及更新模块；显示模块，用于在图形用户界面上显示第一画布图像，第一画布图像是根据当前框选区域内的图像内容绘制而成的，当前框选区域是隐式取图框在第一原始图像上确定的；调整模块，用于响应图形用户界面上的缩放/拖动操作，根据缩放/拖动操作对应的缩放/拖动参数，调整当前框选区域，以得到调整后的框选区域；绘制模块，用于将第一原始图像中位于调整后的框选区域中的图像内容绘制到画布中，得到第二画布图像；更新模块，用于将图形用户界面上显示的第一画布图像更新为第二画布图像。
本申请实施例还提供一种图像处理设备，包括：存储器、显示器和处理器；存储器，用于存储计算机程序和第一原始图像，且第一原始图像关联有隐式取图框，隐式取图框用于在第一原始图像上确定框选区域；显示器，用于提供图形用户界面；处理器，与存储器耦合，用于执行计算机程序，以实现本申请实施例提供的图像处理方法中的步骤。
本申请实施例还提供一种存储有计算机程序的计算机可读存储介质，当计算机程序被处理器执行时，致使处理器实现本申请实施例提供的图像处理方法中的步骤。
在本申请实施例中，在对图像用户界面上的图像进行缩放或拖动的情况下，不需要针对原始图像进行缩放或拖动，可采用隐式取图框在原始图像上进行缩放或拖动，基于该隐式取图框确定原始图像上的框选区域，并将框选区域中的图像内容绘制到画布中，得到缩放或拖动后的画布图像，并在图像用户界面上显示该画布图像。整个过程中，无需对整个原始图像进行缩放或拖动，对隐式取图框进行缩放或拖动，可提高绘制画布图像的效率。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1为本申请示例性实施例提供的一种图像处理方法的流程示意图；
图2a为本申请示例性实施例提供的一种第一原始图像的宽度和高度的示意图；
图2b为本申请示例性实施例提供的一种图形用户界面的宽度和高度的示意图；
图2c为本申请示例性实施例提供的一种初始取图框的尺寸的示意图；
图2d为本申请示例性实施例提供的一种最大框选区域的示意图；
图2e为本申请示例性实施例提供的一种当前隐式取图框的示意图；
图2f为本申请示例性实施例提供的一种图2e中隐式取图框的图像内容绘制到图形用户界面上的示意图；
图3a为本申请示例性实施例提供的一种计算最大取图框的流程示意图；
图3b为本申请示例性实施例提供的一种计算缩放系数的流程示意图；
图3c为本申请示例性实施例提供的一种计算缩放操作后隐式取图框的流程示意图；
图3d为本申请示例性实施例提供的一种计算拖动操作后隐式取图框的流程示意图；
图4为本申请示例性实施例提供的一种图像处理装置的结构示意图；
图5为本申请示例性实施例提供的一种图像处理设备的结构示意图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
针对现有技术绘制画布的效率较低的问题，在本申请实施例中，在对图像用户界面上的图像进行缩放或拖动的情况下，不需要针对原始图像进行缩放或拖动，可采用隐式取图框在原始图像上进行缩放或拖动，基于该隐式取图框确定原始图像上的框选区域，并将框选区域中的图像内容绘制到画布中，得到缩放或拖动后的画布图像，并在图像用户界面上显示该画布图像。整个过程中，无需对整个原始图像进行缩放或拖动，对隐式取图框进行缩放或拖动，可提高绘制画布图像的效率。
以下结合附图，详细说明本申请各实施例提供的技术方案。
图1为本申请示例性实施例提供的一种图像处理方法的流程示意图。该方法应用于电子终端，电子终端上存储有第一原始图像，且第一原始图像关联有隐式取图框，隐式取图框用于在第一原始图像上确定框选区域，电子终端提供有图形用户界面，如图1所示，该方法包括：
101、在图形用户界面上显示第一画布图像，第一画布图像是根据当前框选区域内的图像内容绘制而成的，当前框选区域是隐式取图框在第一原始图像上确定的；
102、响应图形用户界面上的缩放/拖动操作，根据缩放/拖动操作对应的缩放/拖动参数，调整当前框选区域，以得到调整后的框选区域；
103、将第一原始图像中位于调整后的框选区域中的图像内容绘制到画布中，得到第二画布图像，并将图形用户界面上显示的第一画布图像更新为第二画布图像。
在本实施例中，第一原始图像可以是各种类型的图像，例如，第一原始图像可以是车辆图像、手机图像或者食物的图像等，可以是普通平面图像，也可以是全景图等。第一原始图像存储在电子终端上，且第一原始图像关联有隐式取图框，隐式取图框是一个可被缩放或者拖动的虚拟图框，隐式取图框对于用户来说是不可见的。隐式取图框用于在第一原始图像上确定框选区域。电子终端提供有图形用户界面，图像用户界面上显示有第一画布图像，第一画布图像是根据隐式取图框确定的当前框选区域中的图像内容绘制而成的，当前框选区域是隐式取图框在第一原始图像上确定的。
其中，隐式取图框可以理解为一个用于从第一原始图像中框选可在图形用户界面中展示的区域，也即框选区域的组件或算法，相当于在第一原始图像上设置一个虚拟的取图框，其可以根据用户在图形用户界面中触发的缩放/拖动操作，最终转换为针对该隐式取图框的缩放或拖动，以调整图形用户界面中当前展示的第一原始图像所关联的隐式取图框相对于第一原始图像的尺寸和位置，从而调整隐式取图框在第一原始图像中的框选区域。而且，在实际应用中，隐式取图框可以关联多个图像(例如可以在图形用户界面中展示的全部图像)，可以在图形用户界面中展示某一图像时，通过其关联的隐式取图框从该图像中框选具体在图形用户界面中所展示的图像内容。
在本实施例中，用户可以针对图形用户界面执行缩放操作，根据缩放操作对应的缩放参数，调整当前框选区域，以得到调整后的框选区域；或者，用户可以针对图形用户界面执行拖动操作，根据拖动操作对应的拖动参数，调整当前框选区域，以得到调整后的框选区域。无论是上述哪种操作，在得到调整后的框选区域后，可以将第一原始图像中位于调整后的框选区域中的图像内容绘制到画布中，得到第二画布图像，并将图形用户界面上显示的第一画布图像更新为第二画布图像。
在本申请实施例中，在对图像用户界面上的图像进行缩放或拖动的情况下，不需要针对原始图像进行缩放或拖动，可采用隐式取图框在原始图像上进行缩放或拖动，基于该隐式取图框确定原始图像上的框选区域，并将框选区域中的图像内容绘制到画布中，得到缩放或拖动后的画布图像，并在图像用户界面上显示该画布图像。整个过程中，无需对整个原始图像进行缩放或拖动，对隐式取图框进行缩放或拖动，可提高绘制画布图像的效率。
为了便于隐式取图框相关的后续计算，下面以一张第一原始图像和图形用户界面为例介绍隐式取图框的基本参数。其中，第一原始图像和图形用户界面的尺寸用宽和高表示。图2a展示了第一原始图像的宽度和高度，图2b展示了图形用户界面的宽度和高度，将最大框选区域对应的隐式取图框称为初始取图框(initRectangle)，图2c展示了初始取图框的尺寸，图2d为将初始取图框对应的最大框选区域中的图像内容绘制到画布中并显示在图形用户界面的示意图，图2e展示了将初始取图框缩放或拖动到隐式取图框的位置，图2f为按照图2e中隐式取图框的位置将隐式取图框中的图像内容绘制到画布中并显示在图形用户界面的示意图。放大、缩小、拖动(平移)从本质上来说是针对隐式取图框的缩放和拖动，之后按照新的隐式取图框的位置和大小重新在画布上进行绘制。这里定义如下概念：
当前的隐式取图框(currentRectangle)：隐式取图框，如图2c和2e所示，代表图形用户界面所显示的第一原始图像的范围，隐式取图框包含4个参数：left(左部)表示隐式取图框距离第一原始图像左边距离(currentLeft)；top(上部)表示隐式取图框距离第一原始图像上边距离(currentTop)；width(宽度)表示隐式取图框的宽度(currentWidth)；height(高度)表示隐式取图框的高度(currentHeight)。其中，图像高度(imgHeight)表示需要展示的第一原始图像的高度，图像宽度(imgWidth)表示需要展示的第一原始图像的宽度，上部最大值(topMax)表示隐式取图框距离第一原始图像顶部最大值，计算公式为：topMax＝imgHeight-initTop–currentHeight，左边最大值(leftMax)表示隐式取图框距离第一原始图像左边的最大值，计算公式为：leftMax＝imgWidth-initLeft–currentWidth，上部最小值(topMin)表示隐式取图框距离图片顶部距离的最小值，其值等于initTop，坐标最小值(leftMin)表示隐式取图框距离图片左边距离的最小值，其值等于initLeft，缩放操作前的左边间距(lastLeft)表示缩放操作前隐式取图框距离第一原始图像左边的间距，缩放操作前的上部间距(lastTop)表示缩放操作前隐式取图框距离第一原始图像上边的间距。
在一可选实施例中，在图像用户界面上显示第一画布图像的情况下，为了给用户带来更好的视觉体验，可以根据图形用户界面的尺寸比例和第一原始图像的尺寸比例，确定隐式取图框的最大框选区域，其中，最大框选区域与图形用户界面的尺寸适配，例如，最大框选区域尺寸与图形用户界面的尺寸相同，或者最大框选区域的尺寸是图形用户界面的尺寸的倍数，若该倍数大于1，则最大框选区域的尺寸大于图形用户界面尺寸，若该倍数小于1，则最大框选区域的尺寸小于图形用户界面尺寸。在确定最大框选区域之后，可根据最大框选区域对应的隐式取图框，对第一原始图像进行裁剪，将裁剪出的图像内容绘制到画布中，得到第一画布图像，并将第一画布图像显示到图形用户界面中。
例如，第一原始图像和图形用户界面的尺寸比例用宽高比来体现，第一原始图像的宽高比和图形用户界面的宽高比可能会不同，因此为保证图片能够充满图形用户界面，给用户带来更好的视觉体验，可根据第一原始图像的宽高比和图形用户界面的宽高比的差异计算隐式取图框的最大框选区域，对第一原始图像进行上下或左右裁剪，使得后续基于最大框选区域中的第一原始图像上的图像内容生成图形用户界面显示的画布图像。
如图3a所示，提供一种最大取图框的计算过程，图形用户界面的高度用h1表示，图形用户界面的宽度用w1表示，第一原始图像的高度用h2表示，第一原始图像的宽度用w2表示，最大框选区域对应的隐式取图框称为初始取图框(initRectangle)第一原始图像加载时根据第一原始图像的尺寸与图形用户界面尺寸计算的能够充满图形用户界面的最大框选区域。最大框选区域是隐式取图框在第一原始图像上确定的，为了便于描述和区分，将最大框选区域对应的隐式取图框称为初始取图框(initRectangle)，初始取图框是第一原始图像加载时根据第一原始图像尺寸与图形用户界面的尺寸计算的能够充满图形用户界面的最大范围。初始时刻隐式取图框的参数用如下形式进行表示：初始左部(initLeft)、初始上部(initTop)、初始宽度(initWidth)、初始高度(initHeight)。后续在缩放或拖动的过程中，隐式取图框的大小可以不超过最大框选区域，隐式取图框的位置可以不超过初始取图框。
在图3a中，可计算图形用户界面期望高度hx＝w1*h2/w2，若hx＞h1，则第一原始图像的上写会被裁掉，初始取图框的initWidth＝w2，initHeight＝w2*h1/w1；若hx≤h1，则第一原始图像的左右会被裁掉，初始取图框的initWidth＝h2*w1/h1，initHeight＝h2。在确定初始取图框的initWidth和initHeight之后，可进一步确定初始取图框的initLeft＝(w2-width)/2，initTop＝(h2-height)/2，从而得到初始取图框的initWidth、initHeight、initLeft以及initTop。
在图2a中，第一原始图像的尺寸为1008px*756px，图2b所示图形用户界面的尺寸为667px*375px，基于图3a所示方法，可得到初始取图框的参数initwidth:1008px；initheight:556px；inittop:100px；initleft:0px。
在本实施例中，图像的绘制采用画布渲染上下文2维(Canvas Rendering Context2D)中绘图(drawImage)方法，该方法需要传入的参数包括：1)原始图像；2)原始图像的起始x坐标；3)原始图像的起始y坐标；4)在起始点(x,y)处，原始图像的宽度；5)在起始点(x,y)处原始图像的高度；6)在画布绘制的起点x；7)在画布绘制的起点y；8)在画布绘制的宽度(aimWidth)；9)在画布绘制的高度(aimHeight)。其中，1)中的参数通过对外发出请求，获取原始图像，2)至5)中的参数，可参见图3a中计算出的参数。绘制的画布的范围为整个画布，所以起点的x和y都为0，在画布的绘制宽度和高度为整个画布的宽度和高度，也就是图形用户界面的宽度和高度。
在本实施例中，并不限定响应图形用户界面上的缩放操作，根据缩放操作对应的缩放参数，调整当前框选区域，以得到调整后的框选区域的实施方式。其中，缩放操作可以是基于双指的触屏式缩放操作，也可以是基于鼠标滚轮的滚轮式缩放操作，下面分情况进行说明。
在一可选实施例中，在缩放操作为触屏式缩放操作的情况下，可以响应图形用户界面上的触屏式缩放操作，根据触屏式缩放操作在图形用户界面上的轨迹信息，确定触屏式缩放操作对应的缩放参数和缩放中心，调整隐式取图框的中心与缩放中心重合，并根据缩放参数，调整隐式取图框的尺寸，以得到调整后的框选区域。需要说明的是，当隐式取图框所在区域未超过初始取图框时，缩放的中心点为两手指所处中心点的位置。当隐式取图框所在区域超过初始取图框时，则缩放的中心点会产生偏移，确保隐式取图框在放大的同时，其上下左右边界都保持在初始取图框以内。
可选地，根据缩放参数，调整隐式取图框的尺寸，以得到调整后的框选区域的实施方式，包括：在缩放参数对应于放大操作的情况下，根据缩放参数，减小隐式取图框的尺寸，以按照减小尺寸后的隐式取图框确定框选区域；在缩放参数对应于缩小操作的情况下，根据缩放参数，增大隐式取图框的尺寸，以按照增大尺寸后的隐式取图框确定框选区域。例如，在手机终端，缩放操作通过双指在图形用户界面中滑动，以修改缩放系数的变化量(deltaY)，缩放系数的变化量对应于触屏式缩放操作的缩放参数，从而基于该缩放系数的变化量修改隐式取图框的缩放系数(scaleFactor)。其中，缩放系数(scaleFactor)是在初始取图框按一定比例缩小或放大得到当前隐式取图框的情况下，当前隐式取图框的宽度与初始取图框宽度的比值。例如，缩放系数可以是缩放系数的变化量与一固定值的乘积，该固定值可以是0.01、0.005或0.003，优选地，该固定值为0.001。若触屏式缩放操作为双指张开操作，则响应于该双指张开操作，缩小隐式取图框，减小scaleFactor，放大图形用户界面上显示的图像；若触屏式缩放操作为双指合并操作，则响应于该双指合并操作，放大隐式取图框，增大scaleFactor，缩小放大图形用户界面上显示的图像。
在另一可选实施例中，在缩放操作为滚轮式缩放操作的情况下，可以响应图形用户界面上的滚轮式缩放操作，获取滚轮式缩放操作对应的滚动监听事件，根据滚动监听事件中的光标位置以及滚动距离和方向，调整隐式取图框的中心与光标位置重合，并根据滚动距离和方向，调整隐式取图框的尺寸，以得到调整后的框选区域。需要说明的是，当取隐式取图框所在区域未超过初始取图框时，缩放的中心点为鼠标光标所处的位置，当隐式取图框所在区域超过初始取图框时，则缩放的中心点会产生偏移，确保隐式取图框在放大的同时，其上下左右边界都保持在初始取图框以内。可选地，根据滚动距离和方向，调整隐式取图框的尺寸，以得到调整后的框选区域，包括：在滚动距离和方向对应于缩小操作的情况下，根据滚动距离和方向，增大隐式取图框的尺寸，以按照增大尺寸后的隐式取图框确定框选区域；在滚动距离和方向对应于放大操作的情况下，根据滚动距离和方向，减小隐式取图框的尺寸，以按照减小尺寸后的隐式取图框确定框选区域。例如，在浏览器端，针对图形用户界面的缩放操作，可以获取缩放系数的变化量(deltaY)，缩放系数的变化量是鼠标监听事件中带有的参数，与鼠标滚轮滚动快慢有关，缩放系数的变化量对应于滚轮的滚动距离和方向，基于该缩放系数的变化量，可对缩放系数(scaleFactor)进行修改。例如，向上滚动鼠标滚轮，缩放系数减少，隐式取图框缩小，对应于图像放大操作；向下滚动鼠标滚轮，缩放系数增大，隐式取图框放大，对应于图像缩小操作。
下面举例说明，触屏式缩放操作和滚轮式缩放操作对应的缩放系数的计算方法。其中，触屏式缩放操作的缩放参数对应于缩放系数变化量(deltaY)，也即手指执行缩放操作前后，双指之间的距离差，滚轮式缩放操作的滚动距离和方向对应于缩放系数变化量(deltaY)。如图3b所示，记录两个手指开始触摸图形用户界面时的坐标[x1,y1]和[x2,y2]，并计算两个手指开始触摸图形用户界面时两手指间的长度length1，该长度length1为坐标[x1,y1]和[x2,y2]之间的欧式距离；记录两个手指执行缩放操作后的坐标[x3,y3]和[x4,y4]，并计算两个手指执行缩放操作后两手指间的长度length2，该长度length2为坐标[x3,y3]和[x4,y4]之间的欧式距离；长度length2与长度length1的差即为缩放系数的变化量。对于滚轮式缩放操作来说，可以获取滚动监听事件中的滚动距离和方向，滚动距离和方向对应于缩放系数的变化量。无论是哪种缩放操作，在确定缩放系数变化量之后，可根据一固定值确定缩放系数，其中，以该固定值是0.001为例，scaleFactor＝deltaY*0.001。若图形用户界面上显示的图像放大至最大为第一原始图像大小的5倍，也就是缩放系数(scaleFactor)的最小值为0.2；若图形用户界面上显示的图像缩小至最小为第一原始图像，也就是缩放系数(scaleFactor)的最大值为1，则可以预先确定缩放系数的边界值，该边界值可由最大值或最小值确定，并判断缩放系数是否超过边界值，若缩放系数未超过边界值，则输出该缩放系数；若缩放系数超过边界值，则输出缩放系数的边界值，具体地，若缩放系数大于边界值的最大值，则输出边界值的最大值，若缩放系数小于边界值的最小值，则输出边界值的最小值。
在本实施例中，可根据缩放操作后的缩放系数，确定缩放操作后隐式取图框在第一原始图像中的位置，对于浏览器端的鼠标式拖动操作，需要获取当前鼠标的光标位置在屏幕坐标系下的坐标，屏幕坐标系是图形用户界面左上角为坐标原点，x轴水平向右，y轴垂直向下的坐标系，坐标单位长度为图像用户界面上1px的分度值。将光标位置在屏幕坐标系下的位置作为缩放中心点，对于手机端的触屏式拖动操作，需要输入当前双指中点在屏幕坐标系下的坐标作为缩放的中心点。具体计算缩放操作后隐式取图框位置的过程如图3c所示。
如图3c所示，在缩放操作为触屏式缩放操作的情况下，双指之间的中心点即为缩放中心点，可以记录两个手指开始触摸图形用户界面时的坐标[x1,y1]和[x2,y2]，缩放中心点屏幕坐标系下的屏幕坐标为[(x1+x2)/2,(y1+y2)/2]。在缩放操作为滚轮式缩放操作的情况下，可以滚动监听事件中的光标位置，将光标位置直接作为缩放中心点的坐标。在确定缩放中心点的情况下，中心点坐标为(x0,y0)，缩放系数为scaleFactor，第一原始图像的高度为imgHeight，第一原始图像的宽度为imgWidth，初始取图框的参数表示为初始左部(initLeft)、初始上部(initTop)、初始宽度(initWidth)、初始高度(initHeight)，隐式取图框的宽度与图形用户界面的宽度的比值为k。
在执行缩放操作后，步骤①计算缩放操作后的隐式取图框的参数，缩放操作后隐式取图框的宽度currentWidth＝initWidth*scaleFactor，缩放操作后隐式取图框的高度currentHeight＝initHeight*scaleFactor。步骤②计算缩放操作前缩放中心点在取图框坐标系中的坐标(x1,y1)，x1＝x0*k，y1＝y0*k，其中，图框坐标系以取图框左上角为坐标原点，坐标单位长度为图片上1px的分度值。步骤③计算缩放操作后缩放中心点在取图框坐标系里的坐标(x2,y2)，计算中间参数s＝scaleFactor*initWidth/currentWidth，x2＝x1*s，y2＝y1*s。步骤④计算缩放操作前缩放中心点在图片坐标系里的坐标(imgX,imgY)，imgX＝x1+lastLeft，imgY＝y1+lastTop；其中，图片坐标系以第一原始图像左上角为坐标原点，x轴水平向右，y轴垂直向下，坐标单位长度为图片上1px的分度值，lastLeft为缩放操作前，隐式取图框距离第一原始图像左边的间距，lastTop为缩放操作前，隐式取图框距离第一原始图像上边的间距。步骤⑤计算缩放操作后缩放中心点在图片坐标系里的坐标(imgX2,imgY2)，imgX2＝x2+lastLeft，imgY2＝y2+lastTop。步骤⑥计算缩放操作前后缩放中心点在图片坐标系中的偏移量，(deltaX,deltaY)，deltaX＝imgX-imgX2，deltaY＝imgY-imgY2。步骤⑦根据缩放中心点的偏移量计算缩放操作后隐式取图框的currentTop和currentLeft，currentTop＝lastTop+deltaX，currentLeft＝lastLeft+deltaY。最后步骤⑧输出步骤①计算出的currentWidth、currentHeight以及输出步骤⑥计算出的currentTop和currentLeft。
在本实施例中，并不限定响应图形用户界面上的拖动操作，根据拖动操作对应的拖动参数，调整当前框选区域，以得到调整后的框选区域的实施方式，拖动操作可以是基于单根手指的触屏式拖动操作，也可以是鼠标式拖动操作，下面举例说明。
在一可选实施例中，在拖动操作是触屏式拖动操作的情况下，响应图形用户界面上的触屏式拖动操作，获取在图形用户界面上的拖动距离和方向；根据图形用户界面上的拖动距离和方向，调整隐式取图框的位置，以得到调整后的框选区域。例如，通过单指点击图形用户界面，并在图形用户界面上执行拖动操作，隐式取图框以单指点击处为基准点，随单指移动，得到调整后的框选区域。
在另一可选实施例中，在拖动操作是鼠标式拖动操作的情况下，响应图形用户界面上的鼠标式拖动操作，获取鼠标监听事件中的拖动距离和方向；根据鼠标监听事件中的拖动距离和方向，调整隐式取图框的位置，以得到调整后的框选区域。例如，通过按下鼠标左键在图形用户界面拖动，隐式取图框以鼠标左键点击处为基准点，随鼠标移动，得到调整后的框选区域。可选地，无论针对上述哪种拖动操作，在对隐形取图框进行拖动的过程中，若隐式取图框超过初始取图框的边界，则不再移动隐式取图框，以使得图形用户界面上显示的内容为初始取图框中的内容。
在一可选实施例中，可以将隐式取图框的缩放比例与拖动操作进行结合，缩放比例是图形用户上显示的画布图像相对与原始图像的放大倍数，其中，缩放比例对应于前述实施例中的缩放系数(scaleFactor)的倒数。若缩放比例大于设定的缩放比例阈值，则执行拖动操作可以实现对隐式取图框的拖动操作；若缩放比例小于或等于设定的缩放比例阈值，则执行拖动操作可以实现将隐式取图框从第一原始图像上切换至第二原始图像上。其中，设定的缩放比例阈值可以是1.0、1.2或1.5等，对此不做限定。
具体地，在拖动操是触屏式拖动操作的情况下，在获取图形用户界面上的拖动距离和方向之前，若缩放比例大于设定的缩放比例阈值，则获取图形用户界面上的拖动距离和方向，根据图形用户界面上的拖动距离和方向，调整隐式取图框的位置，以得到调整后的框选区域。在拖动操作是鼠标式拖动操作的情况下，在获取鼠标监听事件中的拖动距离和方向之前，若缩放比例大于设定的缩放比例阈值，则获取鼠标监听事件中的拖动距离和方向，根据鼠标监听事件中的拖动距离和方向，调整隐式取图框的位置，以得到调整后的框选区域。
无论是哪种拖动操作，若缩放比例小于或等于设定的缩放比例阈值，则将隐式取图框切换至第二原始图像上，并将图形用户界面上显示的第二画布图像更新为第三画布图像，第三画布图像是根据当前框选区域内的图像内容绘制而成的，当前框选区域是隐式取图框在第二原始图像上确定的。
例如，拖动操作为触屏式拖动操作，则双指的中心点为缩放中心点执行缩放操作，确定缩放比例，其中，设定的缩放比例阈值为1.5。若缩放比例大于1.5，表示当前图形用户界面上显示的画布图像相对于原始图像放大的倍数大于1.5，则单指在图形用户界面上执行触屏式拖动操作，获取图形用户界面上的拖动距离和方向，根据图形用户界面上的拖动距离和方向，调整隐式取图框的位置，以得到调整后的框选区域；若缩放比例小于或等于1.5，表示当前图形用户界面上显示的画布图像相对于原始图像放大的倍数小于或等于1.5，则单指在图形用户界面上执行触屏式拖动操作，可以实现将隐式取图框从第一原始图像切换至第二原始图像的操作，并将隐式取图框在第二原始图像上确定的框选区域中的图像内容绘制到画布中，得到第三画布图像，并将图形用户界面上显示的第二画布图像更新为第三画布图像。
又例如，拖动操作为鼠标式拖动操作，则滚动鼠标的滚轮，以鼠标的光标位置为中心点执行缩放操作，确定缩放比例，其中，设定的缩放比例阈值为1.5。若缩放比例大于1.5，表示当前图形用户界面上显示的画布图像相对于原始图像放大的倍数大于1.5，则通过鼠标左键在图形用户界面上执行鼠标式拖动操作，获取鼠标监听事件中的拖动距离和方向，根据鼠标监听事件中的的拖动距离和方向，调整隐式取图框的位置，以得到调整后的框选区域；若缩放比例小于或等于1.5，表示当前图形用户界面上显示的画布图像相对于原始图像放大的倍数小于或等于1.5，则通过鼠标左键执行鼠标式拖动操作，可以实现将隐式取图框从第一原始图像切换至第二原始图像的操作，并将隐式取图框在第二原始图像上确定的框选区域中的图像内容绘制到画布中，得到第三画布图像，并将图形用户界面上显示的第二画布图像更新为第三画布图像。
下面介绍执行拖动操作后隐式取图框的框选区域。
在拖动操实现为触屏式拖动操作的情况下，记录单指点击图形用户界面时，手指在屏幕坐标系下的坐标P1(x1,y1)，按下单个手指在图形用户界面上拖动时，手指在屏幕坐标系的坐标P2(x2,y2)，得到的在屏幕坐标系下的平移向量(moveVector)P0(x0,y0)，其中，x0＝x2-x1，y0＝y2-y1，在单指离开图形用户界面时，平移向量置0。
或者，在拖动操实现为鼠标式拖动操作的情况下，记录鼠标左键点击图形用户界面时，鼠标光标在屏幕坐标系下的坐标P1(x1,y1)，按下鼠标左键在图形用户界面上拖动时，鼠标光标在屏幕坐标系的坐标P2(x2,y2)，得到的在屏幕坐标系下的平移向量P0(x0,y0)，在鼠标左键松开时，平移向量置0。
如图3d所示，在执行拖动操作过程中，步骤①输入平移向量P0(x0,y0)，步骤②计算图片坐标系下的平移向量(vectorX0,vectorY0)，vectorX0＝x0*k，vectorY0＝y0*k，其中，k是隐式取图框的宽度与图形用户界面的宽度的比值；步骤③根据平移向量计算拖动操作后隐式取图框的currentTop和currentLeft，currentTop＝lastTop+vectorX0，currentLeft＝lastLeft+vectorY0；步骤④输出currentTop和currentLeft。
需要说明的是，上述实施例所提供方法的各步骤的执行主体均可以是同一设备，或者，该方法也由不同设备作为执行主体。比如，步骤101至步骤103的执行主体可以为设备A；又比如，步骤101和102的执行主体可以为设备A，步骤103的执行主体可以为设备B；等等。
另外，在上述实施例及附图中的描述的一些流程中，包含了按照特定顺序出现的多个操作，但是应该清楚了解，这些操作可以不按照其在本文中出现的顺序来执行或并行执行，操作的序号如101、102等，仅仅是用于区分开各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作可以按顺序执行或并行执行。需要说明的是，本文中的“第一”、“第二”等描述，是用于区分不同的消息、设备、模块等，不代表先后顺序，也不限定“第一”和“第二”是不同的类型。
图4为本申请示例性实施例提供的一种图像处理装置的结构示意图。该图像处理装置上存储有第一原始图像，且第一原始图像关联有隐式取图框，隐式取图框用于在第一原始图像上确定框选区域，图像处理装置提供有图形用户界面，如图4所示，所述图像处理装置包括：显示模块41、调整模块42、绘制模块43以及更新模块44。
所述显示模块41，用于在所述图形用户界面上显示第一画布图像，所述第一画布图像是根据当前框选区域内的图像内容绘制而成的，所述当前框选区域是所述隐式取图框在所述第一原始图像上确定的；
所述调整模块42，用于响应所述图形用户界面上的缩放/拖动操作，根据所述缩放/拖动操作对应的缩放/拖动参数，调整所述当前框选区域，以得到调整后的框选区域；
所述绘制模块43，用于将所述第一原始图像中位于所述调整后的框选区域中的图像内容绘制到画布中，得到第二画布图像；
所述更新模块44，用于将所述图形用户界面上显示的所述第一画布图像更新为所述第二画布图像。
在一可选实施例中，显示模块41具体用于：根据所述图形用户界面的尺寸比例和所述第一原始图像的尺寸比例，确定所述隐式取图框的最大框选区域，所述最大框选区域的尺寸与所述图形用户界面的尺寸适配；根据最大框选区域对应的所述隐式取图框，对所述第一原始图像进行裁剪，将裁剪出的图像内容绘制到画布中，得到所述第一画布图像，并将所述第一画布图像显示到所述图形用户界面中。
在一可选实施例中，调整模块42具体用于：在所述缩放操作为触屏式缩放操作的情况下，响应所述图形用户界面上的触屏式缩放操作，根据所述触屏式缩放操作在所述图形用户界面上的轨迹信息，确定所述触屏式缩放操作对应的缩放参数和缩放中心，调整所述隐式取图框的中心与所述缩放中心重合，并根据缩放参数，调整所述隐式取图框的尺寸，以得到调整后的框选区域；或者在所述缩放操作为滚轮式缩放操作的情况下，响应所述图形用户界面上的滚轮式缩放操作，获取所述滚轮式缩放操作对应的滚动监听事件，根据所述滚动监听事件中的光标位置以及滚动距离和方向，调整所述隐式取图框的中心与所述光标位置重合，并根据滚动距离和方向，调整所述隐式取图框的尺寸，以得到调整后的框选区域。
在一可选实施例中，调整模块42具体用于：在所述缩放参数对应于放大操作的情况下，根据缩放参数，减小所述隐式取图框的尺寸，以按照减小尺寸后的隐式取图框确定框选区域；在所述缩放参数对应于缩小操作的情况下，根据缩放参数，增大所述隐式取图框的尺寸，以按照增大尺寸后的隐式取图框确定框选区域；或者，在所述滚动距离和方向对应于缩小操作的情况下，根据滚动距离和方向，增大所述隐式取图框的尺寸，以按照增大尺寸后的隐式取图框确定框选区域；在所述滚动距离和方向对应于放大操作的情况下，根据滚动距离和方向，减小所述隐式取图框的尺寸，以按照减小尺寸后的隐式取图框确定框选区域。
在一可选实施例中，调整模块42具体用于：在所述拖动操作是触屏式拖动操作的情况下，响应所述图形用户界面上的触屏式拖动操作，获取在所述图形用户界面上的拖动距离和方向；根据所述图形用户界面上的拖动距离和方向，调整所述隐式取图框的位置，以得到调整后的框选区域；在所述拖动操作是鼠标式拖动操作的情况下，响应所述图形用户界面上的鼠标式拖动操作，获取鼠标监听事件中的拖动距离和方向；根据所述鼠标监听事件中的拖动距离和方向，调整所述隐式取图框的位置，以得到调整后的框选区域。
在一可选实施例中，调整模块42具体用于：在获取所述图形用户界面上的拖动距离和方向之前，若缩放比例大于设定的缩放比例阈值，则获取所述图形用户界面上的拖动距离和方向；所述缩放比例是所述图形用户上显示的画布图像相对与原始图像的放大倍数；在获取鼠标监听事件中的拖动距离和方向之前，若缩放比例大于设定的缩放比例阈值，则获取鼠标监听事件中的拖动距离和方向。
在一可选实施例中，调整模块42还用于：若缩放比例小于或等于设定的缩放比例阈值，则将所述隐式取图框切换至第二原始图像上，并将所述图形用户界面上显示的所述第二画布图像更新为第三画布图像，所述第三画布图像是根据当前框选区域内的图像内容绘制而成的，所述当前框选区域是所述隐式取图框在所述第二原始图像上确定的。
本申请实施例提供的图像处理装置，在对图像用户界面上的图像进行缩放或拖动的情况下，不需要针对原始图像进行缩放或拖动，可采用隐式取图框在原始图像上进行缩放或拖动，基于该隐式取图框确定原始图像上的框选区域，并将框选区域中的图像内容绘制到画布中，得到缩放或拖动后的画布图像，并在图像用户界面上显示该画布图像。整个过程中，无需对整个原始图像进行缩放或拖动，对隐式取图框进行缩放或拖动，可提高绘制画布图像的效率。
图5为本申请示例性实施例提供的一种图像处理设备的结构示意图。如图5所示，该设备包括：存储器54和处理器55，进一步还包括：显示器57。
显示器57，用于提供图形用户界面。
存储器54，用于存储计算机程序和第一原始图像，且所述第一原始图像关联有隐式取图框，所述隐式取图框用于在所述第一原始图像上确定框选区域；并可被配置为存储其它各种数据以支持在图像处理设备上的操作。这些数据的示例包括用于在图像处理设备上操作的任何应用程序或方法的指令。
存储器54可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。
处理器55，与存储器54耦合，用于执行存储器54中的计算机程序，以用于：在所述图形用户界面上显示第一画布图像，所述第一画布图像是根据当前框选区域内的图像内容绘制而成的，所述当前框选区域是所述隐式取图框在所述第一原始图像上确定的；响应所述图形用户界面上的缩放/拖动操作，根据所述缩放/拖动操作对应的缩放/拖动参数，调整所述当前框选区域，以得到调整后的框选区域；将所述第一原始图像中位于所述调整后的框选区域中的图像内容绘制到画布中，得到第二画布图像，并将所述图形用户界面上显示的所述第一画布图像更新为所述第二画布图像。
在一可选实施例中，处理器55在所述图形用户界面上显示第一画布图像时，具体用于：根据所述图形用户界面的尺寸比例和所述第一原始图像的尺寸比例，确定所述隐式取图框的最大框选区域，所述最大框选区域的尺寸与所述图形用户界面的尺寸适配；根据最大框选区域对应的所述隐式取图框，对所述第一原始图像进行裁剪，将裁剪出的图像内容绘制到画布中，得到所述第一画布图像，并将所述第一画布图像显示到所述图形用户界面中。
在一可选实施例中，处理器55在响应所述图形用户界面上的缩放操作，根据所述缩放操作对应的缩放参数，调整所述当前框选区域，以得到调整后的框选区域时，具体用于：在所述缩放操作为触屏式缩放操作的情况下，响应所述图形用户界面上的触屏式缩放操作，根据所述触屏式缩放操作在所述图形用户界面上的轨迹信息，确定所述触屏式缩放操作对应的缩放参数和缩放中心，调整所述隐式取图框的中心与所述缩放中心重合，并根据缩放参数，调整所述隐式取图框的尺寸，以得到调整后的框选区域；或者在所述缩放操作为滚轮式缩放操作的情况下，响应所述图形用户界面上的滚轮式缩放操作，获取所述滚轮式缩放操作对应的滚动监听事件，根据所述滚动监听事件中的光标位置以及滚动距离和方向，调整所述隐式取图框的中心与所述光标位置重合，并根据滚动距离和方向，调整所述隐式取图框的尺寸，以得到调整后的框选区域。
在一可选实施例中，处理器55在根据缩放参数，调整所述隐式取图框的尺寸，以得到调整后的框选区域时，具体用于：在所述缩放参数对应于放大操作的情况下，根据缩放参数，减小所述隐式取图框的尺寸，以按照减小尺寸后的隐式取图框确定框选区域；在所述缩放参数对应于缩小操作的情况下，根据缩放参数，增大所述隐式取图框的尺寸，以按照增大尺寸后的隐式取图框确定框选区域；相应地，处理器55在根据滚动距离和方向，调整所述隐式取图框的尺寸，以得到调整后的框选区域时，具体用于：在所述滚动距离和方向对应于缩小操作的情况下，根据滚动距离和方向，增大所述隐式取图框的尺寸，以按照增大尺寸后的隐式取图框确定框选区域；在所述滚动距离和方向对应于放大操作的情况下，根据滚动距离和方向，减小所述隐式取图框的尺寸，以按照减小尺寸后的隐式取图框确定框选区域。
在一可选实施例中，处理器55在响应所述图形用户界面上的拖动操作，根据所述拖动操作对应的拖动参数，调整所述当前框选区域，以得到调整后的框选区域时，具体用于：在所述拖动操作是触屏式拖动操作的情况下，响应所述图形用户界面上的触屏式拖动操作，获取在所述图形用户界面上的拖动距离和方向；根据所述图形用户界面上的拖动距离和方向，调整所述隐式取图框的位置，以得到调整后的框选区域；在所述拖动操作是鼠标式拖动操作的情况下，响应所述图形用户界面上的鼠标式拖动操作，获取鼠标监听事件中的拖动距离和方向；根据所述鼠标监听事件中的拖动距离和方向，调整所述隐式取图框的位置，以得到调整后的框选区域。
在一可选实施例中，处理器55在获取所述图形用户界面上的拖动距离和方向之前，还用于：若缩放比例大于设定的缩放比例阈值，则获取所述图形用户界面上的拖动距离和方向；所述缩放比例是所述图形用户上显示的画布图像相对与原始图像的放大倍数；相应地，处理器55在获取鼠标监听事件中的拖动距离和方向之前，还用于：若缩放比例大于设定的缩放比例阈值，则获取鼠标监听事件中的拖动距离和方向。
在一可选实施例中，处理器55还用于：若缩放比例小于或等于设定的缩放比例阈值，则将所述隐式取图框切换至第二原始图像上，并将所述图形用户界面上显示的所述第二画布图像更新为第三画布图像，所述第三画布图像是根据当前框选区域内的图像内容绘制而成的，所述当前框选区域是所述隐式取图框在所述第二原始图像上确定的。
本申请实施例提供的图像处理设备，在对图像用户界面上的图像进行缩放或拖动的情况下，不需要针对原始图像进行缩放或拖动，可采用隐式取图框在原始图像上进行缩放或拖动，基于该隐式取图框确定原始图像上的框选区域，并将框选区域中的图像内容绘制到画布中，得到缩放或拖动后的画布图像，并在图像用户界面上显示该画布图像。整个过程中，无需对整个原始图像进行缩放或拖动，对隐式取图框进行缩放或拖动，可提高绘制画布图像的效率。
进一步，如图5所示，该图像处理设备还包括：通信组件56、电源组件58、音频组件59等其它组件。图5中仅示意性给出部分组件，并不意味着图像处理设备只包括图5所示组件。需要说明的是，图5中虚线框内的组件为可选组件，而非必选组件，具体可视图像处理设备的产品形态而定。
相应地，本申请实施例还提供一种存储有计算机程序的计算机可读存储介质，当计算机程序被处理器执行时，致使处理器能够实现本申请实施例提供的图1所示方法中的各步骤。
上述图5中的通信组件被配置为便于通信组件所在设备和其他设备之间有线或无线方式的通信。通信组件所在设备可以接入基于通信标准的无线网络，如WiFi，2G、3G、4G/LTE、5G等移动通信网络，或它们的组合。在一个示例性实施例中，通信组件经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。
上述图5中的显示器包括屏幕，其屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。
上述图5中的电源组件，为电源组件所在设备的各种组件提供电力。电源组件可以包括电源管理系统，一个或多个电源，及其他与为电源组件所在设备生成、管理和分配电力相关联的组件。
上述图5中的音频组件，可被配置为输出和/或输入音频信号。例如，音频组件包括一个麦克风(MIC)，当音频组件所在设备处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器或经由通信组件发送。在一些实施例中，音频组件还包括一个扬声器，用于输出音频信号。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种图像处理方法，其特征在于，应用于电子终端，所述电子终端上存储有第一原始图像，且所述第一原始图像关联有隐式取图框，所述隐式取图框用于在所述第一原始图像上确定框选区域，所述隐式取图框的大小不超过最大框选区域，所述隐式取图框的位置不超过所述最大框选区域对应的初始取图框，所述电子终端提供有图形用户界面，所述最大框选区域的尺寸与所述图形用户界面的尺寸适配，所述方法包括：
在所述图形用户界面上显示第一画布图像，所述第一画布图像是根据当前框选区域内的图像内容绘制而成的，所述当前框选区域是所述隐式取图框在所述第一原始图像上确定的；
响应所述图形用户界面上的缩放/拖动操作，根据所述缩放/拖动操作对应的缩放/拖动参数，调整所述当前框选区域，以得到调整后的框选区域；其中，调整所述当前框选区域，以得到调整后的框选区域，包括：调整所述隐式取图框相对于所述第一原始图像的尺寸和位置，以得到调整后所述隐式取图框在所述第一原始图像中的框选区域；
将所述第一原始图像中位于所述调整后的框选区域中的图像内容绘制到画布中，得到第二画布图像，并将所述图形用户界面上显示的所述第一画布图像更新为所述第二画布图像；
响应所述图形用户界面上的缩放操作，根据所述缩放操作对应的缩放参数，调整所述当前框选区域，以得到调整后的框选区域，包括：
在所述缩放操作为触屏式缩放操作的情况下，响应所述图形用户界面上的触屏式缩放操作，根据所述触屏式缩放操作在所述图形用户界面上的轨迹信息，确定所述触屏式缩放操作对应的缩放参数和缩放中心，调整所述隐式取图框的中心与所述缩放中心重合，并根据缩放参数，调整所述隐式取图框的尺寸，以得到调整后的框选区域；其中，当所述隐式取图框所在区域超过所述初始取图框时，则缩放中心产生偏移，确保所述隐式取图框在放大的同时，所述隐式取图框的边界位于所述初始取图框以内。
2.根据权利要求1所述的方法，其特征在于，在所述图形用户界面上显示第一画布图像，包括：
根据所述图形用户界面的尺寸比例和所述第一原始图像的尺寸比例，确定所述隐式取图框的最大框选区域；
根据最大框选区域对应的所述隐式取图框，对所述第一原始图像进行裁剪，将裁剪出的图像内容绘制到画布中，得到所述第一画布图像，并将所述第一画布图像显示到所述图形用户界面中。
3.根据权利要求1或2所述的方法，其特征在于，响应所述图形用户界面上的缩放操作，根据所述缩放操作对应的缩放参数，调整所述当前框选区域，以得到调整后的框选区域，还包括：
在所述缩放操作为滚轮式缩放操作的情况下，响应所述图形用户界面上的滚轮式缩放操作，获取所述滚轮式缩放操作对应的滚动监听事件，根据所述滚动监听事件中的光标位置以及滚动距离和方向，调整所述隐式取图框的中心与所述光标位置重合，并根据滚动距离和方向，调整所述隐式取图框的尺寸，以得到调整后的框选区域。
4.根据权利要求3所述的方法，其特征在于，根据缩放参数，调整所述隐式取图框的尺寸，以得到调整后的框选区域，包括：
在所述缩放参数对应于放大操作的情况下，根据缩放参数，减小所述隐式取图框的尺寸，以按照减小尺寸后的隐式取图框确定框选区域；
在所述缩放参数对应于缩小操作的情况下，根据缩放参数，增大所述隐式取图框的尺寸，以按照增大尺寸后的隐式取图框确定框选区域；
相应地，根据滚动距离和方向，调整所述隐式取图框的尺寸，以得到调整后的框选区域，包括：
在所述滚动距离和方向对应于缩小操作的情况下，根据滚动距离和方向，增大所述隐式取图框的尺寸，以按照增大尺寸后的隐式取图框确定框选区域；
在所述滚动距离和方向对应于放大操作的情况下，根据滚动距离和方向，减小所述隐式取图框的尺寸，以按照减小尺寸后的隐式取图框确定框选区域。
5.根据权利要求2所述的方法，其特征在于，响应所述图形用户界面上的拖动操作，根据所述拖动操作对应的拖动参数，调整所述当前框选区域，以得到调整后的框选区域，包括：
在所述拖动操作是触屏式拖动操作的情况下，响应所述图形用户界面上的触屏式拖动操作，获取在所述图形用户界面上的拖动距离和方向；根据所述图形用户界面上的拖动距离和方向，调整所述隐式取图框的位置，以得到调整后的框选区域；
在所述拖动操作是鼠标式拖动操作的情况下，响应所述图形用户界面上的鼠标式拖动操作，获取鼠标监听事件中的拖动距离和方向；根据所述鼠标监听事件中的拖动距离和方向，调整所述隐式取图框的位置，以得到调整后的框选区域。
6.根据权利要求5所述的方法，其特征在于，在获取所述图形用户界面上的拖动距离和方向之前，还包括：若缩放比例大于设定的缩放比例阈值，则获取所述图形用户界面上的拖动距离和方向；所述缩放比例是所述图形用户上显示的画布图像相对与原始图像的放大倍数；
相应地，在获取鼠标监听事件中的拖动距离和方向之前，还包括：若缩放比例大于设定的缩放比例阈值，则获取鼠标监听事件中的拖动距离和方向。
7.根据权利要求6所述的方法，其特征在于，若缩放比例小于或等于设定的缩放比例阈值，则将所述隐式取图框切换至第二原始图像上，并将所述图形用户界面上显示的所述第二画布图像更新为第三画布图像，所述第三画布图像是根据当前框选区域内的图像内容绘制而成的，所述当前框选区域是所述隐式取图框在所述第二原始图像上确定的。
8.一种图像处理装置，其特征在于，所述图像处理装置上存储有第一原始图像，且所述第一原始图像关联有隐式取图框，所述隐式取图框用于在所述第一原始图像上确定框选区域，所述隐式取图框的大小不超过最大框选区域，所述隐式取图框的位置不超过所述最大框选区域对应的初始取图框，所述图像处理装置提供有图形用户界面，所述最大框选区域的尺寸与所述图形用户界面的尺寸适配，所述图像处理装置包括：显示模块、调整模块、绘制模块以及更新模块；
所述显示模块，用于在所述图形用户界面上显示第一画布图像，所述第一画布图像是根据当前框选区域内的图像内容绘制而成的，所述当前框选区域是所述隐式取图框在所述第一原始图像上确定的；
所述调整模块，用于响应所述图形用户界面上的缩放/拖动操作，根据所述缩放/拖动操作对应的缩放/拖动参数，调整所述当前框选区域，以得到调整后的框选区域；其中，所述调整模块，具体用于：调整所述隐式取图框相对于所述第一原始图像的尺寸和位置，以得到调整后所述隐式取图框在所述第一原始图像中的框选区域；
所述绘制模块，用于将所述第一原始图像中位于所述调整后的框选区域中的图像内容绘制到画布中，得到第二画布图像；
所述更新模块，用于将所述图形用户界面上显示的所述第一画布图像更新为所述第二画布图像；
所述调整模块，具体用于：在所述缩放操作为触屏式缩放操作的情况下，响应所述图形用户界面上的触屏式缩放操作，根据所述触屏式缩放操作在所述图形用户界面上的轨迹信息，确定所述触屏式缩放操作对应的缩放参数和缩放中心，调整所述隐式取图框的中心与所述缩放中心重合，并根据缩放参数，调整所述隐式取图框的尺寸，以得到调整后的框选区域；其中，当所述隐式取图框所在区域超过所述初始取图框时，则缩放中心产生偏移，确保所述隐式取图框在放大的同时，所述隐式取图框的边界位于所述初始取图框以内。
9.一种图像处理设备，其特征在于，包括：存储器、显示器和处理器；所述存储器，用于存储计算机程序和第一原始图像，且所述第一原始图像关联有隐式取图框，所述隐式取图框用于在所述第一原始图像上确定框选区域，所述隐式取图框的大小不超过最大框选区域，所述隐式取图框的位置不超过所述最大框选区域对应的初始取图框；所述显示器，用于提供图形用户界面，所述最大框选区域的尺寸与所述图形用户界面的尺寸适配；所述处理器，与所述存储器耦合，用于执行所述计算机程序，以实现权利要求1-7任一项所述方法中的步骤。
10.一种存储有计算机程序的计算机可读存储介质，其特征在于，当所述计算机程序被处理器执行时，致使所述处理器实现权利要求1-7任一项所述方法中的步骤。
CN202111672778.3A 2021-12-31 2021-12-31 图像处理方法、装置、设备及存储介质 Active CN114612584B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111672778.3A CN114612584B (zh) 2021-12-31 2021-12-31 图像处理方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111672778.3A CN114612584B (zh) 2021-12-31 2021-12-31 图像处理方法、装置、设备及存储介质

Publications (2)

Publication Number Publication Date
CN114612584A CN114612584A (zh) 2022-06-10
CN114612584B true CN114612584B (zh) 2023-04-28

Family

ID=81857624

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111672778.3A Active CN114612584B (zh) 2021-12-31 2021-12-31 图像处理方法、装置、设备及存储介质

Country Status (1)

Country Link
CN (1) CN114612584B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115686671A (zh) * 2022-10-27 2023-02-03 北京城市网邻信息技术有限公司 一种图片加载方法、设备及存储介质

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107809581A (zh) * 2017-09-29 2018-03-16 天津远翥科技有限公司 图像处理方法、装置、终端设备及无人机

Family Cites Families (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2004172655A (ja) * 2002-11-15 2004-06-17 Fuji Photo Film Co Ltd 画像処理装置及び電子カメラ
US7675528B2 (en) * 2003-11-14 2010-03-09 Vistaprint Technologies Limited Image cropping system and method
JP2006129101A (ja) * 2004-10-29 2006-05-18 Casio Comput Co Ltd 画像のトリミング方法、撮像装置、画像処理装置、及びプログラム
JP4710694B2 (ja) * 2006-04-04 2011-06-29 セイコーエプソン株式会社 トリミング装置およびその方法並びにコンピュータプログラム
US8085242B2 (en) * 2007-09-10 2011-12-27 Ricoh Company, Ltd. Input control device and image forming apparatus
US20090295787A1 (en) * 2008-06-02 2009-12-03 Amlogic, Inc. Methods for Displaying Objects of Interest on a Digital Display Device
US9933935B2 (en) * 2011-08-26 2018-04-03 Apple Inc. Device, method, and graphical user interface for editing videos
US20150135125A1 (en) * 2013-11-12 2015-05-14 Apple Inc. Bubble loupes
CN105335925A (zh) * 2014-07-30 2016-02-17 北京畅游天下网络技术有限公司 一种图片的裁剪方法和浏览器装置
CN109298909B (zh) * 2018-09-14 2021-03-26 Oppo广东移动通信有限公司 一种窗口调节的方法、移动终端及计算机可读存储介质
CN113703653A (zh) * 2021-09-02 2021-11-26 北京城市网邻信息技术有限公司 图像处理方法、装置、设备和计算机可读存储介质

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107809581A (zh) * 2017-09-29 2018-03-16 天津远翥科技有限公司 图像处理方法、装置、终端设备及无人机

Also Published As

Publication number Publication date
CN114612584A (zh) 2022-06-10

Similar Documents

Publication Publication Date Title
EP3091426B1 (en) User terminal device providing user interaction and method therefor
EP2487578B1 (en) Method and system for controlling screen of mobile terminal
US9405463B2 (en) Device and method for gesturally changing object attributes
US20180011818A1 (en) Webpage Update Method And Apparatus
CN109508128B (zh) 搜索控件显示方法、装置、设备及计算机可读存储介质
US20120064946A1 (en) Resizable filmstrip view of images
USRE49272E1 (en) Adaptive determination of information display
CN105068727A (zh) 一种绘图工具的实现方法和装置
KR20150095541A (ko) 사용자 단말 장치 및 이의 디스플레이 방법
KR20170059242A (ko) 영상 표시 장치 및 그 동작방법
EP2778880B1 (en) Method for controlling display function and an electronic device thereof
CN109799945B (zh) 小程序长列表滚动显示方法、装置、电子设备及存储介质
CN106897321B (zh) 显示地图数据的方法及装置
WO2018068364A1 (zh) 用于页面显示的方法、装置、图形用户界面及移动终端
US20140215411A1 (en) Method and apparatus for controlling content playback
CN109324736A (zh) 局部放大图片的交互方法及装置
CN110647286A (zh) 屏幕元素控制方法、装置、设备、存储介质
CN114612584B (zh) 图像处理方法、装置、设备及存储介质
CN108319411B (zh) 一种图表局部放大的方法、装置及电子设备
US8904313B2 (en) Gestural control for quantitative inputs
CN110443772B (zh) 图片处理方法、装置、计算机设备和存储介质
CN114115665A (zh) 一种页面元素的处理方法、设备及计算机可读存储介质
EP2696269A1 (en) Method of momentum based zoom of content on an electronic device
CN112995401A (zh) 控件显示方法、装置、设备及介质
CN106131628B (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