CN105512133B - 一种网页图片合成方法、装置及图片合成网页 - Google Patents
一种网页图片合成方法、装置及图片合成网页 Download PDFInfo
- Publication number
- CN105512133B CN105512133B CN201410499472.6A CN201410499472A CN105512133B CN 105512133 B CN105512133 B CN 105512133B CN 201410499472 A CN201410499472 A CN 201410499472A CN 105512133 B CN105512133 B CN 105512133B
- Authority
- CN
- China
- Prior art keywords
- picture
- background color
- synthesis
- plug
- unit
- 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
Landscapes
- Editing Of Facsimile Originals (AREA)
- Image Processing (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明实施例公开了一种网页图片合成方法、装置及图片合成网页，其中网页图片合成方法包括：显示图片合成网页，包括图片合成区域、背景颜色选择区域、与所述图片合成区域对应的图片合成插件以及与所述背景颜色选择区域对应的颜色传递脚本，所述背景颜色选择区域中包括至少一个背景颜色显示区块；将目标图片发送至所述图片合成插件；将所述背景颜色选择区域中被选中的背景颜色显示区块对应的背景颜色通过所述颜色传递脚本发送至所述图片合成插件，以使所述图片合成插件对所述背景颜色和所述目标图片进行图片合成，并在所述图片合成区域显示图片合成得到的合成结果图片。采用本发明，可有效提高应用开发人员进行图片合成制作的效率。
Description
技术领域
本发明涉及互联网技术领域，尤其涉及一种网页图片合成方法、装置以及图片合成网页。
背景技术
随着互联网技术和移动应用技术的飞速发展，越来越多的网页应用出现在人名的网络生活中，现有的网页开放平台支持应用开发者在线提交其开发的网页应用代码和应用图标，而其现有技术中应用图标的制作过程中若需要设计图片合成，一般都需要通过专门的图形制作软件方可实现，用户在开发应用后还需要专门安装、学习这类图形制作软件才能为其应用软件创造一个应用图标，操作复杂并且需要耗费用户大量时间精力。
发明内容
本发明实施例所要解决的技术问题在于，提供一种网页图片合成方法、装置以及图片合成网页，可实现在网页上进行图片合成。
为了解决上述技术问题，本发明实施例提供了一种网页图片合成方法，所述方法包括：
显示图片合成网页，所述图片合成网页包括图片合成区域、背景颜色选择区域、与所述图片合成区域对应的图片合成插件以及与所述背景颜色选择区域对应的颜色传递脚本，所述背景颜色选择区域中包括至少一个背景颜色显示区块，不同的背景颜色显示区块对应不同的背景颜色；
将目标图片发送至所述图片合成插件；
获取所述背景颜色选择区域中被选中的背景颜色显示区块对应的背景颜色；
将所述被选中的背景颜色显示区块对应的背景颜色通过所述颜色传递脚本发送至所述图片合成插件，以使所述图片合成插件对所述背景颜色和所述目标图片进行图片合成，并在所述图片合成区域显示图片合成得到的合成结果图片。
相应地，本发明实施例还提供了一种网页图片合成装置，包括：
网页显示模块，用于显示图片合成网页，所述图片合成网页包括图片合成区域、背景颜色选择区域、与所述图片合成区域对应的图片合成插件以及与所述背景颜色选择区域对应的颜色传递脚本，所述背景颜色选择区域中包括至少一个背景颜色显示区块，不同的背景颜色显示区块对应不同的背景颜色；
图片导入模块，用于将目标图片发送至所述图片合成插件；
背景颜色选择模块，用于获取所述背景颜色选择区域中被选中的背景颜色显示区块对应的背景颜色；
图片合成模块，用于将所述被选中的背景颜色显示区块对应的背景颜色通过所述颜色传递脚本发送至所述图片合成插件，以使所述图片合成插件对所述背景颜色和所述目标图片进行图片合成，并在所述图片合成区域显示图片合成得到的合成结果图片。
相应的，本发明实施例还提供了一种图片合成网页，所述图片合成网页包括图片合成区域、背景颜色选择区域、与所述图片合成区域对应的图片合成插件以及与所述背景颜色选择区域对应的颜色传递脚本，其中：
所述背景颜色选择区域中包括至少一个背景颜色显示区块，不同的背景颜色显示区块对应不同的背景颜色；
所述颜色传递脚本用于在所述背景颜色显示区块被选中时，将所述被选中的背景颜色显示区块对应的背景颜色发送至所述图片合成插件；
所述图片合成插件用于获取目标图片，并对所述颜色传递脚本发送的背景颜色与所述目标图片进行图片合成；
所述图片合成区域用于显示所述图片合成插件图片合成得到的合成结果图片。
本实施例通过向图片合成网页中的图片合成插件发送目标图片，进而选中图片合成网页的背景颜色选择区域中的背景颜色显示区块，触发图片合成插件将目标图片和被选中的背景颜色显示区块对应的背景颜色进行图片合成，即通过网页实现了图片合成制作，不需使用专门图形制作软件程序，可有效提高应用开发人员进行图片合成制作的效率。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例中的一种网页图片合成方法的流程示意图；
图2是本发明实施例中的图片合成网页的显示效果示意图；
图3是本发明另一实施例中的网页图片合成方法的流程示意图；
图4是本发明另一实施例中的网页图片合成方法的流程示意图；
图5是本发明实施例中的一种网页图片合成装置的结构示意图；
图6是本发明实施例中的一种图片合成网页的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明实施例中的网页图片合成方法可以由网页图片合成装置实施，网页图片合成装置可以加载并显示本发明实施例中的图片合成网页，例如网页图片合成装置可以为网页浏览器、网页浏览插件或带有网页浏览功能的应用程序，还可以为运行有上述浏览器、网页浏览插件或带有网页浏览功能的应用程序的用户终端，包括手机、个人电脑、平板电脑、电子阅读器、车载终端、穿戴式智能设备等。
图1是本发明实施例中的一种网页图片合成方法的流程示意图，本实施例是以网页图片合成装置的角度进行描述网页图片合成方法的实施过程，如图所示可以包括：
S101，显示图片合成网页，所述图片合成网页包括图片合成区域、背景颜色选择区域、与所述图片合成区域对应的图片合成插件以及与所述背景颜色选择区域对应的颜色传递脚本，所述背景颜色选择区域中包括至少一个背景颜色显示区块，不同的背景颜色显示区块对应不同的背景颜色。
具体的，网页图片合成装置可以通过访问目标url(Uniform Resoure Locator，统一资源定位符)或网页链接的方式从网页服务器下载所述图片合成网页，也可以预存或内置所述图片合成网页，在需要时显示所述图片合成网页进行图片合成。示例性的，所述图片合成网页可以如图2所示。
S102，将目标图片发送至所述图片合成插件。
具体的，网页图片合成装置可以将存储在本地或网络上的目标图片发送至所述图片合成插件。示例性的，在所述图片合成网页中的图片合成区域可以设置“图片导入”按键，当用户点击该按键，即可触发从本地存储介质中或网络资源地址中选择目标图片，在选中目标图片后，即可通过所述图片合成插件预设的导入接口或导入函数将目标图片发送至所述图片合成插件。
S103，获取所述背景颜色选择区域中被选中的背景颜色显示区块对应的背景颜色。
具体的，网页图片合成装置可以获取用户在所述背景颜色选择区域中针对背景颜色显示区块的选中指令，进而根据所述选中指令获取被选中的背景颜色显示区块对应的背景颜色。所述背景颜色可以使用颜色标识代表，例如red、红、红色等，也可以采用RGB(红绿蓝)值、HSB值(hues色相，saturation饱和度，brightness表示亮度)或CMYK值(印刷色彩模式，名称取自青色Cyan、品红色Magenta、黄色Yellow以及黑墨印刷Key Plate)等表示对应的背景颜色。
S104，将所述被选中的背景颜色显示区块对应的背景颜色通过所述颜色传递脚本发送至所述图片合成插件，以使所述图片合成插件对所述背景颜色和所述目标图片进行图片合成，并在所述图片合成区域显示图片合成得到的合成结果图片。
在可选实施例中，所述图片合成插件可以将所述目标图片和背景颜色以图层合并的方式进行合成，即将所述目标图片作为上层图像并设置一定的透明度，所述背景颜色作为纯色的下层图像，进而将上下两层图像进行合并，即可得到所述合成结果图片。进而所述图片合成插件可以将得到的合成结果图片进行base64编码，并将编码结果发送至所述图片合成区域进行显示。如图2所示可以在图片合成区域中预设的合成图片显示区域显示所述合成结果图片。
在得到合成结果图片后，网页图片合成装置可以将合成结果图片通过图2所示的“导出图片”按键保存在本地存储介质中，还可以将合成结果图片上传至网络，如上传至所述图片合成网页中对应的网络服务器。
进而在可选实施例中，所述颜色传递脚本可以为所述图片合成网页中内嵌的javascript，可以对应每个背景颜色显示区块设置有一个javascript，当某个背景颜色显示区块被选中后，该背景颜色显示区块对应的javascript即将所述被选中的背景颜色显示区块对应的背景颜色发送至所述图片合成插件，也可以为只设置有一个javascript，根据背景颜色选择区域中被选中的背景颜色显示区块将不同的背景颜色发送至所述图片合成插件。
进而在可选实施例中，所述图片合成插件可以为所述图片合成网页中内嵌的网页flash插件或网页canvas插件。
本实施例通过向图片合成网页中的图片合成插件发送目标图片，进而选中图片合成网页的背景颜色选择区域中的背景颜色显示区块，触发图片合成插件将目标图片和被选中的背景颜色显示区块对应的背景颜色进行图片合成，即通过网页实现了图片合成制作，不需使用专门图形制作软件程序，可有效提高应用开发人员进行图片合成制作的效率。
图3是本发明另一实施例中的网页图片合成方法的流程示意图，本实施例仍是以网页图片合成装置的角度进行描述网页图片合成方法的实施过程，如图所示可以包括：
S301，从网页服务器下载并显示所述图片合成网页。
具体的，网页图片合成装置可以通过访问目标url或网页链接的方式从网页服务器下载所述图片合成网页，示例性的所述图片合成网页可以如图2所示，包括图片合成区域、背景颜色选择区域、与所述图片合成区域对应的图片合成插件以及与所述背景颜色选择区域对应的颜色传递脚本，所述背景颜色选择区域中包括至少一个背景颜色显示区块，不同的背景颜色显示区块对应不同的背景颜色。
S302，将目标图片发送至所述图片合成插件，以使所述图片合成插件将所述目标图片显示在所述图片合成区域的第一图层。
具体的，在本实施例中，所述图片合成区域包括第一图层和第二图层，其中所述第一图层至少部分覆盖在所述第二图层上，所述第一图层设置有透明度，即可透过所述第一图层显示所述第二图层上被覆盖的内容。示例性的如图2所示，所述第一图层可以在所述合成图片显示区域，所述第二图层可以为整个图片合成区域，在将目标图片发送至图片合成插件后，所述图片合成插件即可在第一图层也就是图2中的合成图片显示区域显示目标图片。
S303，获取用户在所述背景颜色选择区域中针对背景颜色显示区块的选中指令，根据所述选中指令获取被选中的背景颜色显示区块对应的背景颜色。
具体的，用户可以通过点击、切换选择焦点等方式在背景颜色选择区域中选中背景颜色显示区块。网页图片合成装置从而获取被选中的背景颜色显示区块对应的背景颜色。所述背景颜色可以使用颜色标识代表，例如red、红、红色等，也可以采用RGB(红绿蓝)值、HSB值(hues色相，saturation饱和度，brightness表示亮度)或CMYK值(印刷色彩模式，名称取自青色Cyan、品红色Magenta、黄色Yellow以及黑墨印刷Key Plate)等表示对应的背景颜色。
S304，将所述被选中的背景颜色显示区块对应的背景颜色通过所述颜色传递脚本发送至所述图片合成插件，以使所述图片合成插件在所述图片合成区域的第二图层显示所述被选中的背景颜色显示区块对应的背景颜色。
在本实施例中，所述颜色传递脚本可以为所述图片合成网页中内嵌的javascript，对应每个背景颜色显示区块设置有一个javascript，当某个背景颜色显示区块被选中后，该背景颜色显示区块对应的javascript即将所述被选中的背景颜色显示区块对应的背景颜色发送至所述图片合成插件。所述图片合成插件可以为所述图片合成网页中内嵌的网页flash插件或网页canvas插件。将所述被选中的背景颜色显示区块对应的背景颜色通过对应的javascript发送至所述图片合成插件后，图片合成插件可以在所述图片合成区域的第二图层显示所述被选中的背景颜色显示区块对应的背景颜色，示例性的可以如图2所示，在图片合成区域的第一图层即合成图片显示区域显示目标图片，在第一图层下方的整个图片合成区域为第二图层，图片合成插件在接收到javascript发送的背景颜色后，可以在第二图层显示被选中的背景颜色显示区块对应的背景颜色，由于第一图层显示目标图片有预设透明度(如60％)，这时实际可以初步预览得到目标图片与背景颜色进行结合的显示效果，用户若不满意则可以选择其他的背景颜色显示区块，若确认则可以向网页图片合成装置输入确认指令，进而网页图片合成装置执行S305。
S305，向所述图片合成插件发送合成确认指令，以触发所述图片合成插件根据所述背景颜色和所述目标图片进行图片合成。
具体的，网页图片合成装置可以根据用户的确认指令向图片合成插件发送合成确认指令，图片合成插件即可以将所述图片合成区域范围内的上下两层图像进行合并，即可得到所述合成结果图片，如图2所示可以在图片合成区域中预设的合成图片显示区域显示所述合成结果图片。
S306，将所述合成结果图片上传至所述网页服务器。
示例性的可以如图2所示，当用户点击图片合成区域中的“导出图片”时，可以发起图片保存，如提示用户选择保存路径，并根据用户选择的本地保存路径将合成结果图片保存在本地存储介质中，于此同时可以将合成结果图片上传至网络，如上传至所述图片合成网页中对应的网络服务器。在其他可选实施例中，图片合成网页上可以设置“上传”按键或“确认”按键，即只要获取到用户对所述合成结果图片的确认指令，即可将合成结果图片上传至所述网页服务器。
本实施例通过向图片合成网页中的图片合成插件发送目标图片，进而选中图片合成网页的背景颜色选择区域中的背景颜色显示区块，触发图片合成插件将目标图片和被选中的背景颜色显示区块对应的背景颜色进行图片合成，即通过网页实现了图片合成制作，不需使用专门图形制作软件程序，可有效提高应用开发人员进行图片合成制作的效率。
图4是本发明另一实施例中的网页图片合成方法的流程示意图，本发明提供了一种图片合成网页，所述图片合成网页包括图片合成区域、背景颜色选择区域、与所述图片合成区域对应的图片合成插件以及与所述背景颜色选择区域对应的颜色传递脚本，本实施例即为以图片合成网页的角度阐述网页图片合成方法的一种实施过程，如图所示可以包括：
S401，图片合成插件在获取到目标图片后，将所述目标图片显示在所述图片合成区域的第一图层。
具体的，在本实施例中，所述图片合成区域包括第一图层和第二图层，其中所述第一图层至少部分覆盖在所述第二图层上，所述第一图层设置有透明度，即可透过所述第一图层显示所述第二图层上被覆盖的内容。示例性的如图2所示，所述第一图层可以在所述合成图片显示区域，所述第二图层可以为整个图片合成区域。所述图片合成网页上的图片合成区域可以设置如图2中所示的“导入图片”按键，用户点击该按键，即可触发将指定路径的目标图片发送给所述图片合成插件，所述指定路径可以为本地路径或网络路径。在将目标图片发送至图片合成插件后，所述图片合成插件即可在第一图层也就是图2中的合成图片显示区域显示目标图片。
S402，颜色传递脚本用于在所述背景颜色显示区块被选中时，将所述被选中的背景颜色显示区块对应的背景颜色发送至所述图片合成插件。
具体的，用户可以通过点击、切换选择焦点等方式在背景颜色选择区域中选中背景颜色显示区块。网页图片合成装置从而获取被选中的背景颜色显示区块对应的背景颜色。所述背景颜色可以使用颜色标识代表，例如red、红、红色等，也可以采用RGB(红绿蓝)值、HSB值(hues色相，saturation饱和度，brightness表示亮度)或CMYK值(印刷色彩模式，名称取自青色Cyan、品红色Magenta、黄色Yellow以及黑墨印刷Key Plate)等表示对应的背景颜色。在本实施例中，所述颜色传递脚本可以为所述图片合成网页中内嵌的javascript，对应每个背景颜色显示区块设置有一个javascript，当某个背景颜色显示区块被选中后，该背景颜色显示区块对应的javascript即将所述被选中的背景颜色显示区块对应的背景颜色发送至所述图片合成插件。
S403，图片合成插件在所述图片合成区域的第二图层显示所述被选中的背景颜色显示区块对应的背景颜色。
示例性的可以如图2所示，在图片合成区域的第一图层即合成图片显示区域显示目标图片，在第一图层下方的整个图片合成区域为第二图层，图片合成插件在接收到javascript发送的背景颜色后，可以在第二图层显示被选中的背景颜色显示区块对应的背景颜色，由于第一图层显示目标图片有预设透明度(如60％)，这时实际可以初步预览得到目标图片与背景颜色进行结合的显示效果，用户若不满意则可以选择其他的背景颜色显示区块，若确认则可以向图片合成插件输入合成确认指令，
S404，图片合成插件根据获取到的合成确认指令对所述背景颜色和所述目标图片进行图片合成。
图片合成插件即可以将所述图片合成区域范围内的上下两层图像进行合并，即可得到所述合成结果图片。
S405，将合成结果图片进行base64编码，并将编码结果发送至所述图片合成区域中的合成图片显示区域进行显示。
如图2所示可以在图片合成区域中预设的合成图片显示区域显示所述合成结果图片。
S406，将所述合成结果图片上传至所述网页服务器
示例性的可以如图2所示，当用户点击图片合成区域中的“导出图片”时，可以发起图片保存，如提示用户选择保存路径，并根据用户选择的本地保存路径将合成结果图片保存在本地存储介质中，于此同时可以将合成结果图片上传至网络，如上传至所述图片合成网页中对应的网络服务器。在其他可选实施例中，图片合成网页上可以设置“上传”按键或“确认”按键，即只要获取到用户对所述合成结果图片的确认指令，即可将合成结果图片上传至所述网页服务器。
图5是本发明实施例中的一种网页图片合成装置的结构示意图，如图所示本发明实施例中的网页图片合成装置可以包括：
网页显示模块510，用于显示图片合成网页。
具体的，网页显示模块510可以通过访问目标url(Uniform Resoure Locator，统一资源定位符)或网页链接的方式从网页服务器下载所述图片合成网页，也可以预存或内置所述图片合成网页，在需要时显示所述图片合成网页进行图片合成。示例性的，所述图片合成网页可以如图2所示，包括图片合成区域、背景颜色选择区域、与所述图片合成区域对应的图片合成插件以及与所述背景颜色选择区域对应的颜色传递脚本，所述背景颜色选择区域中包括至少一个背景颜色显示区块，不同的背景颜色显示区块对应不同的背景颜色。
图片导入模块520，用于将目标图片发送至所述图片合成插件。
具体的，图片导入模块520可以将存储在本地或网络上的目标图片发送至所述图片合成插件。示例性的，在所述图片合成网页中的图片合成区域可以设置“图片导入”按键，当用户点击该按键，即可触发从本地路径或网络路径选择目标图片，在选中目标图片后，图片导入模块520即可通过所述图片合成插件预设的导入接口或导入函数将目标图片发送至所述图片合成插件。
在可选实施例中，所述图片合成区域可以包括第一图层和第二图层，其中所述第一图层至少部分覆盖在所述第二图层上，所述第一图层设置有透明度，即可透过所述第一图层显示所述第二图层上被覆盖的内容。示例性的如图2所示，所述第一图层可以在所述合成图片显示区域，所述第二图层可以为整个图片合成区域，在图片导入模块520将目标图片发送至图片合成插件后，所述图片合成插件即可在第一图层也就是图2中的合成图片显示区域显示目标图片。
进而在可选实施例中，所述图片合成插件可以为所述图片合成网页中内嵌的网页flash插件或网页canvas插件。
背景颜色选择模块530，用于获取所述背景颜色选择区域中被选中的背景颜色显示区块对应的背景颜色。
具体的，背景颜色选择模块530可以获取用户在所述背景颜色选择区域中针对背景颜色显示区块的选中指令，进而根据所述选中指令获取被选中的背景颜色显示区块对应的背景颜色。所述背景颜色可以使用颜色标识代表，例如red、红、红色等，也可以采用RGB(红绿蓝)值、HSB值(hues色相，saturation饱和度，brightness表示亮度)或CMYK值(印刷色彩模式，名称取自青色Cyan、品红色Magenta、黄色Yellow以及黑墨印刷Key Plate)等表示对应的背景颜色。
图片合成模块540，用于将所述被选中的背景颜色显示区块对应的背景颜色通过所述颜色传递脚本发送至所述图片合成插件，以使所述图片合成插件对所述背景颜色和所述目标图片进行图片合成，并在所述图片合成区域显示图片合成得到的合成结果图片。
在可选实施例中，所述颜色传递脚本可以为所述图片合成网页中内嵌的javascript，可以对应每个背景颜色显示区块设置有一个javascript，当某个背景颜色显示区块被选中后，该背景颜色显示区块对应的javascript即将所述被选中的背景颜色显示区块对应的背景颜色发送至所述图片合成插件，也可以为只设置有一个javascript，根据背景颜色选择区域中被选中的背景颜色显示区块将不同的背景颜色发送至所述图片合成插件。
在可选实施例中，所述图片合成插件可以将所述目标图片和背景颜色以图层合并的方式进行合成，即将所述目标图片作为上层图像并设置一定的透明度，所述背景颜色作为纯色的下层图像，进而将上下两层图像进行合并，即可得到所述合成结果图片。进而所述图片合成插件可以将得到的合成结果图片进行base64编码，并将编码结果发送至所述图片合成区域进行显示。如图2所示可以在图片合成区域中预设的合成图片显示区域显示所述合成结果图片。
在可选实施例中，网页图片合成装置进一步还可以包括：
图片保存模块550，用于将所述合成结果图片上传至所述网页服务器。
在得到合成结果图片后，图片保存模块550可以将合成结果图片通过图2所示的“导出图片”按键保存在本地存储介质中，还可以将合成结果图片上传至网络，如上传至所述图片合成网页中对应的网络服务器。示例性的可以如图2所示，当用户点击图片合成区域中的“导出图片”时，可以发起图片保存，如提示用户选择保存路径，并根据用户选择的本地保存路径将合成结果图片保存在本地存储介质中，于此同时可以将合成结果图片上传至网络，如上传至所述图片合成网页中对应的网络服务器。在其他可选实施例中，图片合成网页上可以设置“上传”按键或“确认”按键，即只要获取到用户对所述合成结果图片的确认指令，图片保存模块550即可将合成结果图片上传至所述网页服务器。
本发明实施例中的网页图片合成装置通过向图片合成网页中的图片合成插件发送目标图片，进而选中图片合成网页的背景颜色选择区域中的背景颜色显示区块，触发图片合成插件将目标图片和被选中的背景颜色显示区块对应的背景颜色进行图片合成，即通过网页实现了图片合成制作，不需使用专门图形制作软件程序，可有效提高应用开发人员进行图片合成制作的效率。
图6是本发明实施例中的一种图片合成网页的结构示意图，如图所示本发明实施例中的图片合成网页可以包括图片合成区域610、背景颜色选择区域620、与所述图片合成区域对应的图片合成插件630以及与所述背景颜色选择区域对应的颜色传递脚本640，所述图片合成网页可以被本发明实施例中的网页图片合成装置加载并显示，其显示效果可以参考图2，其中：
所述背景颜色选择区域620中包括至少一个背景颜色显示区块，不同的背景颜色显示区块对应不同的背景颜色；
所述颜色传递脚本640用于在所述背景颜色显示区块被选中时，将所述被选中的背景颜色显示区块对应的背景颜色发送至所述图片合成插件630。
具体的，用户可以通过点击、切换选择焦点等方式在背景颜色选择区域620中选中背景颜色显示区块。颜色传递脚本640从而获取被选中的背景颜色显示区块对应的背景颜色。所述背景颜色可以使用颜色标识代表，例如red、红、红色等，也可以采用RGB(红绿蓝)值、HSB值(hues色相，saturation饱和度，brightness表示亮度)或CMYK值(印刷色彩模式，名称取自青色Cyan、品红色Magenta、黄色Yellow以及黑墨印刷Key Plate)等表示对应的背景颜色。在本实施例中，所述颜色传递脚本640可以为所述图片合成网页中内嵌的javascript，对应每个背景颜色显示区块设置有一个javascript，当某个背景颜色显示区块被选中后，该背景颜色显示区块对应的javascript即将所述被选中的背景颜色显示区块对应的背景颜色发送至所述图片合成插件。
所述图片合成插件630用于获取目标图片，并对所述颜色传递脚本640发送的背景颜色与所述目标图片进行图片合成。
具体的，网页图片合成装置可以将存储在本地或网络上的目标图片发送至所述图片合成插件630。示例性的，在所述图片合成网页中的图片合成区域可以设置“图片导入”按键，当用户点击该按键，即可触发从本地存储介质中或网络资源地址中选择目标图片，在选中目标图片后，即可通过所述图片合成插件预设的导入接口或导入函数将目标图片发送至所述图片合成插件630。
进而所述图片合成插件630可以将所述目标图片和背景颜色以图层合并的方式进行合成，即将所述目标图片作为上层图像并设置一定的透明度，所述背景颜色作为纯色的下层图像，进而将上下两层图像进行合并，即可得到所述合成结果图片。进而所述图片合成插件可以将得到的合成结果图片进行base64编码，并将编码结果发送至所述图片合成区域610进行显示。如图2所示可以在图片合成区域610中预设的合成图片显示区域显示所述合成结果图片。
所述图片合成区域610用于显示所述图片合成插件图片合成得到的合成结果图片。
在可选实施例中，所述图片合成区域610可以包括第一图层和第二图层，其中所述第一图层至少部分覆盖在所述第二图层上，所述第一图层设置有透明度，即可透过所述第一图层显示所述第二图层上被覆盖的内容。示例性的如图2所示，所述第一图层可以在所述合成图片显示区域，所述第二图层可以为整个图片合成区域。所述图片合成网页上的图片合成区域可以设置如图2中所示的“导入图片”按键，用户点击该按键，即可触发将指定路径的目标图片发送给所述图片合成插件，所述指定路径可以为本地路径或网络路径。在将目标图片发送至图片合成插件后，所述图片合成插件630即可在第一图层也就是图2中的合成图片显示区域显示目标图片。进而颜色传递脚本640将所述被选中的背景颜色显示区块对应的背景颜色发送至所述图片合成插件630后，图片合成插件630可以在所述图片合成区域610的第二图层显示所述被选中的背景颜色显示区块对应的背景颜色，示例性的可以如图2所示，在图片合成区域610的第一图层即合成图片显示区域显示目标图片，在第一图层下方的整个图片合成区域为第二图层，图片合成插件630在接收到颜色传递脚本640发送的背景颜色后，可以在图片合成区域610的第二图层显示被选中的背景颜色显示区块对应的背景颜色，由于第一图层显示目标图片有预设透明度(如60％)，这时实际可以初步预览得到目标图片与背景颜色进行结合的显示效果，用户若不满意则可以选择其他的背景颜色显示区块，若确认则可以向图片合成插件630输入合成确认指令，进而图片合成插件630根据合成确认指令进行图片合成，并可以将得到的合成结果图片进行base64编码，并将编码结果发送至所述图片合成区域610进行显示。
进而在可选实施例中，图片合成网页还可以包括：
图片上传插件650，用于将所述合成结果图片上传至图片合成网页对应的网页服务器。
示例性的可以如图2所示，当用户点击图片合成区域中的“导出图片”时，可以发起图片保存，如提示用户选择保存路径，并根据用户选择的本地保存路径将合成结果图片保存在本地存储介质中，于此同时图片上传插件650可以将合成结果图片上传至网络，如上传至所述图片合成网页中对应的网络服务器。在其他可选实施例中，图片合成网页上可以设置“上传”按键或“确认”按键，即只要获取到用户对所述合成结果图片的确认指令，图片上传插件650即可将合成结果图片上传至所述网页服务器。
本发明实施例中的图片合成网页中由于具备上述功能性结构，可以实现图片合成制作过程，不需使用专门图形制作软件程序，可有效提高应用开发人员进行图片合成制作的效率。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random AccessMemory，RAM)等。
以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。
Claims (16)
1.一种网页图片合成方法，其特征在于，所述方法包括：
显示图片合成网页，所述图片合成网页包括图片合成区域、背景颜色选择区域、与所述图片合成区域对应的图片合成插件以及与所述背景颜色选择区域对应的颜色传递脚本，所述背景颜色选择区域中包括至少一个背景颜色显示区块，不同的背景颜色显示区块对应不同的背景颜色，每个背景颜色显示区块设置有一个对应的颜色传递脚本，所述图片合成区域包括第一图层和第二图层，其中所述第一图层至少部分覆盖在所述第二图层上，所述第一图层设置有透明度；
将目标图片发送至所述图片合成插件，以使所述图片合成插件将所述目标图片显示在所述图片合成区域的第一图层；
获取所述背景颜色选择区域中被选中的背景颜色显示区块对应的背景颜色；
将所述被选中的背景颜色显示区块对应的背景颜色通过所述背景颜色显示区块对应的颜色传递脚本发送至所述图片合成插件，以使所述图片合成插件在所述图片合成区域的第二图层显示所述被选中的背景颜色显示区块对应的背景颜色；
向所述图片合成插件发送合成确认指令，以触发所述图片合成插件根据所述背景颜色和所述目标图片进行图片合成，并在所述图片合成区域显示图片合成得到的合成结果图片。
2.如权利要求1所述的网页图片合成方法，其特征在于，所述获取所述背景颜色选择区域中被选中的背景颜色显示区块对应的背景颜色包括：
获取用户在所述背景颜色选择区域中针对背景颜色显示区块的选中指令，根据所述选中指令获取被选中的背景颜色显示区块对应的背景颜色。
3.如权利要求1所述的网页图片合成方法，其特征在于，所述显示图片合成网页包括：
从网页服务器下载并显示所述图片合成网页；
所述方法还包括：
将所述合成结果图片上传至所述网页服务器。
4.如权利要求1所述的网页图片合成方法，其特征在于，所述在所述图片合成区域显示图片合成得到的合成结果图片包括：
所述图片合成插件将合成结果图片进行base64编码，并将编码结果发送至所述图片合成区域中的合成图片显示区域进行显示。
5.如权利要求1所述的网页图片合成方法，其特征在于，所述图片合成插件为网页flash插件或网页canvas插件。
6.如权利要求1所述的网页图片合成方法，其特征在于，所述颜色传递脚本为javascript。
7.一种网页图片合成装置，其特征在于，包括：
网页显示模块，用于显示图片合成网页，所述图片合成网页包括图片合成区域、背景颜色选择区域、与所述图片合成区域对应的图片合成插件以及与所述背景颜色选择区域对应的颜色传递脚本，所述背景颜色选择区域中包括至少一个背景颜色显示区块，不同的背景颜色显示区块对应不同的背景颜色，每个背景颜色显示区块设置有一个对应的颜色传递脚本，所述图片合成区域包括第一图层和第二图层，其中所述第一图层至少部分覆盖在所述第二图层上，所述第一图层设置有透明度；
图片导入模块，用于将目标图片发送至所述图片合成插件，以使所述图片合成插件将所述目标图片显示在所述图片合成区域的第一图层；
背景颜色选择模块，用于获取所述背景颜色选择区域中被选中的背景颜色显示区块对应的背景颜色；
图片合成模块，用于将所述被选中的背景颜色显示区块对应的背景颜色通过所述背景颜色显示区块对应的颜色传递脚本发送至所述图片合成插件，以使所述图片合成插件在所述图片合成区域的第二图层显示所述被选中的背景颜色显示区块对应的背景颜色，向所述图片合成插件发送合成确认指令，以触发所述图片合成插件根据所述背景颜色和所述目标图片进行图片合成，并在所述图片合成区域显示图片合成得到的合成结果图片。
8.如权利要求7所述的网页图片合成装置，其特征在于，所述背景颜色选择模块用于：
获取用户在所述背景颜色选择区域中针对背景颜色显示区块的选中指令，根据所述选中指令获取被选中的背景颜色显示区块对应的背景颜色。
9.如权利要求7所述的网页图片合成装置，其特征在于，所述网页显示模块用于：
从网页服务器下载并显示所述图片合成网页；
所述网页图片合成装置还包括：
图片保存模块，用于将所述合成结果图片上传至所述网页服务器。
10.如权利要求7所述的网页图片合成装置，其特征在于，所述图片合成插件为网页flash插件或网页canvas插件。
11.如权利要求7所述的网页图片合成装置，其特征在于，所述颜色传递脚本为javascript。
12.一种图片合成网页，其特征在于，所述图片合成网页包括图片合成区域、背景颜色选择区域、与所述图片合成区域对应的图片合成插件以及与所述背景颜色选择区域对应的颜色传递脚本，其中：
所述背景颜色选择区域中包括至少一个背景颜色显示区块，不同的背景颜色显示区块对应不同的背景颜色，每个背景颜色显示区块设置有一个对应的颜色传递脚本；
所述颜色传递脚本用于在所述背景颜色显示区块被选中时，将所述被选中的背景颜色显示区块对应的背景颜色发送至所述图片合成插件；
所述图片合成区域包括第一图层和第二图层，其中所述第一图层至少部分覆盖在所述第二图层上，所述第一图层设置有透明度；
所述图片合成插件用于：获取目标图片，在获取到所述目标图片后，将所述目标图片显示在所述图片合成区域的第一图层；在所述图片合成区域的第二图层显示所述被选中的背景颜色显示区块对应的背景颜色；并根据获取到的合成确认指令，触发根据所述颜色传递脚本发送的背景颜色与所述目标图片进行图片合成；
所述图片合成区域用于显示所述图片合成插件图片合成得到的合成结果图片。
13.如权利要求12所述的图片合成网页，其特征在于，还包括：
图片上传插件，用于将所述合成结果图片上传至所述网页服务器。
14.如权利要求12所述的图片合成网页，其特征在于，所述图片合成插件还用于：将合成结果图片进行base64编码，并将编码结果发送至所述图片合成区域中的合成图片显示区域进行显示。
15.如权利要求12所述的图片合成网页，其特征在于，所述图片合成插件为网页flash插件或网页canvas插件。
16.如权利要求12所述的图片合成网页，其特征在于，所述颜色传递脚本为javascript。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410499472.6A CN105512133B (zh) | 2014-09-25 | 2014-09-25 | 一种网页图片合成方法、装置及图片合成网页 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410499472.6A CN105512133B (zh) | 2014-09-25 | 2014-09-25 | 一种网页图片合成方法、装置及图片合成网页 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105512133A CN105512133A (zh) | 2016-04-20 |
| CN105512133B true CN105512133B (zh) | 2019-03-15 |
Family
ID=55720122
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410499472.6A Active CN105512133B (zh) | 2014-09-25 | 2014-09-25 | 一种网页图片合成方法、装置及图片合成网页 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105512133B (zh) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110018864B (zh) * | 2018-01-09 | 2022-07-05 | 阿里巴巴集团控股有限公司 | 页面资源投放方法及装置 |
| CN108777783A (zh) * | 2018-07-09 | 2018-11-09 | 广东交通职业技术学院 | 一种图像处理方法及装置 |
| CN110347456B (zh) * | 2019-05-28 | 2023-05-09 | 北京奇艺世纪科技有限公司 | 图像数据处理方法、装置、计算机设备和存储介质 |
| CN110442820A (zh) * | 2019-07-24 | 2019-11-12 | 上海易点时空网络有限公司 | 用于网页的图片合成方法以及装置 |
| CN110704785A (zh) * | 2019-10-11 | 2020-01-17 | 胥万福 | 一种通过Photoshop快速打开网页中图片的数据处理方法 |
| CN111627093A (zh) * | 2020-05-13 | 2020-09-04 | 上海识装信息科技有限公司 | 一种配置gif信息的方法、装置和电子设备 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101339666A (zh) * | 2008-08-12 | 2009-01-07 | 腾讯科技（深圳）有限公司 | 一种图片验证码的生成方法和装置 |
| CN102332158A (zh) * | 2011-07-26 | 2012-01-25 | 深圳市万兴软件有限公司 | 一种利用阿尔法通道的图像合成方法及*** |
| CN102938863A (zh) * | 2012-11-27 | 2013-02-20 | 乐视致新电子科技（天津）有限公司 | 基于Android***的智能电视图标主题替换方法和装置 |
| CN103678411A (zh) * | 2012-09-24 | 2014-03-26 | 联想(北京)有限公司 | 图片信息处理方法、操作处理方法及电子设备 |
| CN103761098A (zh) * | 2014-01-23 | 2014-04-30 | 贝壳网际（北京）安全技术有限公司 | 一种网页换肤方法、装置及浏览器 |
-
2014
- 2014-09-25 CN CN201410499472.6A patent/CN105512133B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101339666A (zh) * | 2008-08-12 | 2009-01-07 | 腾讯科技（深圳）有限公司 | 一种图片验证码的生成方法和装置 |
| CN102332158A (zh) * | 2011-07-26 | 2012-01-25 | 深圳市万兴软件有限公司 | 一种利用阿尔法通道的图像合成方法及*** |
| CN103678411A (zh) * | 2012-09-24 | 2014-03-26 | 联想(北京)有限公司 | 图片信息处理方法、操作处理方法及电子设备 |
| CN102938863A (zh) * | 2012-11-27 | 2013-02-20 | 乐视致新电子科技（天津）有限公司 | 基于Android***的智能电视图标主题替换方法和装置 |
| CN103761098A (zh) * | 2014-01-23 | 2014-04-30 | 贝壳网际（北京）安全技术有限公司 | 一种网页换肤方法、装置及浏览器 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105512133A (zh) | 2016-04-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105512133B (zh) | 一种网页图片合成方法、装置及图片合成网页 | |
| CN104917666B (zh) | 一种制作个性化动态表情的方法和装置 | |
| CN104168417B (zh) | 图片处理方法及装置 | |
| CN103150658B (zh) | 一种面向终端用户的现实增强定制***及方法 | |
| CN103246678B (zh) | 一种网页内容预览方法和装置 | |
| CN108319415A (zh) | 一种锁屏方法及移动终端 | |
| CN109710348A (zh) | 页面跳转的方法及装置、计算机设备、存储介质 | |
| CN102222062A (zh) | 即时通信***用户空间页面个性化设置方法及其装置 | |
| CN107066272A (zh) | 一种页面更新方法及装置 | |
| CN102077553B (zh) | 用于提供背景触发的背景模型分发的方法、设备和计算机程序产品 | |
| CN105723421B (zh) | 经由应用编程接口使地图内容个性化 | |
| CN106484416A (zh) | 一种信息处理方法及终端 | |
| CN106445486A (zh) | 一种构造和生成网页的方法及*** | |
| CN106358090B (zh) | 虚拟现实视频播放方法和装置、视频投射方法和装置 | |
| CN107241657A (zh) | 视频播放方法、装置、计算设备以及存储介质 | |
| CN111984164B (zh) | 壁纸生成方法、装置、终端及存储介质 | |
| CN106878361A (zh) | 一种终端应用页面的调试方法、装置及客户端 | |
| CN105975393A (zh) | 一种页面显示的检测方法及*** | |
| US20160246491A1 (en) | User interface adjusting method and apparatus using the same | |
| CN109785408B (zh) | 一种填图方法、装置及电子设备 | |
| EP3061214B1 (en) | Method and apparatus for displaying image | |
| CN101814021B (zh) | 在远程设备上显示用户界面的方法和*** | |
| CN110197053B (zh) | 页面生成方法和装置及电子装置 | |
| CN106487662A (zh) | 信息分享方法和装置 | |
| CN108363749B (zh) | 用于信息处理的方法和装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | 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 |