Processing

Please wait...

Settings

Settings

Goto Application

1. CN107392981 - Image synthesis method, apparatus, electronic equipment and readable storage medium thereof

Note: Text based on automatic Optical Character Recognition processes. Please use the PDF version for legal matters

[ ZH ]
一种图片合成方法、装置、电子设备及可读存储介质


技术领域
本发明涉及互联网技术领域,特别是涉及一种图片合成方法、装置、电子设备及可读存储介质。
背景技术
随着互联网的迅速发展,文字、图片、数据库和视频多媒体等不同类型的数据出现于网络。为了吸引更多的用户浏览和使用网页,大部分网页可以使用户根据自己的需要对网页进行设计。目前,通过网页对图片进行合成的技术中,需要客户端将图片上传至服务端,在用户对图片进行编辑、合成等操作时,客户端发送相关请求至服务端,服务端根据相关请求通过后端语言(例如php、java等)来进行图片的编辑和合成。服务端在完成图片的合成之后再将合成后的图片回传至客户端。但是,该方法需要在客户端和服务端之间进行多次通信,并且通过服务端完成对图片的合成,占用服务端较多的资源。
发明内容
本发明实施例的目的在于提供一种图片合成方法、装置、电子设备及可读存储介质,以减少网页图片合成过程中客户端对服务端资源的占用。具体技术方案如下:
本发明实施例公开了一种图片合成方法,所述方法包括:
获取用户通过网页上传的图片;
将所述图片载入预先建立的canvas标签,对所述canvas标签中的图片进行编辑;
当编辑后的图片的数量为多张时,将所述编辑后的图片载入相同的canvas标签,在所述相同的canvas标签中将所述编辑后的图片合成为img图片标签,得到合成后的图片。
可选的,在所述得到合成后的图片之后,所述方法还包括:
将所述合成后的图片显示在所述页面上;
当接收到用户对所述合成后的图片进行保存的操作指令后,将所述合成后的图片保存至客户端。
可选的,在所述对所述canvas标签中的图片进行编辑之后,所述方法还包括:
当编辑后的图片的数量为一张时,对所述canvas标签中的所述编辑后的图片进行合成,得到合成后的图片。
可选的,所述将所述图片载入预先建立的canvas标签,对所述canvas标签中的图片进行编辑,包括:
若预先建立的canvas标签的数量为多个,将所述图片载入所述图片对应的canvas标签;分别对每一个canvas标签中的图片进行编辑;或,
若预先建立的canvas标签的数量为一个,将所述图片依次载入所述canvas标签,按照载入的先后顺序对所述canvas标签中的图片进行编辑,直至编辑完所有图片为止。
可选的,所述对所述canvas标签中的图片进行编辑,包括:
接收用户对所述图片进行编辑的操作指令;
对所述canvas标签中的图片按照所述操作指令进行编辑。
可选的,所述在所述相同的canvas标签中将所述编辑后的图片合成为img图片标签,包括:
通过base64编码将所述编辑后的图片合成为img图片标签。
本发明实施例公开了一种图片合成装置,所述装置包括:
图片获取模块,用于获取用户通过网页上传的图片;
图片编辑模块,用于将所述图片载入预先建立的canvas标签,对所述canvas标签中的图片进行编辑;
第一合成模块,用于当编辑后的图片的数量为多张时,将所述编辑后的图片载入相同的canvas标签,在所述相同的canvas标签中将所述编辑后的图片合成为img图片标签,得到合成后的图片。
可选的,本发明实施例的图片合成装置,还包括:
图片显示模块,用于将所述合成后的图片显示在所述页面上;
图片保存模块,用于当接收到用户对所述合成后的图片进行保存的操作指令后,将所述合成后的图片保存至客户端。
本发明实施例公开了一种电子设备,包括:处理器、通信接口、存储器和通信总线,其中,所述处理器、所述通信接口、所述存储器通过所述通信总线完成相互间的通信;
所述存储器,用于存放计算机程序;
所述处理器,用于执行所述存储器上所存放的程序时,实现上述任一所述的图片合成方法步骤。
本发明实施例公开了一种计算机可读存储介质,所述计算机可读存储介质内存储有计算机程序,所述计算机程序被处理器执行时实现上述任一所述的图片合成方法步骤。
本发明实施例提供的图片合成方法、装置、电子设备及可读存储介质,在获取用户上传的图片之后;将图片载入预先建立的canvas标签,对canvas标签中的图片进行编辑;当编辑后的图片的数量为多张时,将编辑后的图片载入相同的canvas标签,在相同的canvas标签中将编辑后的图片合成为img图片标签,得到合成后的图片。本发明实施例可以不用在服务端实现网页图片的合成,而是在客户端实现网页图片的合成,从而减少了对服务端资源的占用,减少了用户的操作步骤,优化网站的用户体验。当然,实施本发明的任一产品或方法必不一定需要同时达到以上所述的所有优点。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为本发明实施例的图片合成方法的一种流程图;
图2为本发明实施例的图片合成方法的另一种流程图;
图3为本发明实施例的图片合成装置的一种结构图;
图4为本发明实施例的图片合成装置的另一种结构图;
图5为本发明实施例的电子设备的结构图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
在日常工作和生活中,用户经常需要在线P图、制作名片等,而在这个过程中,用户需要把图片上传至服务端,由服务端实现P图、制作名片等,因此,上述方法占用较多的服务端资源。为了解决现有技术中在进行网页图片合成时占用服务端资源较多的问题,本发明实施例提供了一种图片合成方法、装置、电子设备及可读存储介质,以减少对服务端资源的占用。下面首先对本发明实施例所提供的图片合成方法进行详细介绍。
参见图1,图1为本发明实施例的图片合成方法的一种流程图,图1实施例各步骤的执行主体为客户端,包括以下步骤:
S101,获取用户通过网页上传的图片。
本发明实施例中,在进行图片合成时,用户需要选择待合成的图片,并且把图片上传至网页,该网页可以是通过div+css制作的。其中,div+css是一种网页的布局方法。获取图片的方法具体为,通过file.value获取用户上传的图片的地址,根据该地址获取用户上传的图片。与传统的通过表格布局定位的方式不同,它可以实现网页页面内容与表现相分离。用户上传的图片保存在客户端,而不是服务端,也就是说,用户仅仅在进入网页的时候请求了服务端的资源,在网页中上传图片时并不占用服务端资源。
S102,将图片载入预先建立的canvas标签,对canvas标签中的图片进行编辑。
其中,canvas是在HTML5(HyperText Markup Language 5,第五代超级文本标记语言)中新增的标签,canvas标签用于实时生成图片,并且可以对图片进行编辑。具体的,canvas标签可以定义图片,设置图片的初始宽、高、位置、背景等。本发明实施例中,网页的页面结构中包含canvas标签,canvas标签是通过JavaScript语言预先建立的。例如,下述代码可以显示一个红色的矩形。
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
另外,在对图片编辑完成之后,通过JavaScript语言可以将编辑后的图片临时保存在网页的隐藏标签中,然后再对下一张图片进行编辑,最终使编辑后的图片都保存在网页的隐藏标签中。由于网页的隐藏标签是在客户端保存的,因此,编辑后的图片也保存在客户端,从而不占用服务端的空间资源。
S103,当编辑后的图片的数量为多张时,将编辑后的图片载入相同的canvas标签,在相同的canvas标签中将编辑后的图片合成为img图片标签,得到合成后的图片。
本发明实施例中,如果编辑后的图片的数量为多张,那么,将编辑后的图片载入相同的canvas标签,在该相同的canvas标签中,对载入的多张编辑后的图片进行合成。具体的,由于在编辑图片时,可以设置每一张图片的位置、尺寸等参数,因此在图片合成时,读取这些参数,使图片在相应的位置上。例如,假设canvas画布的大小是500*500,而读取的第一张图片是200*200,如果需要把这张图片放在右下角的位置,那么在读取第一张图片并进行编辑时,可以把这张图片拖动到右下角的位置,而拖动的时候可以利用鼠标事件或者触控事件监控图片的操作,当拖动到右下角的时候,就能读取到这张图的坐标x=300,y=300。其中,鼠标事件包括:mouseup、mousedown、mouseover、mousemove、click事件等;触控事件包括:touchstart、touchmove、touchend事件等,通过鼠标事件和触控事件可以跟踪用户的行为。另外,还可以设置多张编辑后的图片重叠的先后顺序,类似地,在编辑图片的时候,提供一个输入框,使用户可以通过该输入框设置这张图片显示在前面或者是后面。例如,如果需要使第一张图片显示在最前面,用户可以在输入框中输入1,最终通过输入值的大小来判断编辑后的图片重叠的先后顺序。由于canvas标签内并不是真实的图像,而是代码,因此可以通过编码将代码转换成图像信息,该图像信息可以被识别成真正的图像。
可见,本发明实施例的图片合成方法,在获取用户上传的图片之后,将图片载入预先建立的canvas标签,对canvas标签中的图片进行编辑;当编辑后的图片的数量为多张时,将编辑后的图片载入相同的canvas标签,在相同的canvas标签中将编辑后的图片合成为img图片标签,得到合成后的图片。本发明实施例可以不用在服务端实现网页图片的合成,而是在客户端实现网页图片的合成,从而减少了对服务端资源的占用,减少了用户的操作步骤,优化网站的用户体验。
参见图2,图2为本发明实施例的图片合成方法的另一种流程图,包括以下步骤:
S201,获取用户通过网页上传的图片。
S202,将图片载入预先建立的canvas标签,对canvas标签中的图片进行编辑。
具体的,canvas标签可以设置图片的初始宽、高、位置、背景等,在对初始宽、高、位置、背景等参数设置完成之后,还可以对canvas标签中的图片进行编辑。本发明实施例中,可以对整张图片进行编辑,例如,可以对图片进行移动、放大、缩小等;还可以对图片内部进行编辑,例如,可以在图片中编辑文字、加阴影等。本发明的一种实现方式中,对canvas标签中的图片进行编辑,包括以下步骤:
第一步,接收用户对图片进行编辑的操作指令,其中,操作指令可以包括:移动指令、改变底色指令、加阴影指令、画线指令、画圈指令、加圆角指令、编辑文字指令和裁切指令等。
第二步,对canvas标签中的图片按照操作指令进行编辑。
本发明实施例中,用户可以根据个人喜好对图片进行编辑,客户端在接收到用户的操作指令后,按照操作指令对canvas标签中的图片进行编辑。由于在一个canvas标签中只能对一张图片进行编辑,因此,如果用户上传的图片为多张时,若预先建立的canvas标签的数量为多个,将图片载入图片对应的canvas标签;分别对每一个canvas标签中的图片进行编辑;或,若预先建立的canvas标签的数量为一个,将图片依次载入canvas标签,按照载入的先后顺序对canvas标签中的图片进行编辑,直至编辑完所有图片为止。
S203,当编辑后的图片的数量为多张时,将编辑后的图片载入相同的canvas标签,在相同的canvas标签中将编辑后的图片合成为img图片标签,得到合成后的图片。
S204,当编辑后的图片的数量为一张时,对canvas标签中的编辑后的图片进行合成,得到合成后的图片。
本发明实施例中,除了对多张图片进行合成之外,还可以对一张图片进行合成,在对一张图片进行合成时,预先建立的canvas标签可以只有一个。那么,在canvas标签中对图片进行编辑,在编辑之后,可以仍然在该canvas标签中对编辑后的图片进行合成。当然,合成方法与上述S103和S203中合成方法类似,本发明的一种实现方式中,通过base64编码将编辑后的图片合成为img图片标签。具体的,JavaScript中已经封装base64编码,例如,vardataURL=canvas.toDataURL(outputFormat||'image/png');该代码就可以直接将canvas标签中的代码转成能读取的图像信息,从而得到合成后的图片。
S205,将合成后的图片显示在页面上。
S206,当接收到用户对合成后的图片进行保存的操作指令后,将合成后的图片保存至客户端。
可选的,在得到合成后的图片之后,可以将合成后的图片显示在页面上。当用户需要保存该合成后的图片时,接收用户对合成后的图片进行保存的操作指令,将合成后的图片保存至客户端。
本发明实施例的图片合成方法,在获取用户上传的图片之后,将图片载入预先建立的canvas标签,对canvas标签中的图片进行编辑;将编辑后的图片合成为img图片标签,得到合成后的图片;将合成后的图片显示在页面上;当接收到用户对合成后的图片进行保存的操作指令后,将合成后的图片保存至客户端。本发明实施例通过在客户端实现网页图片的合成,而不是在服务端实现网页图片的合成,因此减少了对服务端资源的占用,减少了用户的操作步骤,优化网站的用户体验。
相应于上述方法实施例,本发明实施例还提供了一种图片合成装置,参见图3,图3为本发明实施例的图片合成装置的一种结构图,包括:
图片获取模块301,用于获取用户通过网页上传的图片。
图片编辑模块302,用于将图片载入预先建立的canvas标签,对canvas标签中的图片进行编辑。
第一合成模块303,用于当编辑后的图片的数量为多张时,将编辑后的图片载入相同的canvas标签,在相同的canvas标签中将编辑后的图片合成为img图片标签,得到合成后的图片。
本发明实施例的图片合成装置,在获取用户上传的图片之后,将图片载入预先建立的canvas标签,对canvas标签中的图片进行编辑;当编辑后的图片的数量为多张时,将编辑后的图片载入相同的canvas标签,在相同的canvas标签中将编辑后的图片合成为img图片标签,得到合成后的图片。本发明实施例可以不用在服务端实现网页图片的合成,而是在客户端实现网页图片的合成,从而减少了对服务端资源的占用,减少了用户的操作步骤,优化网站的用户体验。
需要说明的是,本发明实施例的装置是应用上述图片合成方法的装置,则上述图片合成方法的所有实施例均适用于该装置,且均能达到相同或相似的有益效果。
参见图4,图4为本发明实施例的图片合成装置的另一种结构图,在图3实施例的基础上,还包括:
第二合成模块401,用于当编辑后的图片的数量为一张时,对canvas标签中的编辑后的图片进行合成,得到合成后的图片。
图片显示模块402,用于将合成后的图片显示在页面上。
图片保存模块403,用于当接收到用户对合成后的图片进行保存的操作指令后,将合成后的图片保存至客户端。
可选的,本发明的一种实现方式中,图片编辑模块302具体用于,若预先建立的canvas标签的数量为多个,将图片载入图片对应的canvas标签;分别对每一个canvas标签中的图片进行编辑;或,
若预先建立的canvas标签的数量为一个,将图片依次载入canvas标签,按照载入的先后顺序对canvas标签中的图片进行编辑,直至编辑完所有图片为止。
可选的,本发明的一种实现方式中,图片编辑模块302具体用于,接收用户对图片进行编辑的操作指令;对canvas标签中的图片按照操作指令进行编辑。
可选的,本发明的一种实现方式中,第一合成模块303具体用于,通过base64编码将编辑后的图片合成为img图片标签。
本发明实施例还提供了一种电子设备,参见图5,图5为本发明实施例的电子设备的结构图,包括:处理器501、通信接口502、存储器503和通信总线504,其中,处理器501、通信接口502、存储器503通过通信总线504完成相互间的通信;
存储器503,用于存放计算机程序;
处理器501,用于执行存储器503上所存放的程序时,实现上述实施例中任一图片合成方法的步骤。
需要说明的是,上述电子设备提到的通信总线504可以是PCI(PeripheralComponent Interconnect,外设部件互连标准)总线或EISA(Extended Industry StandardArchitecture,扩展工业标准结构)总线等。该通信总线504可以分为地址总线、数据总线、控制总线等。为便于表示,图5中仅用一条粗线表示,但并不表示仅有一根总线或一种类型的总线。
通信接口502用于上述电子设备与其他设备之间的通信。
存储器503可以包括RAM(Random Access Memory,随机存取存储器),也可以包括非易失性存储器(non-volatile memory),例如至少一个磁盘存储器。可选的,存储器还可以是至少一个位于远离前述处理器的存储装置。
上述的处理器501可以是通用处理器,包括:CPU(Central Processing Unit,中央处理器)、NP(Network Processor,网络处理器)等;还可以是DSP(Digital SignalProcessing,数字信号处理器)、ASIC(Application Specific Integrated Circuit,专用集成电路)、FPGA(Field-Programmable Gate Array,现场可编程门阵列)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
本发明实施例还提供了一种计算机可读存储介质,计算机可读存储介质内存储有计算机程序,计算机程序被处理器执行时,实现上述实施例中任一图片合成方法的步骤。
需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
本说明书中的各个实施例均采用相关的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于图片合成装置、电子设备及可读存储介质实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
以上所述仅为本发明的较佳实施例而已,并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等,均包含在本发明的保护范围内。