CN114880611A - 截图处理方法及*** - Google Patents
截图处理方法及*** Download PDFInfo
- Publication number
- CN114880611A CN114880611A CN202210383661.1A CN202210383661A CN114880611A CN 114880611 A CN114880611 A CN 114880611A CN 202210383661 A CN202210383661 A CN 202210383661A CN 114880611 A CN114880611 A CN 114880611A
- Authority
- CN
- China
- Prior art keywords
- picture
- canvas
- intercepted
- editing
- data
- 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.)
- Pending
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 28
- 238000012545 processing Methods 0.000 claims abstract description 19
- 238000000034 method Methods 0.000 claims description 20
- 238000004040 coloring Methods 0.000 claims description 14
- 230000004044 response Effects 0.000 claims description 14
- 230000001960 triggered effect Effects 0.000 claims description 4
- 230000006870 function Effects 0.000 description 23
- 238000005516 engineering process Methods 0.000 description 14
- 238000010586 diagram Methods 0.000 description 8
- 230000008569 process Effects 0.000 description 6
- 238000012544 monitoring process Methods 0.000 description 3
- 238000009877 rendering Methods 0.000 description 3
- 230000006399 behavior Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000004590 computer program Methods 0.000 description 1
- 230000008094 contradictory effect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Images
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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- 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/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
- G06F16/9558—Details of hyperlinks; Management of linked annotations
-
- 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/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- 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
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/60—Editing figures and text; Combining figures or text
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Processing Or Creating Images (AREA)
Abstract
本申请公开了一种截图处理方法，该方法包括：创建主画布，在所述主画布中展示图片编辑页，编辑待截取图片；获取所述主画布中截取区域的数据；创建子画布，将所述截取区域的数据绘制到所述子画布中，并从所述子画布中获得预定格式的图片数据；上传所述图片数据到服务器中，以保存截取后的图片，并在数据库中生成图片链接记录。本申请还公开了一种截图处理***、电子装置和计算机可读存储介质。由此，能够在主画布中编辑任意所需的图片，并通过子画布实现局部截图，实现跨平台的截图处理。
Description
技术领域
本申请涉及图片处理技术领域，尤其涉及一种截图处理方法、***、电子装置及计算机可读存储介质。
背景技术
随着计算机技术的普及与发展，用户常常需要在电子装置上进行图片截取。目前，图片截取一般通过安卓***或是IOS***提供的截取功能实现。但是，安卓***或是IOS***一个的截取功能不能跨平台处理，并且很多情况下没有线上实时对保存的图片列表查看、编辑和删除的功能。
发明内容
本申请的主要目的在于提出一种截图处理方法、***、电子装置及计算机可读存储介质，旨在解决如何实现跨平台对图片资源进行截取及线上实时对保存的图片列表查看、编辑和删除的问题。
为实现上述目的，本申请实施例提供了一种截图处理方法，所述方法包括：
创建主画布，在所述主画布中展示图片编辑页，编辑待截取图片；
获取所述主画布中截取区域的数据；
创建子画布，将所述截取区域的数据绘制到所述子画布中，并从所述子画布中获得预定格式的图片数据；
上传所述图片数据到服务器中，以保存截取后的图片，并在数据库中生成图片链接记录。
可选地，所述方法还包括：
提供图片管理页面，根据所述图片链接记录展示所保存的所述截取后的图片列表。
可选地，所述方法还包括：
响应于用户在所述图片管理页面的操作，对所述截取后的图片进行删除或重新编辑。
可选地，所述编辑待截取图片包括：
在所述主画布中加载任意图片进行摆放，或加载一组图片配置并根据所述配置将相应图片绘制到指定位置，对所述图片进行编辑操作并保存。
可选地，所述编辑操作包括图片上色、图片缩放、图片替换。
可选地，所述获取所述主画布中截取区域的数据包括：
获取所述主画布的上下文信息；
确定所述主画布中所述待截取图片的截取区域；
获取所述截取区域的数据。
可选地，所述创建子画布包括：
根据所述截取区域的大小，创建相应大小的所述子画布。
可选地，所述响应于用户在所述图片管理页面的操作，对所述截取后的图片进行删除或重新编辑包括：
当用户点击所述图片管理界面中的删除按钮时，响应于点击删除按钮区域的点击事件，通知所述服务器删除对应的所述截取后的图片并刷新所述截取后的图片列表。
可选地，所述响应于用户在所述图片管理页面的操作，对所述截取后的图片进行删除或重新编辑还包括：
当用户点击所述截取后的图片列表中的一个图片时，响应于点击图片区域触发的点击事件，在所述主画布中重新绘制所述图片，供用户进行重新编辑。
此外，为实现上述目的，本申请实施例还提供一种截图处理***，所述***包括：
编辑模块，用于创建主画布，在所述主画布中展示图片编辑页，编辑待截取图片；
获取模块，用于获取所述主画布中截取区域的数据；
截图模块，用于创建子画布，将所述截取区域的数据绘制到所述子画布中，并从所述子画布中获得预定格式的图片数据；
上传模块，用于上传所述图片数据到服务器中，以保存截取后的图片，并在数据库中生成图片链接记录。
为实现上述目的，本申请实施例还提供一种电子装置，所述电子装置包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的截图处理程序，所述截图处理程序被所述处理器执行时实现如上述的截图处理方法。
为实现上述目的，本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有截图处理程序，所述截图处理程序被处理器执行时实现如上述的截图处理方法。
本申请实施例提出的截图处理方法、***、电子装置及计算机可读存储介质，能够在支持HTML语言的所有平台上实现对图片资源的截取，用户可以在主画布内制作任何所需的图片，并且可以通过子画布实现对该图片的局部截图。另外，还可以显示用户保存的全部截图，并可以提供删除和重新编辑图片的功能。
附图说明
图1为实现本申请各个实施例的一种应用环境架构图；
图2为本申请第一实施例提出的一种截图处理方法的流程图；
图3为本申请第二实施例提出的一种截图处理方法的流程图；
图4为本申请第三实施例提出的一种电子装置的硬件架构示意图；
图5为本申请第四实施例提出的一种截图处理***的模块示意图；
图6为本申请第五实施例提出的一种截图处理***的模块示意图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
需要说明的是，在本申请实施例中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。
请参阅图1，图1为实现本申请各个实施例的一种应用环境架构图。本申请可应用于包括，但不仅限于客户端2、服务器4、网络6的应用环境中。
其中，所述客户端2用于向用户显示当前应用的界面并接收用户的图片编辑、选择、删除等操作。所述客户端2可以为PC(Personal Computer，个人电脑)、手机、平板电脑、便携计算机、可穿戴设备等终端设备。
所述服务器4用于为所述客户端2提供数据和技术支持，例如保存客户端2上传的图片数据。所述服务器4可以是机架式服务器、刀片式服务器、塔式服务器或机柜式服务器等计算设备，可以是独立的服务器，也可以是多个服务器所组成的服务器集群。
所述网络6可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯***(Global System of Mobile communication，GSM)、宽带码分多址(Wideband CodeDivision Multiple Access，WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。所述服务器4和一个或多个所述客户端2之间通过所述网络6通信连接，以进行数据传输和交互。
实施例一
如图2所示，为本申请第一实施例提出的一种截图处理方法的流程图。可以理解，本方法实施例中的流程图不用于对执行步骤的顺序进行限定。根据需要，还可以对该流程图中的部分步骤进行添加或删减。下面以所述客户端2作为执行主体对该方法进行说明。
该方法包括以下步骤：
S200，创建主画布，在所述主画布中展示图片编辑页，编辑待截取图片。
在本实施例中，主要采用Canvas(画布)技术来实现截图功能。所述Canvs是一个HTML(Hyper Text Markup Language，超文本标记语言)画布元素，它没有自己的行为，但是定义了一个API(Application Programming Interface，应用程序编程接口)，支持脚本化客户端绘图操作。所述主画布(mainCanvs)用于展示图片编辑页，供用户加载任意图片或一组图片配置，并对该图片进行上色等编辑操作。
以一个在游戏中对角色图片进行上色的场景为例，用户账号登录成功后,创建主画布，进入游戏界面。在主画布中，绘制需要截取(裁剪)的图片spr_content对象。用户可以加载任意图片进行摆放，或是根据指定的角色样式加载一组图片配置，并根据该配置将相应图片绘制到指定位置，例如角色的手、脚、头部、身体躯干等。也就是说，在主画布中的某一区域(例如中央)根据服务器保存的某一个默认配置，绘制出角色。然后，通过特定的图片编辑方案、图片缩放、图片替换等操作进行编辑，在图片编辑完毕后，点击保存按钮进行保存。
所述特定的图片编辑方案可以是一种对绘制到主画布内的多张图片进行上色的技术，包括调色功能(提供色值、饱和度、亮度三个滑动条，用户通过滑动操作调出想要的颜色，还可以提供调制颜色预览区域)、图片选择的功能(可以选择主画布内某一张图片进行上色)、历史编辑操作记录功能(通过相应按钮可以进行回退、重做、清空、完成等操作)等。
S202，获取所述主画布中截取区域的数据。
首先获取主画布的context(上下文，可以将HTML语言的一个CanvasRenderingContext2D对象作为2D渲染的上下文)。然后，确定所述主画布中待截取图片的截取区域，并获取所述截取区域的数据(data)。在本实施例中，可以通过spr_content的坐标和宽高确定所述截取区域(例如角色区域)，并通过mainCanvs.getImageData方法获取所述主画布中对应区域的数据(例如裁剪角色此部分位置的像素数据)。
在其他实施例中，还可以通过接收用户的截取操作(监听用户在截取操作时的鼠标点击按下事件、鼠标移动事件和鼠标松手事件)等方式来确定所述截取区域，在此不做限制。
S204，创建子画布，将所述待截取区域的数据绘制到所述子画布中，并从所述子画布中获得预定格式的图片数据。
在本实施例中，首先根据所述截取区域的大小创建子画布(childCanvs)，例如根据spr_content的宽高创建所述子画布。然后将所述截取区域的数据绘制到所述子画布中，再通过childCanvs.toDataURL('image/png',1)方法，获得base64格式的图片数据(imgData)。
例如，裁剪角色此部分位置的像素数据，绘制到子画布中，然后获得子画布中所有的图片数据(所述图片数据一般为base64格式)。所述图片数据包括角色各部位的信息，例如坐标、颜色等。
S206，上传所述图片数据到服务器中，以保存截取后的图片，并在数据库中生成图片链接记录。
在本实施例中，当客户端上传所述图片数据后，所述截取后的图片在所述服务器中保存为png格式，并生成相应的图片链接记录，保存到数据库中。如果未保存成功，则提示用户稍后再试。所述图片链接记录可以包括多条图片链接。通过所述图片链接记录，后续可以在客户端图片管理界面中获取到该链接指向的图片，并绘制到图片管理界面中。
本实施例提出的截图处理方法，在Canvas技术的基础上进行改进，通过主画布中的图片编辑页及用于绘制截取区域数据的子画布，用户可以在主画布内制作任何所需的图片，并且可以通过子画布实现对该图片的局部截图，从而可以在支持HTML语言的所有平台上实现对图片资源的截取。并且所有截图可以上传到服务器中进行保存，并生成图片链接记录，以方便后续对这些截图进行查看等操作。
实施例二
如图3所示，为本申请第二实施例提出的一种截图处理方法的流程图。在第二实施例中，所述截图处理方法在上述第一实施例的基础上，还包括步骤S308-S310。可以理解，本方法实施例中的流程图不用于对执行步骤的顺序进行限定。根据需要，还可以对该流程图中的部分步骤进行添加或删减。
该方法包括以下步骤：
S300，创建主画布，在所述主画布中展示图片编辑页，编辑待截取图片。
在本实施例中，主要采用Canvas技术来实现截图功能。所述主画布用于展示图片编辑页，供用户加载任意图片或一组图片配置，并对该图片进行上色等编辑操作。
以一个在游戏中对角色图片进行上色的场景为例，用户账号登录成功后,创建主画布，进入游戏界面。在主画布中，绘制需要截取(裁剪)的图片spr_content对象。用户可以加载任意图片进行摆放，或是根据指定的角色样式加载一组图片配置，并根据该配置将相应图片绘制到指定位置，例如角色的手、脚、头部、身体躯干等。也就是说，在主画布中的某一区域(例如中央)根据服务器保存的某一个默认配置，绘制出角色。然后，通过特定的图片编辑方案、图片缩放、图片替换等操作进行编辑，在图片编辑完毕后，点击保存按钮进行保存。
所述特定的图片编辑方案可以是一种对绘制到主画布内的多张图片进行上色的技术，包括调色功能(提供色值、饱和度、亮度三个滑动条，用户通过滑动操作调出想要的颜色，还可以提供调制颜色预览区域)、图片选择的功能(可以选择主画布内某一张图片进行上色)、历史编辑操作记录功能(通过相应按钮可以进行回退、重做、清空、完成等操作)等。
S302，获取所述主画布中截取区域的数据。
首先获取主画布的context，然后确定所述主画布中待截取图片的截取区域，并获取所述截取区域的数据。在本实施例中，可以通过spr_content的坐标和宽高确定所述截取区域(例如角色区域)，并通过mainCanvs.getImageData方法获取所述主画布中对应区域的数据(例如裁剪角色此部分位置的像素数据)。
在其他实施例中，还可以通过接收用户的截取操作(监听用户在截取操作时的鼠标点击按下事件、鼠标移动事件和鼠标松手事件)等方式来确定所述截取区域，在此不做限制。
S304，创建子画布，将所述待截取区域的数据绘制到所述子画布中，并从所述子画布中获得预定格式的图片数据。
在本实施例中，首先根据所述截取区域的大小创建子画布，例如根据spr_content的宽高创建相应大小的所述子画布。然后将所述截取区域的数据绘制到所述子画布中，再通过childCanvs.toDataURL('image/png',1)方法，获得base64格式的图片数据(imgData)。
因此，该步骤可以通过所述子画布实现对所述主画布中的所述待截取图片的局部截图。
S306，上传所述图片数据到服务器中，以保存截取后的图片，并在数据库中生成图片链接记录。
在本实施例中，当客户端上传所述图片数据后，所述截取后的图片在所述服务器中保存为png格式，并生成相应的图片链接记录，保存到数据库中。如果未保存成功，则提示用户稍后再试。所述图片链接记录可以包括多条图片链接。通过所述图片链接记录，后续可以在客户端图片管理界面中获取到该链接指向的图片，并绘制到图片管理界面中。
S308，提供图片管理页面，展示所保存的截取后的图片列表。
服务器对所述截取后的图片保存成功后，可以返回数据(例如所述图片链接记录)给客户端。客户端提供图片管理页面，根据所述图片链接记录获取各个链接指向的图片，并绘制到所述图片管理界面中，以展示用户所保存的截取后的图片列表，用于给用户浏览，实现对截取区域的内容的保存和历史截取内容的列表查看。
所述图片管理界面基于HTML的技术进行绘制，界面中包括用户所保存的所述截取后的图片以及删除按钮等。在本实施例中，当用户点击所述主画布中的作品按钮时，即可通过响应点击作品按钮区域的点击事件触发操作，跳转到所述图片管理页面。在其他实施例中，也可采用其他任意可行的方式实现跳转，在此不再赘述。
S310，响应于用户在所述图片管理页面的操作，对所述截取后的图片进行删除或重新编辑。
所述图片管理界面支持图片删除和重新编辑的功能。当用户点击所述图片管理界面中的删除按钮(可以每个图片对应一个删除按钮)时，响应于点击删除按钮区域的点击事件，通知服务器删除对应图片并刷新图片列表。
当用户点击所述列表中的某一个图片时，响应于点击图片区域触发的点击事件，在所述主画布中重新绘制该图片，供用户进行重新编辑(相当于返回所述步骤S300，重新跳转到图片编辑页，进行再编辑)。具体地，首先清空主画布现有内容，然后执行图片编辑页内容绘制，包括指定区域(例如中央区域)图片内容的显示(根据服务器保存的默认配置或是用户已编辑的配置)，提供历史编辑操作按钮等。
值得注意的是，现有canvas截图技术仅有截取功能，而不能对截取区域的内容进行编辑、保存、重新编辑等操作。而本实施例提出的截图处理方法，在Canvas技术的基础上进行改进，通过主画布中的图片编辑页及用于绘制截取区域数据的子画布，用户可以在主画布内制作任何所需的图片，并且可以通过子画布对该图片进行局部截图。另外，针对业界常用方案中很多情况下没有线上实时对保存的图片提供列表查看、编辑和删除的功能的情况，本实施例可以显示用户保存的全部图片，并可以提供删除和重新编辑图片的功能。也就是说，本实施例可以在支持HTML语言的所有平台上实现对图片资源的截取、保存、上传，并对上传的历史截图进行实时查看、再编辑和删除，有效提升截图方案的可用性及用户操作的便利性。
实施例三
如图4所示，为本申请第三实施例提出一种电子装置20的硬件架构示意图。本实施例中，所述电子装置20可包括，但不仅限于，可通过***总线相互通信连接的存储器21、处理器22、网络接口23。需要指出的是，图4仅示出了具有组件21-23的电子装置20，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。在本实施例中，所述电子装置20可以是所述客户端2。
所述存储器21至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器21可以是所述电子装置20的内部存储单元，例如该电子装置20的硬盘或内存。在另一些实施例中，所述存储器21也可以是所述电子装置20的外部存储设备，例如该电子装置20上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，所述存储器21还可以既包括所述电子装置20的内部存储单元也包括其外部存储设备。本实施例中，所述存储器21通常用于存储安装于所述电子装置20的操作***和各类应用软件，例如截图处理***60的程序代码等。此外，所述存储器21还可以用于暂时地存储已经输出或者将要输出的各类数据。
所述处理器22在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器22通常用于控制所述电子装置20的总体操作。本实施例中，所述处理器22用于运行所述存储器21中存储的程序代码或者处理数据，例如运行所述截图处理***60等。
所述网络接口23可包括无线网络接口或有线网络接口，该网络接口23通常用于在所述电子装置20与其他电子设备之间建立通信连接。
实施例四
如图5所示，为本申请第四实施例提出一种截图处理***60的模块示意图。所述截图处理***60可以被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本申请实施例。本申请实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，以下描述将具体介绍本实施例各程序模块的功能。
在本实施例中，所述截图处理***60包括：
编辑模块600，用于创建主画布，在所述主画布中展示图片编辑页，编辑待截取图片。
在本实施例中，主要采用Canvas技术来实现截图功能。所述主画布用于展示图片编辑页，供用户加载任意图片或一组图片配置，并对该图片进行上色等编辑操作。
以一个在游戏中对角色图片进行上色的场景为例，用户账号登录成功后,创建主画布，进入游戏界面。在主画布中，绘制需要截取(裁剪)的图片spr_content对象。用户可以加载任意图片进行摆放，或是根据指定的角色样式加载一组图片配置，并根据该配置将相应图片绘制到指定位置，例如角色的手、脚、头部、身体躯干等。也就是说，在主画布中的某一区域(例如中央)根据服务器保存的某一个默认配置，绘制出角色。然后，通过特定的图片编辑方案、图片缩放、图片替换等操作进行编辑，在图片编辑完毕后，点击保存按钮进行保存。
所述特定的图片编辑方案可以是一种对绘制到主画布内的多张图片进行上色的技术，包括调色功能(提供色值、饱和度、亮度三个滑动条，用户通过滑动操作调出想要的颜色，还可以提供调制颜色预览区域)、图片选择的功能(可以选择主画布内某一张图片进行上色)、历史编辑操作记录功能(通过相应按钮可以进行回退、重做、清空、完成等操作)等。
获取模块602，用于获取所述主画布中截取区域的数据。
首先获取主画布的context，然后确定所述主画布中待截取图片的截取区域，并获取所述截取区域的数据。在本实施例中，可以通过spr_content的坐标和宽高确定所述截取区域(例如角色区域)，并通过mainCanvs.getImageData方法获取所述主画布中对应区域的数据(例如裁剪角色此部分位置的像素数据)。
在其他实施例中，还可以通过接收用户的截取操作(监听用户在截取操作时的鼠标点击按下事件、鼠标移动事件和鼠标松手事件)等方式来确定所述截取区域，在此不做限制。
截图模块604，用于创建子画布，将所述待截取区域的数据绘制到所述子画布中，并从所述子画布中获得预定格式的图片数据。
在本实施例中，首先根据所述截取区域的大小创建子画布，例如根据spr_content的宽高创建相应大小的所述子画布。然后将所述截取区域的数据绘制到所述子画布中，再通过childCanvs.toDataURL('image/png',1)方法，获得base64格式的图片数据。
上传模块606，用于上传所述图片数据到服务器中，以保存截取后的图片，并在数据库中生成图片链接记录。
在本实施例中，当客户端上传所述图片数据后，所述截取后的图片在所述服务器中保存为png格式，并生成相应的图片链接记录，保存到数据库中。如果未保存成功，则提示用户稍后再试。所述图片链接记录可以包括多条图片链接。通过所述图片链接记录，后续可以在客户端图片管理界面中获取到该链接指向的图片，并绘制到图片管理界面中。
实施例五
如图6所示，为本申请第五实施例提出一种截图处理***60的模块示意图。在本实施例中，所述截图处理***60除了包括第四实施例中的所述编辑模块600、获取模块602、截图模块604、上传模块606之外，还包括管理模块608、执行模块610。
所述管理模块608，用于提供图片管理页面，展示所保存的截取后的图片列表。
服务器对所述截取后的图片保存成功后，可以返回数据(例如所述图片链接记录)给客户端。客户端提供图片管理页面，根据所述图片链接记录获取各个链接指向的图片，并绘制到所述图片管理界面中，以展示用户所保存的截取后的图片列表，用于给用户浏览，实现对截取区域的内容的保存和历史截取内容的列表查看。
所述图片管理界面基于HTML的技术进行绘制，界面中包括用户所保存的所述截取后的图片以及删除按钮等。在本实施例中，当用户点击所述主画布中的作品按钮时，即可通过响应点击作品按钮区域的点击事件触发操作，跳转到所述图片管理页面。在其他实施例中，也可采用其他任意可行的方式实现跳转，在此不再赘述。
所述执行模块610，用于响应于用户在所述图片管理页面的操作，对所述截取后的图片进行删除或重新编辑。
所述图片管理界面支持图片删除和重新编辑的功能。当用户点击所述图片管理界面中的删除按钮(可以每个图片对应一个删除按钮)时，响应于点击删除按钮区域的点击事件，通知服务器删除对应图片并刷新图片列表。
当用户点击所述列表中的某一个图片时，响应于点击图片区域触发的点击事件，在所述主画布中重新绘制该图片，供用户进行重新编辑。具体地，首先清空主画布现有内容，然后执行图片编辑页内容绘制，包括指定区域(例如中央区域)图片内容的显示(根据服务器保存的默认配置或是用户已编辑的配置)，提供历史编辑操作按钮等。
实施例六
本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有截图处理程序，所述截图处理程序可被至少一个处理器执行，以使所述至少一个处理器执行如上述的截图处理方法的步骤。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
显然，本领域的技术人员应该明白，上述的本申请实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请实施例不限制于任何特定的硬件和软件结合。
以上仅为本申请实施例的优选实施例，并非因此限制本申请实施例的专利范围，凡是利用本申请实施例说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请实施例的专利保护范围内。
Claims (12)
1.一种截图处理方法，其特征在于，所述方法包括：
创建主画布，在所述主画布中展示图片编辑页，编辑待截取图片；
获取所述主画布中截取区域的数据；
创建子画布，将所述截取区域的数据绘制到所述子画布中，并从所述子画布中获得预定格式的图片数据；
上传所述图片数据到服务器中，以保存截取后的图片，并在数据库中生成图片链接记录。
2.根据权利要求1所述的截图处理方法，其特征在于，所述方法还包括：
提供图片管理页面，根据所述图片链接记录展示所保存的所述截取后的图片列表。
3.根据权利要求2所述的截图处理方法，其特征在于，所述方法还包括：
响应于用户在所述图片管理页面的操作，对所述截取后的图片进行删除或重新编辑。
4.根据权利要求1至3任一项所述的截图处理方法，其特征在于，所述编辑待截取图片包括：
在所述主画布中加载任意图片进行摆放，或加载一组图片配置并根据所述配置将相应图片绘制到指定位置，对所述图片进行编辑操作并保存。
5.根据权利要求4所述的截图处理方法，其特征在于，所述编辑操作包括图片上色、图片缩放、图片替换。
6.根据权利要求1至5任一项所述的截图处理方法，其特征在于，所述获取所述主画布中截取区域的数据包括：
获取所述主画布的上下文信息；
确定所述主画布中所述待截取图片的截取区域；
获取所述截取区域的数据。
7.根据权利要求1至6任一项所述的截图处理方法，其特征在于，所述创建子画布包括：
根据所述截取区域的大小，创建相应大小的所述子画布。
8.根据权利要求3至7任一项所述的截图处理方法，其特征在于，所述响应于用户在所述图片管理页面的操作，对所述截取后的图片进行删除或重新编辑包括：
当用户点击所述图片管理界面中的删除按钮时，响应于点击删除按钮区域的点击事件，通知所述服务器删除对应的所述截取后的图片并刷新所述截取后的图片列表。
9.根据权利要求3至8任一项所述的截图处理方法，其特征在于，所述响应于用户在所述图片管理页面的操作，对所述截取后的图片进行删除或重新编辑还包括：
当用户点击所述截取后的图片列表中的一个图片时，响应于点击图片区域触发的点击事件，在所述主画布中重新绘制所述图片，供用户进行重新编辑。
10.一种截图处理***，其特征在于，所述***包括：
编辑模块，用于创建主画布，在所述主画布中展示图片编辑页，编辑待截取图片；
获取模块，用于获取所述主画布中截取区域的数据；
截图模块，用于创建子画布，将所述截取区域的数据绘制到所述子画布中，并从所述子画布中获得预定格式的图片数据；
上传模块，用于上传所述图片数据到服务器中，以保存截取后的图片，并在数据库中生成图片链接记录。
11.一种电子装置，其特征在于，所述电子装置包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的截图处理程序，所述截图处理程序被所述处理器执行时实现如权利要求1至9中任一项所述的截图处理方法。
12.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有截图处理程序，所述截图处理程序被处理器执行时实现如权利要求1至9中任一项所述的截图处理方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210383661.1A CN114880611A (zh) | 2022-04-12 | 2022-04-12 | 截图处理方法及*** |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210383661.1A CN114880611A (zh) | 2022-04-12 | 2022-04-12 | 截图处理方法及*** |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114880611A true CN114880611A (zh) | 2022-08-09 |
Family
ID=82669466
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210383661.1A Pending CN114880611A (zh) | 2022-04-12 | 2022-04-12 | 截图处理方法及*** |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114880611A (zh) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| GB201003948D0 (en) * | 2010-03-10 | 2010-04-21 | Habgood Mark A | Digital image management and distribution system |
| WO2016093595A1 (ko) * | 2014-12-11 | 2016-06-16 | 대한민국(관리부서:행정자치부 국립과학수사연구원장) | 사진이 구비된 보고서 작성 시스템 및 그 프로그램을 기록한 컴퓨터로 판독 가능한 기록매체 |
| KR20170104886A (ko) * | 2016-03-08 | 2017-09-18 | (주)일더하기일 | 캡쳐 방법 및 캡쳐 프로그램이 기록된 컴퓨터 판독가능한 기록 매체 |
| US20190147026A1 (en) * | 2017-05-16 | 2019-05-16 | Apple Inc. | Device, Method, and Graphical User Interface for Editing Screenshot Images |
| CN110647695A (zh) * | 2019-08-12 | 2020-01-03 | 深圳点猫科技有限公司 | 网页页面数据转换成图片附件的方法与装置 |
| CN112215923A (zh) * | 2020-10-23 | 2021-01-12 | 北京高途云集教育科技有限公司 | 一种图片生成方法、装置、电子设备及存储介质 |
| CN112825020A (zh) * | 2019-11-20 | 2021-05-21 | 浙江大搜车软件技术有限公司 | 图片生成方法、装置、计算机设备和存储介质 |
| US20210256199A1 (en) * | 2020-09-28 | 2021-08-19 | Beijing Baidu Netcom Science And Technology Co., Ltd. | Display verification method and apparatus for browser |
-
2022
- 2022-04-12 CN CN202210383661.1A patent/CN114880611A/zh active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| GB201003948D0 (en) * | 2010-03-10 | 2010-04-21 | Habgood Mark A | Digital image management and distribution system |
| WO2016093595A1 (ko) * | 2014-12-11 | 2016-06-16 | 대한민국(관리부서:행정자치부 국립과학수사연구원장) | 사진이 구비된 보고서 작성 시스템 및 그 프로그램을 기록한 컴퓨터로 판독 가능한 기록매체 |
| KR20170104886A (ko) * | 2016-03-08 | 2017-09-18 | (주)일더하기일 | 캡쳐 방법 및 캡쳐 프로그램이 기록된 컴퓨터 판독가능한 기록 매체 |
| US20190147026A1 (en) * | 2017-05-16 | 2019-05-16 | Apple Inc. | Device, Method, and Graphical User Interface for Editing Screenshot Images |
| CN110647695A (zh) * | 2019-08-12 | 2020-01-03 | 深圳点猫科技有限公司 | 网页页面数据转换成图片附件的方法与装置 |
| CN112825020A (zh) * | 2019-11-20 | 2021-05-21 | 浙江大搜车软件技术有限公司 | 图片生成方法、装置、计算机设备和存储介质 |
| US20210256199A1 (en) * | 2020-09-28 | 2021-08-19 | Beijing Baidu Netcom Science And Technology Co., Ltd. | Display verification method and apparatus for browser |
| CN112215923A (zh) * | 2020-10-23 | 2021-01-12 | 北京高途云集教育科技有限公司 | 一种图片生成方法、装置、电子设备及存储介质 |
Non-Patent Citations (2)
| Title |
|---|
| 刘耀钦;: "HTML5 Canvas绘图技术及其在图像裁剪中的应用研究", 洛阳师范学院学报, no. 11, 30 November 2016 (2016-11-30), pages 3 * |
| 张翼;: "基于HTML5的移动端图片压缩上传方法研究", 电子技术与软件工程, no. 08, 15 April 2015 (2015-04-15) * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110244984B (zh) | 应用程序处理方法、装置、存储介质和计算机设备 | |
| CN112817817B (zh) | 埋点信息查询方法、装置、计算机设备和存储介质 | |
| CN112381907B (zh) | 多媒体轨道绘制方法和*** | |
| CN111596911B (zh) | 生成控件的方法、装置、计算机设备和存储介质 | |
| CN112861050B (zh) | 页面数据回溯方法、装置及设备 | |
| US20230393869A1 (en) | Methods and systems for content generation via templates with rules and/or triggers | |
| CN112800370A (zh) | 业务单据的处理方法、装置、计算机设备和存储介质 | |
| CN108647348A (zh) | 文本展示方法、装置、设备及存储介质 | |
| CN113379865B (zh) | 目标对象的绘制方法和*** | |
| CN106953924B (zh) | 一种共享信息的处理方法及共享客户端 | |
| CN115098098A (zh) | 页面生成方法、页面展示方法及装置 | |
| CN110750664A (zh) | 图片的显示方法及装置 | |
| CN111125153A (zh) | 对象管理方法、装置、客户端及介质 | |
| CN116466935A (zh) | 模板处理方法、装置、计算机设备和存储介质 | |
| CN110598026B (zh) | 图片列表的显示方法、装置及终端设备 | |
| CN113220381A (zh) | 一种点击数据展示方法和装置 | |
| CN114880611A (zh) | 截图处理方法及*** | |
| US11843679B2 (en) | Automated dependency management based on page components | |
| CN115170695A (zh) | 图表图片的生成方法、装置、电子设备和存储介质 | |
| CN115170700A (zh) | 基于Flutter框架实现CSS动画的方法、计算机设备及存储介质 | |
| CN113973235A (zh) | 互动信息显示方法、装置、计算机设备 | |
| CN112463280B (zh) | 图像生成方法、装置、电子设备及计算机可读存储介质 | |
| CN112508774B (zh) | 图像的处理方法及装置 | |
| CN116049581A (zh) | 页面截图处理方法、装置、计算机设备和存储介质 | |
| US20150177921A1 (en) | Automatic environment restoration for a particular artwork |
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 |