CN112802157B - 图片编辑方法、装置、电子设备和存储介质 - Google Patents
图片编辑方法、装置、电子设备和存储介质 Download PDFInfo
- Publication number
- CN112802157B CN112802157B CN202110102727.0A CN202110102727A CN112802157B CN 112802157 B CN112802157 B CN 112802157B CN 202110102727 A CN202110102727 A CN 202110102727A CN 112802157 B CN112802157 B CN 112802157B
- Authority
- CN
- China
- Prior art keywords
- picture
- target
- target picture
- target object
- browser
- 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
- 238000000034 method Methods 0.000 title claims abstract description 60
- 230000004044 response Effects 0.000 claims description 22
- 230000008569 process Effects 0.000 claims description 11
- 238000010586 diagram Methods 0.000 description 8
- 230000000763 evoking effect Effects 0.000 description 7
- 230000006870 function Effects 0.000 description 7
- 230000000694 effects Effects 0.000 description 5
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000008707 rearrangement Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- 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
- 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
-
- 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/0485—Scrolling or panning
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/001—Texturing; Colouring; Generation of texture or colour
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
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)
- Processing Or Creating Images (AREA)
Abstract
本发明实施例公开了一种图片编辑方法、装置、电子设备和存储介质。其中,所述方法包括:获取目标对象上传至浏览器中的目标图片;响应于目标对象对所述目标图片的图像处理指令,对所述目标图片进行处理;将处理后的目标图片在所述浏览器中进行展示。以实现快速、精确的对图片进行编辑,满足用户的个性化需求的效果。
Description
技术领域
本发明实施例涉及计算机技术,尤其涉及一种图片编辑方法、装置、电子设备和存储介质。
背景技术
用户在浏览器中上传图片后,有时需要对图片进行调整,例如,在某些考试的报名步骤中,需要报名者上传照片,考试的报名对照片的格式、大小等均有特定的要求,因此,需要报名者对上传的图片进行一定的调整。
当用户想对浏览器网页上的某一图片进行修改时,需要先将网页上的图片下载到本地,然后使用图片编辑工具对图片进行编辑,完成编辑后再将该编辑好的图片上传到浏览器,然后浏览器能够展示出用户编辑后的图片。
上述图片的编辑方式需要用户进行一系列繁琐的操作才能够实现对浏览器网页上的图片进行编辑,图片编辑效率低下。
发明内容
本发明实施例提供一种图片编辑方法、装置、电子设备和存储介质,以实现快速、精确的对图片进行编辑,满足用户的个性化需求的效果。
第一方面,本发明实施例提供了一种图片编辑方法,该方法包括:
获取目标对象上传至浏览器中的目标图片;
响应于目标对象对所述目标图片的图像处理指令,对所述目标图片进行处理;
将处理后的目标图片在所述浏览器中进行展示。
第二方面,本发明实施例还提供了一种图片编辑装置,该装置包括:
目标图片获取模块,用于获取目标对象上传至浏览器中的目标图片;
图片处理模块,用于响应于目标对象对所述目标图片的图像处理指令,对所述目标图片进行处理;
图片展示模块,用于将处理后的目标图片在所述浏览器中进行展示。
第三方面,本发明实施例还提供了一种电子设备,该电子设备包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序;
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现本发明实施例中任一所述的图片编辑方法。
第四方面,本发明实施例还提供了一种包含计算机可执行指令的存储介质,所述计算机可执行指令在由计算机处理器执行时用于执行本发明实施例中任一所述的图片编辑方法。
本发明实施例的技术方案,通过获取目标对象上传至浏览器中的目标图片,响应于目标对象对目标图片的图像处理指令,基于该图像处理指令对目标图片进行处理,以实现对目标图片进行编辑的目的,这样实现了用户可在网页上对图片进行快速、精确的处理的目的。同时可根据用户的需求来对目标图片进行处理,以得到用户所需的图片,满足了用户的个性化需求。对目标图片进行处理后,还可将处理后的目标图片展示在浏览器中,这样以便目标对象可直观的看到对目标图片进行处理后的效果。
附图说明
图1是本发明实施例一中的图片编辑方法的流程图;
图2是本发明实施例二中的图片编辑方法的流程图;
图3是本发明实施例二中的对原始图片进行布局处理的示意图;
图4是本发明实施例三中的图片编辑方法的流程图;
图5是本发明实施例三中的裁剪框区域的生成示意图;
图6是本发明实施例三中的裁剪框区域的调整示意图;
图7是本发明实施例四中的图片编辑方法的流程图;
图8是本发明实施例五中的图片编辑装置的结构示意图;
图9是本发明实施例六中的一种电子设备的结构示意图。
具体实施方式
下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释本发明,而非对本发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与本发明相关的部分而非全部结构。
实施例一
图1为本发明实施例一提供的图片编辑方法的流程图,本实施例可适用于在浏览器中对上传的图片进行编辑的情况,该方法可以由图片编辑装置来执行,该图片编辑装置可以由软件和/或硬件来实现,该图片编辑装置可以配置在电子计算设备上,具体包括如下步骤:
S110、获取目标对象上传至浏览器中的目标图片。
示例性的,目标对象可以是给浏览器中上传目标图片的对象,例如可以是人。
目标图片可以是浏览器端接收到的,用于后续进行编辑的图片。
S120、响应于目标对象对目标图片的图像处理指令,对目标图片进行处理。
示例性的,图像处理指令可以是基于目标对象对目标图片进行编辑处理的操作而生成的指令。
根据响应的目标对象对目标图片的图像处理指令,可对目标图片进行对应的处理,以实现对目标图片进行编辑的目的,这样实现了用户可在网页上对图片进行快速、精确的处理的目的。同时可根据用户的需求来对目标图片进行处理,以得到用户所需的图片,满足了用户的个性化需求。
需要说明的是,在对目标图片进行处理的过程中,目标对象可在浏览器中看到整个的操作过程,实现了可视化的去处理目标图片的目的。
S130、将处理后的目标图片在浏览器中进行展示。
示例性的,当对目标图片进行处理后,可得到处理后的目标图片,进而可将处理后的目标图片在浏览器中进行展示,这样以便目标对象可直观的看到对目标图片进行处理后的效果。
本发明实施例的技术方案,通过获取目标对象上传至浏览器中的目标图片,响应于目标对象对目标图片的图像处理指令,基于该图像处理指令对目标图片进行处理,以实现对目标图片进行编辑的目的,这样实现了用户可在网页上对图片进行快速、精确的处理的目的。同时可根据用户的需求来对目标图片进行处理,以得到用户所需的图片,满足了用户的个性化需求。对目标图片进行处理后,还可将处理后的目标图片展示在浏览器中,这样以便目标对象可直观的看到对目标图片进行处理后的效果。
实施例二
图2为本发明实施例二提供的图片编辑方法的流程图,本发明实施例与上述实施例中各个可选方案可以结合。在本发明实施例中,可选的,所述获取目标对象上传至浏览器中的目标图片,包括:获取目标对象上传至浏览器中的原始图片;基于浏览器中对图片的格式要求,对原始图像进行布局处理,得到目标图片。
如图2所示,本发明实施例的方法具体包括如下步骤:
S210、获取目标对象上传至浏览器中的原始图片,基于浏览器中对图片的格式要求,对原始图像进行布局处理,得到目标图片。
示例性的,原始图片可以是目标对象上传至浏览器中的初始图片。
具体的可以是,以一个报名操作为例,目标对象为进行报名的人,在报名中,需要目标对象上传自己的照片,则目标对象将自己的照片上传至浏览器中,此时,目标对象上传的照片即为原始图片。
在实际操作过程中,浏览器对目标对象上传的原始图片会有格式上的要求,例如,以报名操作为例,目标对象为进行报名的人,目标对象将自己的照片上传至浏览器中用于放置照片的方框中,该方框具有一定的尺寸,则浏览器后端会根据浏览器对图片的格式要求(具体的可以是尺寸要求),对目标对象上传的原始图片进行布局处理,以时原始图片可放入到用于放置照片的方框中。这里的放入到用于放置照片的方框中的照片即为目标图片。
具体的,以格式要求为尺寸要求为例。参考图3所述的对原始图片进行布局处理的示意图,图3中的方框A为浏览器中用于放置图片的框。当目标对象将原始图片上传至浏览器中时,如图3中的(a)图中照片为目标对象上传的原始图片。若浏览器有对上传的图片的格式具有要求,则需对原始图片进行布局处理,以得到目标图片,该目标图片为满足浏览器的格式要求的图片。
具体的对原始图片进行布局处理,可以有如下两种方式:
(1)利用关键字对原始图片进行布局处理
具体的利用关键字的方式对原始图片进行布局处理,有如下两种方式:
A、利用克制功能的关键字对原始图片进行布局处理
在本发明是实施例中,克制功能的关键字可以是表示将原始图片进行克制的关键字,例如可以是“contain”。
在本发明实施例中,利用关键字“contain”对原始图片进行布局处理的具体方式是:将原始图片限制在浏览器中用于放置图片的框中(即方框A),取原始图片中的宽和高中长度较短的一个边,利用长度较短的一个边对另一个边进行处理。
具体的如图3(a)中的原始图片,若该原始图片中的宽为200px,高为300px,则取原始图片的宽和高中长度较短的一个边,即原始图片的宽,则利用原始图片的宽,将原始图片的高的长度也调整为200px,得到如图3中的(b)所示的结果。
B、利用铺满功能的关键字对原始图片进行布局处理
在本发明是实施例中,铺满功能的关键字可以是表示将原始图片铺满在浏览器中放置图片的方框中的关键字,例如可以是“cover”。
在本发明实施例中,利用关键字“cover”对原始图片进行布局处理的具体方式是:将原始图片铺满在浏览器中用于放置图片的框中(即方框A),即根据浏览器中用于放置图片的方框的大小,将原始图片铺满整个放置图片的方框。
具体的如图3(a)中的原始图片,若该原始图片中的宽为200px,高为300px,浏览器中用于放置图片的方框的大小是:宽为320px,高为410px。则根据该浏览器中用于放置图片的方框的大小,将原始图片调整至宽为320px,高为410px,以使调整后的原始图片可铺满整个用于放置图片的方框,即得到如图3中的(c) 所示的结果。
需要说明的是,在本发明实施例中,当利用关键字来对原始图片进行布局处理时,首先需要一个可输入关键字的输入框,然后目标对象可在该输入框中输入目标对象所要输入的关键字,进而响应目标对象输入的关键字,对原始图片进行对应的布局处理。
这里的输入关键字的输入框的唤起方式可以如下:
当将原始图片上传至浏览器中后,可响应于目标对象对原始图片的触发操作,该触发操作用于唤起输入关键字的输入框。例如可以是用户通过鼠标点击原始图片,以唤起输入关键字的输入框。
此外,还可以是通过语音方式唤起输入关键字的输入框。具体的可以是目标对象输入与可唤起输入关键字的输入框对应的语音信息,基于该语音信息,唤起输入关键字的输入框。
还可以是通过手势的方式唤起输入关键字的输入框。具体的可以是目标对象在浏览器的显示界面上做出与唤起输入关键字的输入框对应的手势,基于该手势,唤起输入关键字的输入框。
需要说明的是,上述唤起输入关键字的输入框的方式只是部分示例,用户可根据需求自行选取,这里不做限定。同时上述示例并不代表全部示例,任何其他可唤起输入关键字的输入框的方式,均属于本发明实施例的保护范围。
(2)利用预设尺寸值对原始图片进行布局处理
在本发明实施例中,除了上述的可利用关键字来对原始图片进行布局处理外,还可以是利用输入预设尺寸值的方式对原始图片进行布局处理。具体的有如下两种方式:
A、输入的预设尺寸值仅有一个数值
当在可输入预设尺寸值的输入框中输入一个预设尺寸值时,则可将该预设尺寸值作为原始图片的一个边的长度,另一个边的长度值设置为默认值。
具体的例如,如图3(a)中的原始图片,若该原始图片中的宽为200px,高为300px,在可输入预设尺寸值的输入框中输入了一个预设尺寸值,例如 120px,则可将120px作为对原始图片的一个边的长度进行调整的值,例如可以是将120px作为原始图片的宽的值,即将原始图片的宽由原来的200px更改为 120px,原始图片的高设置为默认值,例如可以是250px。
在本发明实施例中,在将预设尺寸值作为原始图片的一个边的长度,另一个边的长度值设置为默认值之外,还可以是预设尺寸值作为原始图片的一个边的长度,另一个边的长度值保持原始图片的长度值不变。
具体的例如,继续上述示例,还可以是将原始图片的宽由原来的200px更改为120px,原始图片的高还维持其长度值不变,即还维持300px。
通过上述方式,可实现对原始图片的布局处理,得到目标图片,即可得到如图3中的(d)图所示的结果。
B、输入的预设尺寸值有两个数值
当在可输入预设尺寸值的输入框中输入两个预设尺寸值时,则可将其中一个预设尺寸值作为原始图片的一个边的长度,另一个预设尺寸值作为原始图片的另一个边的长度值。
具体的例如,如图3(a)中的原始图片,若该原始图片中的宽为200px,高为300px,在可输入预设尺寸值的输入框中输入了两个预设尺寸值,例如 120px和200px,则可将120px作为对原始图片的一个边的长度进行调整的值,将200px作为对原始图片的另一边的长度进行调整的值。例如可以是将120px 作为原始图片的宽的值,将200px作为原始图片的高的值。即将原始图片的宽由原来的200px更改为120px,原始图片的高由原来的300px更改为200px。即得到如图3中的(e)图所示的结果。
需要说明的是,在本发明实施例中,当利用预设尺寸值来对原始图片进行布局处理时,首先需要一个可输入预设尺寸值的输入框,然后目标对象可在该输入框中输入目标对象所要输入的预设尺寸值,进而响应目标对象输入的预设尺寸值,对原始图片进行对应的布局处理。
这里的输入预设尺寸值的输入框的唤起方式可以如下:
当将原始图片上传至浏览器中后,可响应于目标对象对原始图片的触发操作,该触发操作用于唤起输入预设尺寸值的输入框。例如可以是用户通过鼠标点击原始图片,以唤起输入预设尺寸值的输入框。
此外,还可以是通过语音方式唤起输入预设尺寸值的输入框。具体的可以是目标对象输入与可唤起输入预设尺寸值的输入框对应的语音信息,基于该语音信息,唤起输入预设尺寸值的输入框。
还可以是通过手势的方式唤起输入预设尺寸值的输入框。具体的可以是目标对象在浏览器的显示界面上做出与唤起输入预设尺寸值的输入框对应的手势,基于该手势,唤起输入预设尺寸值的输入框。
需要说明的是,上述唤起输入预设尺寸值的输入框的方式只是部分示例,用户可根据需求自行选取,这里不做限定。同时上述示例并不代表全部示例,任何其他可唤起输入预设尺寸值的输入框的方式,均属于本发明实施例的保护范围。
根据浏览器对上传的图片的格式要求,对目标对象上传的原始图片进行布局处理,得到目标图片,这样设置的好处在于,可以对目标对象上传的原始图片进行布局处理,实现将目标图片在浏览器所提供的容器中进行展示,以得到浏览器所可接受的格式的图片,避免因为图片的格式不满足浏览器的规定,而无法进行后续的编辑过程。
S220、响应于目标对象对目标图片的图像处理指令,对目标图片进行处理。
S230、将处理后的目标图片在浏览器中进行展示。
本发明实施例的技术方案,通过根据浏览器对上传的图片的格式要求,对目标对象上传的原始图片进行布局处理,得到目标图片,这样可以对目标对象上传的原始图片进行布局处理,实现将目标图片在浏览器所提供的容器中进行展示,以得到浏览器所可接受的格式的图片,避免因为图片的格式不满足浏览器的规定,而无法进行后续的编辑过程。
实施例三
图4为本发明实施例三提供的图片编辑方法的流程图,本发明实施例与上述实施例中各个可选方案可以结合。在本发明实施例中,可选的,图像处理指令可以包括:裁剪指令。对应的,所述响应于目标对象对目标图片的图像处理指令,对目标图片进行处理,包括:响应于目标对象对目标图片的裁剪指令,对目标图片进行裁剪。
如图4所示,本发明实施例的方法具体包括如下步骤:
S310、获取目标对象上传至浏览器中的原始图片,基于浏览器中对图片的格式要求,对原始图像进行布局处理,得到目标图片。
S320、响应于目标对象对目标图片的裁剪指令,对目标图片进行裁剪。
示例性的,当图像处理指令为裁剪指令时,可响应于目标对象对目标图片的裁剪指令,以基于该裁剪指令对目标图片进行裁剪。
可选的,所述对目标图片进行裁剪,包括:基于裁剪指令,响应于对目标图片进行裁剪的裁剪框区域的生成指令,生成裁剪框区域;基于裁剪框区域,对目标图片进行裁剪。
示例性的,裁剪框区域可以是对目标图片进行裁剪的区域,即所要裁剪的目标图片的区域。
根据裁剪指令,响应于对目标图片进行裁剪的裁剪框区域的生成指令,可生成裁剪框区域,根据该裁剪框区域,可对目标图片进行裁剪。
具体的参考图5所述的裁剪框区域的生成示意图,图5中的最外面的框(方框M)为浏览器的显示界面的区域,中间的框(方框N)为目标图片的大小,最里面的框(方框Q)为构建的裁剪框区域。
生成裁剪框区域后,基于该裁剪框区域,对目标图片进行裁剪可以是:只保留裁剪框区域内的目标图片,将裁剪框区域外的目标图片进行消除。
在本发明实施例中,生成裁剪框区域具体的可以是响应于目标对象对目标图片进行裁剪的裁剪框区域的生成指令,基于该生成指令,生成裁剪框区域。更进一步的可以是根据目标对象对目标图片的触发操作,可生成对目标图片进行裁剪的裁剪框区域的生成指令,基于该对目标图片进行裁剪的裁剪框区域的生成指令,可生成裁剪框区域。
可选的,所述响应于对目标图片进行裁剪的裁剪框区域的生成指令,包括下述操作中的至少一项:响应于目标对象通过鼠标在目标图片上拖拽出的对目标图片进行裁剪的裁剪框区域的操作;响应于目标对象输入的对目标图片进行裁剪的裁剪框区域的坐标值。
示例性的,可通过响应目标对象通过鼠标在目标图片上拖拽出的对目标图片进行裁剪的裁剪框区域的操作,来生成对目标图片进行裁剪的裁剪框区域的生成指令。
具体的可以是:目标对象利用鼠标在目标图片上进行拖动,拖动出目标对象所需大小的方框,根据目标对象的上述操作,可生成对目标图片进行裁剪的裁剪框区域的生成指令,基于该对目标图片进行裁剪的裁剪框区域的生成指令,可生成裁剪框区域。
如图5所示,裁剪框区域的H边为鼠标垂直移动的距离,裁剪框区域的J 边为鼠标水平移动的距离。
除了上述通过鼠标在目标图片上拖拽出的对目标图片进行裁剪的裁剪框区域的操作外,还可以响应于目标对象输入的对目标图片进行裁剪的裁剪框区域的坐标值。
具体的可以是目标对象可在对目标图片进行裁剪的输入框中输入裁剪框区域的坐标值,根据目标对象输入的裁剪框区域的坐标值,可生成与输入的坐标值对应的裁剪框区域。
需要说明的是,上述通过鼠标在目标图片上进行拖动,以及输入的对目标图片进行裁剪的裁剪框区域的坐标值,来生成裁剪框区域,只是本发明实施例中生成裁剪框区域两个示例。当然还可以有其他示例,例如可以通过语音的方式(例如可以是目标对象输入一段形如“生成一个长为3里米,宽为2厘米的方框”)、手势的方式(例如可以是目标对象利用手势在垂直方向上的移动2 厘米,在水平方向上移动3厘米)等生成裁剪框区域。具体的生成裁剪框区域的方式这里不做限定,可根据用户需求自行选取。
同样的上述通过鼠标在目标图片上进行拖动,以及输入的对目标图片进行裁剪的裁剪框区域的坐标值,来生成裁剪框区域,只是本发明实施例中生成裁剪框区域两个示例,任何可生成裁剪框区域的方式均属于本发明实施例的保护范围。
在本发明实施例中,上述图5中的裁剪框区域为方形,在另一实施例中,该裁剪框区域还可以是其他形状,例如可以是圆形、星形等。具体的生成的裁剪框区域的形状可根据用户需求自行设置,这里不做限定。极大满足了用户的个性化需求。
在本发明实施例中,在生成对目标图片进行裁剪的裁剪框区域后,还可以根据目标对象(用户)的需求,对生成的裁剪框区域进行调整。
具体的可以是,参考图6所述的裁剪框区域的调整示意图,图6中,方框 N为目标图片的大小,方框Q为裁剪框区域。这里的裁剪框区域的形状为方形为例进行说明。对于生成的裁剪框区域,该裁剪框区域的四个顶点,以及四个边均可拖动。如图6所示,可在裁剪框区域上设置可拉伸的控制点,图6中共有8个控制点,通过这8点可对裁剪框区域进行调整。
具体的通过图6中的8个控制点对裁剪框区域进行调整可以是:通过拉伸裁剪框区域四个顶点处的控制点,可将裁剪框区域等比例的放大或缩小。通过拉伸裁剪框区域四个边上的控制点,可将裁剪框区域对应边拉长或缩短(例如当拉裁剪框区域右边的边上的控制点时,可将裁剪框区域向右拉长)。
这样对裁剪框区域进行调整,极大满足了用户的需求,实现了用户的个性需求。
需要说明的是,在生成裁剪框区域时,可以生成多个裁剪框区域,具体的生成的裁剪框区域的数量可根据用户需求自行设置,这里不做限定。
这样通过响应于目标对象对目标图片的裁剪指令,对目标图片进行裁剪,这样设置的好处在于,可以根据目标对象的需求,对目标图片进行裁剪,裁剪成目标对象所需的图片,实现了在网页上即可对图片快速、精确的编辑的效果,满足了用户的个性化需求。
S330、将处理后的目标图片在浏览器中进行展示。
示例性的,对目标图片进行裁剪后,可将裁剪后的目标图片在浏览器中进行展示。
本发明实施例的技术方案,当图像处理指令为裁剪指令时,通过响应于目标对象对目标图片的裁剪指令,对目标图片进行裁剪,这样可以根据目标对象的需求,对目标图片进行裁剪,裁剪成目标对象所需的图片,实现了在网页上即可对图片快速、精确的编辑的效果,满足了用户的个性化需求。
实施例四
图7为本发明实施例四提供的图片编辑方法的流程图,本发明实施例与上述实施例中各个可选方案可以结合。在本发明实施例中,可选的,图像处理指令可以包括:滤镜添加指令和/或色调调整指令。对应的,所述响应于目标对象对目标图片的图像处理指令,对目标图片进行处理,包括:响应于目标对象输入的对目标图片添加滤镜的滤镜添加指令,对目标图片添加滤镜;和/或,响应于目标对象对目标图片的色调调整指令,对目标图片进行色调调整。
如图7所示,本发明实施例的方法具体包括如下步骤:
S410、获取目标对象上传至浏览器中的原始图片,基于浏览器中对图片的格式要求,对原始图像进行布局处理,得到目标图片。
S420、响应于目标对象输入的对目标图片添加滤镜的滤镜添加指令,对目标图片添加滤镜;和/或,响应于目标对象对目标图片的色调调整指令,对目标图片进行色调调整。
示例性的,滤镜添加指令可以是对目标图片添加滤镜的指令。
具体的可以是响应于目标对象输入的对目标图片进行添加滤镜的操作。例如可以是基于目标图片,目标对象双击鼠标,弹出菜单框,在该菜单框中具有“添加滤镜”的控件,目标对象点击“添加滤镜”的控件,服务器响应于上述目标对象的操作,即可实现对目标图片添加滤镜。
这样响应于目标对象输入的对目标图片添加滤镜的滤镜添加指令,对目标图片添加滤镜,这样设置的好处在于,可根据目标对象的需求,对目标图片添加滤镜,满足了目标对象的个性化需求。
色调调整指令可以是对目标图片的色调进行调整的指令。
具体的可以是响应于目标对象输入的对目标图片进行色调调整的操作。例如可以是基于目标图片,目标对象双击鼠标,弹出菜单框,在该菜单框中具有“色调调整”的控件,目标对象点击“色调调整”的控件,然后根据目标对象的需求,对目标图片的色调进行调整,服务器响应于上述目标对象的操作,即可实现对目标图片的色调的调整。
可选的,所述响应于目标对象对目标图片的色调调整指令,包括:响应于目标对象对目标图片中的各像素点的R值、G值和B值中的至少一个的调整操作;或,响应于目标对象对目标图片所对应的色调模块的滑动操作。
示例性的,当目标对象对目标图片的色调进行调整时,可对目标图片中的各像素点的R值、G值和B值中的至少一个的进行调整,服务器响应于目标对象对目标图片中的各像素点的R值、G值和B值中的至少一个的调整操作操作,即可实现对目标图片的色调的调整。
具体的例如可以是:继续上述示例,目标对象点击“色调调整”的控件后,可弹出可输入目标图片中的各像素点的R值、G值和B值中的至少一个的输入框,目标对象可在该输入框中输入目标图片中的各像素点的R值、G值和B值中的至少一个的调整数值,例如,可以输入的R值、G值和B值的值分别为: 100、90和70,则可根据输入的R值、G值和B值,调整目标图片。
在另一实施例中,还可以是输入对目标图片中的各像素点的R值、G值和B 值中的至少一个的调整权重,例如,输入的各像素点的R值、G值和B值的调整权重分别为0.5、0.3和0.4,则分别将目标图片各像素点原来的R值、G值和B值分别对应乘以上述输入的调整权重,即0.5*R,0.3*G和0.4*B,即可得到色调调整后的目标图片。
在本发明实施例中,除了通过上述响应于目标对象对目标图片中的各像素点的R值、G值和B值中的至少一个的调整操作,来调整目标图片的色调外,还可以响应于目标对象对目标图片所对应的色调模块的滑动操作,来调整目标图片的色调。
具体的可以是,继续上述示例,目标对象点击“色调调整”的控件后,可弹出一个可以滑动的滑块(色调模块),目标对象可通过对该滑块的滑动操作来调整目标图片的色调,例如该滑块可左右滑动,当目标对象将该滑块向左滑动时,目标图片的色调变弱,当目标对象将该滑块向右滑动时,目标图片的色调变深。
需要说明的是,具体的用户选取上述哪种方式来对目标图片的色调进行调整,可根据用户需求自行选取,这里不做限定。
这样通过上述两种方式即可实现对目标图片的色调的调整,满足了用户的个性化需求。
这样响应于目标对象对目标图片的色调调整指令,对目标图片的色调进行调整,这样设置的好处在于,可根据目标对象的需求,对目标图片的色调进行调整,满足了目标对象的个性化需求。
S430、将处理后的目标图片在浏览器中进行展示。
示例性的,对目标图片进行添加滤镜和/或色调调整后,可将添加滤镜后的,和/或,色调调整后的目标图片在浏览器中进行展示。
本发明实施例的技术方案,通过响应于目标对象输入的对目标图片添加滤镜的滤镜添加指令,对目标图片添加滤镜,这样可根据目标对象的需求,对目标图片添加滤镜,满足了目标对象的个性化需求。同时通过响应于目标对象对目标图片的色调调整指令,对目标图片的色调进行调整,这样可根据目标对象的需求,对目标图片的色调进行调整,满足了目标对象的个性化需求。
实施例五
图8为本发明实施例五提供的图片编辑装置的结构示意图,如图8所示,该装置包括:目标图片获取模块31、图片处理模块32和图片展示模块33。
其中,目标图片获取模块31,用于获取目标对象上传至浏览器中的目标图片;
图片处理模块32,用于响应于目标对象对所述目标图片的图像处理指令,对所述目标图片进行处理;
图片展示模块33,用于将处理后的目标图片在所述浏览器中进行展示。
可选的,所述图像处理指令包括:裁剪指令。
在本发明实施例的技术方案的基础上,图片处理模块32包括:
裁剪单元,用于响应于所述目标对象对所述目标图片的裁剪指令,对所述目标图片进行裁剪。
在本发明实施例的技术方案的基础上,裁剪单元包括:
裁剪框区域生成子单元,用于基于所述裁剪指令,响应于对所述目标图片进行裁剪的裁剪框区域的生成指令,生成裁剪框区域;
裁剪子单元,用于基于所述裁剪框区域,对所述目标图片进行裁剪。
在本发明实施例的技术方案的基础上,裁剪框区域生成子单元具体用于如下至少一项:
响应于所述目标对象通过鼠标在所述目标图片上拖拽出的对所述目标图片进行裁剪的裁剪框区域的操作,生成裁剪框区域;
响应于所述目标对象输入的对所述目标图片进行裁剪的裁剪框区域的坐标值,生成裁剪框区域。
可选的,所述图像处理指令包括:滤镜添加指令和/或色调调整指令。
在本发明实施例的技术方案的基础上,图片处理模块32还包括:
滤镜添加单元,用于响应于目标对象输入的对所述目标图片添加滤镜的滤镜添加指令,对所述目标图片添加滤镜;和/或,
色调调整单元,用于响应于目标对象对所述目标图片的色调调整指令,对所述目标图片进行色调调整。
在本发明实施例的技术方案的基础上,色调调整单元具体用于:
响应于目标对象对所述目标图片中的各像素点的R值、G值和B值中的至少一个的调整操作,对所述目标图片进行色调调整;或,
响应于目标对象对所述目标图片所对应的色调模块的滑动操作,对所述目标图片进行色调调整。
在本发明实施例的技术方案的基础上,目标图片获取模块31包括:
原始图片获取单元,用于获取目标对象上传至浏览器中的原始图片;
目标图片获取单元,用于基于所述浏览器中对图片的格式要求,对所述原始图像进行布局处理,得到所述目标图片。
本发明实施例所提供的图片编辑装置可执行本发明任意实施例所提供的图片编辑方法,具备执行方法相应的功能模块和有益效果。
实施例六
图9为本发明实施例六提供的一种电子设备的结构示意图,如图9所示,该电子设备包括处理器70、存储器71、输入装置72和输出装置73;电子设备中处理器70的数量可以是一个或多个,图9中以一个处理器70为例;电子设备中的处理器70、存储器71、输入装置72和输出装置73可以通过总线或其他方式连接,图9中以通过总线连接为例。
存储器71作为一种计算机可读存储介质,可用于存储软件程序、计算机可执行程序以及模块,如本发明实施例中的图片编辑方法对应的程序指令/模块 (例如,目标图片获取模块31、图片处理模块32和图片展示模块33)。处理器 70通过运行存储在存储器71中的软件程序、指令以及模块,从而执行电子设备的各种功能应用以及数据处理,即实现上述的图片编辑方法。
存储器71可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需的应用程序;存储数据区可存储根据终端的使用所创建的数据等。此外,存储器71可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中,存储器71可进一步包括相对于处理器70远程设置的存储器,这些远程存储器可以通过网络连接至电子设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
输入装置72可用于接收输入的数字或字符信息,以及产生与电子设备的用户设置以及功能控制有关的键信号输入。输出装置73可包括显示屏等显示设备。
实施例七
本发明实施例七还提供一种包含计算机可执行指令的存储介质,所述计算机可执行指令在由计算机处理器执行时用于执行一种图片编辑方法。
当然,本发明实施例所提供的一种包含计算机可执行指令的存储介质,其计算机可执行指令不限于如上所述的方法操作,还可以执行本发明任意实施例所提供的图片编辑方法中的相关操作。
通过以上关于实施方式的描述,所属领域的技术人员可以清楚地了解到,本发明可借助软件及必需的通用硬件来实现,当然也可以通过硬件实现,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在计算机可读存储介质中,如计算机的软盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(RandomAccess Memory,RAM)、闪存(FLASH)、硬盘或光盘等,包括若干指令用以使得一台计算机电子设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述的方法。
值得注意的是,上述图片编辑装置的实施例中,所包括的各个单元和模块只是按照功能逻辑进行划分的,但并不局限于上述的划分,只要能够实现相应的功能即可;另外,各功能单元的具体名称也只是为了便于相互区分,并不用于限制本发明的保护范围。
注意,上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解,本发明不限于这里所述的特定实施例,对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此,虽然通过以上实施例对本发明进行了较为详细的说明,但是本发明不仅仅限于以上实施例,在不脱离本发明构思的情况下,还可以包括更多其他等效实施例,而本发明的范围由所附的权利要求范围决定。
Claims (9)
1.一种图片编辑方法,其特征在于,包括:
获取目标对象上传至浏览器中的目标图片;
响应于目标对象对所述目标图片的图像处理指令,对所述目标图片进行处理;
将处理后的目标图片在所述浏览器中进行展示;
所述获取目标对象上传至浏览器中的目标图片,包括:
获取目标对象上传至浏览器中的原始图片;
基于所述浏览器中对图片的格式要求,对所述原始图像进行布局处理,得到所述目标图片;
所述对所述原始图片进行布局处理,包括:
利用关键字对所述原始图片进行布局处理;或,
利用预设尺寸值对所述原始图片进行布局处理。
2.根据权利要求1所述的方法,其特征在于,所述图像处理指令包括:裁剪指令;
所述响应于目标对象对所述目标图片的图像处理指令,对所述目标图片进行处理,包括:
响应于所述目标对象对所述目标图片的裁剪指令,对所述目标图片进行裁剪。
3.根据权利要求2所述的方法,其特征在于,所述对所述目标图片进行裁剪,包括:
基于所述裁剪指令,响应于对所述目标图片进行裁剪的裁剪框区域的生成指令,生成裁剪框区域;
基于所述裁剪框区域,对所述目标图片进行裁剪。
4.根据权利要求3所述的方法,其特征在于,所述响应于对所述目标图片进行裁剪的裁剪框区域的生成指令,包括下述操作中的至少一项:
响应于所述目标对象通过鼠标在所述目标图片上拖拽出的对所述目标图片进行裁剪的裁剪框区域的操作;
响应于所述目标对象输入的对所述目标图片进行裁剪的裁剪框区域的坐标值。
5.根据权利要求1所述的方法,其特征在于,所述图像处理指令包括:滤镜添加指令和/或色调调整指令;
所述响应于目标对象对所述目标图片的图像处理指令,对所述目标图片进行处理,包括:
响应于目标对象输入的对所述目标图片添加滤镜的滤镜添加指令,对所述目标图片添加滤镜;和/或,
响应于目标对象对所述目标图片的色调调整指令,对所述目标图片进行色调调整。
6.根据权利要求5所述的方法,其特征在于,所述响应于目标对象对所述目标图片的色调调整指令,包括:
响应于目标对象对所述目标图片中的各像素点的R值、G值和B值中的至少一个的调整操作;或,
响应于目标对象对所述目标图片所对应的色调模块的滑动操作。
7.一种图片编辑装置,其特征在于,包括:
目标图片获取模块,用于获取目标对象上传至浏览器中的目标图片;
图片处理模块,用于响应于目标对象对所述目标图片的图像处理指令,对所述目标图片进行处理;
图片展示模块,用于将处理后的目标图片在所述浏览器中进行展示;
所述目标图片获取模块包括:
原始图片获取单元,用于获取目标对象上传至浏览器中的原始图片;
目标图片获取单元,用于基于所述浏览器中对图片的格式要求,对所述原始图像进行布局处理,得到所述目标图片;
所述对所述原始图片进行布局处理,包括:
利用关键字对所述原始图片进行布局处理;或,
利用预设尺寸值对所述原始图片进行布局处理。
8.一种电子设备,其特征在于,所述电子设备包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序;
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-6中任一所述的图片编辑方法。
9.一种包含计算机可执行指令的存储介质,其特征在于,所述计算机可执行指令在由计算机处理器执行时用于执行如权利要求1-6中任一所述的图片编辑方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110102727.0A CN112802157B (zh) | 2021-01-26 | 2021-01-26 | 图片编辑方法、装置、电子设备和存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110102727.0A CN112802157B (zh) | 2021-01-26 | 2021-01-26 | 图片编辑方法、装置、电子设备和存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112802157A CN112802157A (zh) | 2021-05-14 |
CN112802157B true CN112802157B (zh) | 2024-03-12 |
Family
ID=75811752
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110102727.0A Active CN112802157B (zh) | 2021-01-26 | 2021-01-26 | 图片编辑方法、装置、电子设备和存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112802157B (zh) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114979773A (zh) * | 2022-04-19 | 2022-08-30 | 海信视像科技股份有限公司 | 显示设备、视频处理方法及存储介质 |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP2008146259A (ja) * | 2006-12-07 | 2008-06-26 | Canon Inc | 情報処理装置、情報処理装置の制御方法、及びプログラム |
CN104239317A (zh) * | 2013-06-13 | 2014-12-24 | 腾讯科技(深圳)有限公司 | 在浏览器中实现图片编辑的方法及装置 |
CN107589889A (zh) * | 2017-09-21 | 2018-01-16 | 北京金山安全软件有限公司 | 一种图像处理触发方法、装置、电子设备及存储介质 |
CN107957997A (zh) * | 2016-10-14 | 2018-04-24 | 厦门飞博共创网络科技股份有限公司 | 一种在html5页面中编辑图片的方法和装置 |
CN109460521A (zh) * | 2018-09-18 | 2019-03-12 | 平安科技(深圳)有限公司 | web页面中图片编辑方法、装置、介质和计算机设备 |
Family Cites Families (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US9654602B2 (en) * | 2014-01-22 | 2017-05-16 | Zebrafish Labs, Inc. | User interface for just-in-time image processing |
-
2021
- 2021-01-26 CN CN202110102727.0A patent/CN112802157B/zh active Active
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP2008146259A (ja) * | 2006-12-07 | 2008-06-26 | Canon Inc | 情報処理装置、情報処理装置の制御方法、及びプログラム |
CN104239317A (zh) * | 2013-06-13 | 2014-12-24 | 腾讯科技(深圳)有限公司 | 在浏览器中实现图片编辑的方法及装置 |
CN107957997A (zh) * | 2016-10-14 | 2018-04-24 | 厦门飞博共创网络科技股份有限公司 | 一种在html5页面中编辑图片的方法和装置 |
CN107589889A (zh) * | 2017-09-21 | 2018-01-16 | 北京金山安全软件有限公司 | 一种图像处理触发方法、装置、电子设备及存储介质 |
CN109460521A (zh) * | 2018-09-18 | 2019-03-12 | 平安科技(深圳)有限公司 | web页面中图片编辑方法、装置、介质和计算机设备 |
Non-Patent Citations (1)
Title |
---|
图片在线编辑的优化;于海英;;商业经济(10);106,114 * |
Also Published As
Publication number | Publication date |
---|---|
CN112802157A (zh) | 2021-05-14 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10896478B2 (en) | Image grid with selectively prominent images | |
US9378189B2 (en) | Layout apparatus, layout method, and computer-readable recording medium | |
CN113082696B (zh) | 显示控制方法、装置和电子设备 | |
US20150093029A1 (en) | Image layers navigation | |
CN107256259A (zh) | 页面显示方法、装置、电子设备以及存储介质 | |
CN114003160B (zh) | 数据可视化展示方法、装置、计算机设备和存储介质 | |
CN104754223A (zh) | 一种生成缩略图的方法及拍摄终端 | |
WO2021063222A1 (zh) | 电子设备和图像处理方法 | |
CN107861711B (zh) | 页面适配方法及装置 | |
CN112802157B (zh) | 图片编辑方法、装置、电子设备和存储介质 | |
CN113705156A (zh) | 字符处理方法及装置 | |
JP5830153B1 (ja) | 情報表示装置、配信装置、情報表示方法および情報表示プログラム | |
CN111885298B (zh) | 图像处理方法及装置 | |
CN113157182A (zh) | 图像编辑方法、装置、电子设备及存储介质 | |
CN112330728A (zh) | 图像处理方法、装置、电子设备以及可读存储介质 | |
CN110598026B (zh) | 图片列表的显示方法、装置及终端设备 | |
CN112162805A (zh) | 截图方法、装置和电子设备 | |
CN115270737B (zh) | 一种目标对象的格式修改方法及装置 | |
WO2016188199A1 (zh) | 图片裁剪方法和装置 | |
WO2021082652A1 (zh) | 显示信息的方法、装置及计算机可读存储介质 | |
CN114372031A (zh) | 页面生成方法 | |
CN107145313A (zh) | 图像显示方法及装置 | |
CN113592983A (zh) | 一种图像处理方法、装置及计算机可读存储介质 | |
JP2016091548A (ja) | 情報表示装置、配信装置、情報表示方法および情報表示プログラム | |
CN112492206B (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 |