用于生成图像的方法和装置
技术领域
本公开涉及计算机技术领域,具体涉及计算机网络技术领域,尤其涉及用于生成图像的方法和装置。
背景技术
图可视化(Graph Visualization)是利用可视化技术构建、绘制和显示图数据库的某个子图的理论、方法和技术,绘制顶点和边的数量可达几万到几十万。
由于数据量过大,通常图可视化会根据用户的缩放只绘制局部数据,用户有时需要将图可视化结果按1比1比例导出成一张高清PNG图像,采用的导出高清PNG图像的方法主要如下:
(1)基于HTML5 Canvas导出高清PNG图像:在前端创建一个原图尺寸大小的Canvas,并重新绘制图,然后调用Canvas原生API来生成PNG图像。
(2)基于后端技术(如Java等)导出高清PNG图像:前端将图数据发送到后端,利用后端技术将图数据生成PNG图像,并发送到前端。
发明内容
本公开的实施例提供了用于生成图像的方法和装置。
第一方面,本公开的实施例提供了用于生成图像的方法,包括:将原始图像划分为多个区域;其中,原始图像的尺寸大于浏览器所支持的画布的最大尺寸,各个区域的尺寸小于浏览器所支持的画布的最大尺寸;对各个区域分别采用画布绘图,得到各个区域的二进制的像素数据;将位于同一行的各个区域的二进制的像素数据拼接为至少一行的二进制的像素数据;基于拼接后的各行的二进制的像素数据,生成具有预设数据格式的目标图像。
在一些实施例中,方法还包括:响应于从浏览器接收对原始图像的下载请求,从图数据库中获取原始图像;和/或将目标图像嵌入HTML以供用户下载。
在一些实施例中,方法还包括:创建一个Web Worker;采用Web Worker执行如权利要求1或2中的用于生成图像的方法中的各个步骤。
在一些实施例中,将原始图像划分为多个区域包括:将原始图像的顶点和边的坐标数据传递至Web Worker中;采用Web Worker根据原始图像的顶点和边的坐标数据,计算原始图像的尺寸;采用Web Worker基于原始图像的尺寸和浏览器所支持的画布的最大尺寸,将原始图像划分为多个区域。
在一些实施例中,对各个区域分别采用画布绘图,得到各个区域的二进制的像素数据包括:根据各个区域的尺寸,分别创建对应各个区域的离屏画布;对各个区域分别采用对应各个区域的离屏画布绘图,并基于原始图像的顶点和边的坐标数据,将原始图像的顶点和边绘制至所对应的区域中,得到各个区域的二进制的像素数据。
在一些实施例中,将位于同一行的各个区域的二进制的像素数据拼接为至少一行的二进制的像素数据包括:合并位于同一行的各个区域的二进制的像素数据,得到各行的二进制的像素数据所占用的数组的长度;若单行的二进制的像素数据所占用的数组的长度大于脚本语言的数组的最大长度,将单行的二进制的像素数据在纵向上分割为至少两行的二进制的像素数据,分割后各行的二进制的像素数据所占用的数组的长度分别小于脚本语言的数组的最大长度。
在一些实施例中,基于拼接后的各行的二进制的像素数据,生成具有第二图像数据格式的目标图像包括:压缩拼接后的各行的二进制的像素数据,得到压缩后的各行的二进制的像素数据;基于压缩后的各行的二进制的像素数据,确定压缩后的图像的二进制的像素数据;将压缩后的图像的二进制的像素数据转换为具有预设数据格式的目标图像。
第二方面,本公开的实施例提供了用于生成图像的装置,包括:划分单元,被配置成将原始图像划分为多个区域;其中,原始图像的尺寸大于浏览器所支持的画布的最大尺寸,各个区域的尺寸小于浏览器所支持的画布的最大尺寸;绘图单元,被配置成对各个区域分别采用画布绘图,得到各个区域的二进制的像素数据;拼接单元,被配置成将位于同一行的各个区域的二进制的像素数据拼接为至少一行的二进制的像素数据;生成单元,被配置成基于拼接后的各行的二进制的像素数据,生成具有预设数据格式的目标图像。
在一些实施例中,装置还包括:获取单元,被配置成响应于从浏览器接收对原始图像的下载请求,从图数据库中获取原始图像;和/或嵌入单元,被配置成将目标图像嵌入HTML以供用户下载。
在一些实施例中,装置还包括:创建单元,被配置成创建一个Web Worker;执行单元,被配置成采用Web Worker执行如权利要求1或2中的用于生成图像的装置中的各个步骤。
在一些实施例中,划分单元进一步被配置成:将原始图像的顶点和边的坐标数据传递至Web Worker中;采用Web Worker根据原始图像的顶点和边的坐标数据,计算原始图像的尺寸;采用Web Worker基于原始图像的尺寸和浏览器所支持的画布的最大尺寸,将原始图像划分为多个区域。
在一些实施例中,绘图单元进一步被配置成:根据各个区域的尺寸,分别创建对应各个区域的离屏画布;对各个区域分别采用对应各个区域的离屏画布绘图,并基于原始图像的顶点和边的坐标数据,将原始图像的顶点和边绘制至所对应的区域中,得到各个区域的二进制的像素数据。
在一些实施例中,拼接单元进一步被配置成:合并位于同一行的各个区域的二进制的像素数据,得到各行的二进制的像素数据所占用的数组的长度;若单行的二进制的像素数据所占用的数组的长度大于脚本语言的数组的最大长度,将单行的二进制的像素数据在纵向上分割为至少两行的二进制的像素数据,分割后各行的二进制的像素数据所占用的数组的长度分别小于脚本语言的数组的最大长度。
在一些实施例中,生成单元进一步被配置成:压缩拼接后的各行的二进制的像素数据,得到压缩后的各行的二进制的像素数据;基于压缩后的各行的二进制的像素数据,确定压缩后的图像的二进制的像素数据;将压缩后的图像的二进制的像素数据转换为具有预设数据格式的目标图像。
第三方面,本公开的实施例提供了一种电子设备/终端/服务器,包括:一个或多个处理器;存储装置,用于存储一个或多个程序;当一个或多个程序被一个或多个处理器执行,使得一个或多个处理器实现如上任一所述的方法。
第四方面,本公开的实施例提供了一种计算机可读介质,其上存储有计算机程序,该程序被处理器执行时实现如上任一所述的方法。
本公开的实施例提供的用于生成图像的方法和装置,首先将原始图像划分为多个区域;其中,原始图像的尺寸大于浏览器所支持的画布的最大尺寸,各个区域的尺寸小于浏览器所支持的画布的最大尺寸;之后,对各个区域分别采用画布绘图,得到各个区域的二进制的像素数据;之后,将位于同一行的各个区域的二进制的像素数据拼接为至少一行的二进制的像素数据;最后,基于拼接后的各行的二进制的像素数据,生成具有预设数据格式的目标图像。在这一过程中,可以在前端正确生成尺寸大于浏览器所支持的画布的最大尺寸的目标图像,无需在后端生成目标图像,减少了数据传输量,降低了后端的复杂性。在部分实施例中,采用了Webworker执行了用于生成图像的方法中的各个步骤,无需在主线程生成目标图像,减少了对主线程的占用,从而避免了浏览器假死。
附图说明
通过阅读参照以下附图所作的对非限制性实施例详细描述,本公开的其它特征、目的和优点将会变得更明显:
图1是本公开的一些实施例可以应用于其中的示例性系统架构图;
图2是根据本公开的用于生成图像的方法的一些实施例的示例性流程图;
图3是根据本公开的实施例的用于生成图像的方法的一些应用场景的示意图;
图4是根据本公开的用于生成图像的方法的又一些实施例的示例性流程图;
图5是根据本公开的用于生成图像的装置的一些实施例的示例性结构图;
图6是适于用来实现本公开的实施例的电子设备/终端/服务器的结构示意图。
具体实施方式
下面结合附图和实施例对本公开作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释相关发明,而非对该发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与有关发明相关的部分。
需要说明的是,在不冲突的情况下,本公开中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本公开。
需要注意,本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的,本领域技术人员应当理解,除非在上下文另有明确指出,否则应该理解为“一个或多个”。
图1示出了可以应用本公开的实施例的用于生成图像的方法、装置以及用于生成图像的方法、装置的示例性系统架构100。
如图1所示,系统架构100可以包括终端设备101、102、103,网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型,例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备101、102、103通过网络104与服务器105交互,以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用,例如浏览器应用、搜索类应用、深度学习应用、购物类应用、即时通信工具、邮箱客户端、社交平台软件等。
终端设备101、102、103可以是硬件,也可以是软件。当终端设备101、102、103为硬件时,可以是支持各类客户端应用的各种电子设备,包括但不限于平板电脑、膝上型便携计算机和台式计算机等等。当终端设备101、102、103为软件时,可以安装在上述所列举的电子设备中。其可以实现成例如用来提供分布式服务的多个软件或软件模块,也可以实现成单个软件或软件模块。在此不做具体限定。
服务器105可以是提供各种服务的服务器,例如对终端设备101、102、103上进行的图像获取请求提供支持的后台服务器。后台服务器可以对接收到的图像获取请求等数据进行分析等处理,并将处理结果反馈给终端设备。
需要说明的是,在实践中,本公开的实施例所提供的用于生成图像的方法可以由终端设备101、102、103执行。相应地,用于生成图像的装置可以设置于终端设备101、102、103中。在此不做具体限定。
需要说明的是,服务器可以是硬件,也可以是软件。当服务器为硬件时,可以实现成多个服务器组成的分布式服务器集群,也可以实现成单个服务器。当服务器为软件时,可以实现成例如用来提供分布式服务的多个软件或软件模块,也可以实现成单个软件或软件模块。在此不做具体限定。
应该理解,图1中的终端、网络和服务器的数目仅仅是示意性的。根据实现需要,可以具有任意数目的终端、网络和服务器。
继续参考图2,图2示出了根据本公开的用于生成图像的方法的一些实施例的示意性流程图。
如图2所示,用于生成图像的方法200,包括:
在步骤210中,将原始图像划分为多个区域。
在本实施例中,原始图像可以来自于远程或本地的图数据库。原始图像的尺寸通常大于浏览器所支持的画布的最大尺寸,划分原始图像后得到的各个区域的尺寸均小于浏览器所支持的画布(Canvas)的最大尺寸。
用于生成图像的方法的执行主体(例如图1所示的终端、运行于图1所示的终端中的浏览器的主线程或运行于图1所示的终端中的浏览器中的主线程所创建的Web Worker线程)可以采用现有技术或未来发展的技术中划分图像的方法来将原始图像划分为多个区域,本公开对此不做限定。例如,可以根据原始图像的尺寸和浏览器所支持的画布的最大尺寸,来确定划分后的区域的尺寸,并将原始图像划分为多个区域。
上述执行主体在将原始图像划分为多个区域时,可以将原始图像平均划分为多个区域,以提高后续的处理速度;也可以将原始图像随机划分为尺寸均小于浏览器所支持的画布的最大尺寸的多个区域。
以将原始图像平均划分为多个区域为例,若原始图像的尺寸为W×H像素,假设浏览器支持的画布的最大尺寸为L×L像素,那么上述执行主体可以将每个区域的尺寸设置为w×h,其中,每个区域的尺寸都不超过浏览器所支持的画布的最大尺寸,也即w<L,且h<L。此时,将原始图像平均分割为x行y列,从而得到x×y个区域。其中,W>L和/或H>L,L>2且为整数,w>1且为整数,h>1且为整数,x,y均大于1且为整数。
可以理解的是,当图像尺寸以像素为单位时,依据预先指定的固定的分辨率,才能将图像尺寸与现实中的实际尺寸相互转换。例如大多数网页制作常用图像分辨率为72,即每英寸像素为72,1英寸等于2.54厘米,那么通过换算可以得出每厘米等于28像素;又如15x15厘米长度的图像,等于420*420像素的长度。
在本实施例的一些可选实现方式中,上述的执行主体为Web Worker线程,此时,将原始图像划分为多个区域可以包括:将原始图像的顶点和边的坐标数据传递至Web Worker中;采用Web Worker根据原始图像的顶点和边的坐标数据,计算原始图像的尺寸;采用WebWorker基于原始图像的尺寸和浏览器所支持的画布的最大尺寸,将原始图像划分为多个区域。
在本实现方式中,Web Worker是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能,可以用于负责处理数据,或者执行可以延后的任务。
Web Worker在获取原始图像的顶点和边之后,可以根据原始图像的顶点和边的坐标数据来计算原始图像的尺寸;之后,Web Worker根据原始图像的尺寸以及浏览器所支持的画布的最大尺寸,将原始图像划分为多个区域,每个区域的尺寸小于浏览器所支持的画布的最大尺寸,并计算出每个区域对应的坐标范围。
本实现方式中的用于生成图像的方法,由于采用了Web Worker将原始图像划分为多个区域,无需在主线程将原始图像划分为多个区域,减少了对主线程的占用,从而减少了浏览器假死的可能。
在步骤220中,对各个区域分别采用画布绘图,得到各个区域的二进制的像素数据。
在本实施例中,由于各个区域的尺寸均小于浏览器所支持的画布的最大尺寸,上述执行主体可以针对各个区域,分别创建可用于处理区域中的图像数据的画布。例如,若某个区域的尺寸为a×b,那么针对该区域可以创建尺寸大于a×b的画布。
采用创建的画布对各个区域进行绘图后,可以存储各个区域的二进制的像素数据,以便后续根据各个区域的二进制的像素数据确定目标图像。
在本实施例的一些可选实现方式中,对各个区域分别采用画布绘图,得到各个区域的二进制的像素数据包括:根据各个区域的尺寸,分别创建对应各个区域的离屏画布;对各个区域分别采用对应各个区域的离屏画布绘图,并基于原始图像的顶点和边的坐标数据,将原始图像的顶点和边绘制至所对应的区域中,得到各个区域的二进制的像素数据。
在本实现方式中,离屏画布(OffscreenCanvas),将Canvas移出屏幕来解耦了DOM和Canvas API,可以在窗口环境和Web Worker中使用。OffscreenCanvas的渲染与DOM完全分离开来,并且相比普通Canvas,OffscreenCanvas因为Canvas和DOM之间没有同步,离屏画布的响应速度更快。
在一些具体的示例中,上述执行主体所创建的对应各个区域的离屏画布的尺寸分别大于其所对应的区域的尺寸。针对各个区域,上述执行主体可以采用所创建的对应各个区域的离屏画布绘图,并基于原始图像的顶点和边的坐标数据,参考每个区域对应的坐标范围,将原始图像的顶点和边绘制至所对应的区域中,从而得到各个区域的二进制数据。
本实现方式中的用于生成图像的方法,通过创建离屏画布,进而通过对各个区域分别采用对应各个区域的离屏画布绘图,可以得到各个区域的二进制的像素数据。在这一过程中,由于离屏画布的渲染与DOM完全分离,可以提升绘图和得到各个区域的二进制的像素数据的速度。当上述执行主体采用Web Worker时,离屏画布配合Web Worker使用,则可以避免计算、渲染和用户操作响应都发生在同一个线程中,从而避免因数据量大而引起浏览器的主线程堵塞。
在步骤230中,将位于同一行的各个区域的二进制的像素数据拼接为至少一行的二进制的像素数据。
在本实施例中,上述执行主体可以拼接位于同一行的各个区域的二进制的像素数据,得到单行的或多于单行的二进制的像素数据,从而使得拼接后的各行的二进制的像素数据组成的图像的宽度为原图尺寸的宽度。
在确定拼接的结果时,需要考虑拼接后的单行的二进制的像素数据所占用的数组的长度是否小于JavaScript脚本语言的数组的长度。若小于,则说明拼接后的单行的二进制的像素数据可以存放于单个JavaScript脚本语言的数组中,此时将位于同一行的各个区域的二进制的像素数据拼接为单行的二进制的像素数据即可。若大于,则说明拼接后的单行的二进制的像素数据不能存放于单个JavaScript脚本语言的数组中,那么需要将拼接后的单行的二进制的像素数据拆分为多于单行的二进制的像素数据,使得各行的二进制的像素数据可以分别存放于一个的JavaScript脚本语言的数组中。
在本实施例的一些可选实现方式中,上述将位于同一行的各个区域的二进制的像素数据拼接为至少一行的二进制的像素数据可以包括:合并位于同一行的各个区域的二进制的像素数据,得到各行的二进制的像素数据所占用的数组的长度;若单行的二进制的像素数据所占用的数组的长度大于脚本语言的数组的最大长度,则将单行的二进制的像素数据在纵向上分割为至少两行的二进制的像素数据,使得分割后各行的二进制的像素数据所占用的数组的长度分别小于脚本语言的数组的最大长度。
在本实现方式中,为了将各个区域重新拼接成一张大图,还需将各个区域的二进制的像素数据按像素重新横向拼接为宽度为原始图像尺寸宽度的像素数据。
由于每个像素点对应像素数据里的4位数值(分别代表红、绿、蓝、透明度),且JavaScript数组的最大长度为231–1,如果通过计算得知单行的区域合并后数组长度会超过上限,就需要将该行的区域再分割成更多行,相当于横向合并但是纵向分割,横向合并的结果需要保证像素数据的长度不超过231–1,为了方便计算,分割后的区域的高度设置为h2,h2的值不大于h,公式为h2=Math.min(h,Math.floor((231-1)/(W×4)))。
其中,h2:指纵向分割的高度,h是小图的高度,Math.min是指取两个值的较小值,Math.floor是向下取整数。W是指原始图像的宽度;由于每像素点对应像素数据里的4位数值(分别代表红、绿、蓝、透明度),W×4是指1像素高度的原始图像所占用的数组长度。Math.floor((231-1)/(W×4))则表示数组最多能存放宽度为W的大图的高度。
本实现方式中的用于生成图像的方法,在单行的二进制的像素数据所占用的数组的长度大于脚本语言的数组的最大长度时,将单行的二进制的像素数据在纵向上分割为至少两行的二进制的像素数据,以便分割后各行的二进制的像素数据所占用的数组的长度分别小于所述脚本语言的数组的最大长度,可以完整的保留所有的二进制的像素数据,避免数据的丢失。
在步骤240中,基于拼接后的各行的二进制的像素数据,生成具有预设数据格式的目标图像。
在本实施例中,上述执行主体可以将拼接后的各行的二进制的像素数据,转换为用户所需要的预设数据格式,从而得到具有预设数据格式的目标图像。这里的预设数据格式,可以为现有技术或未来发展的技术中的数据格式,本公开对此不做限定。例如,预设数据格式可以为JPEG、PNG等数据格式。
在本实施例的一些可选实现方式中,基于拼接后的各行的二进制的像素数据,生成具有预设数据格式的目标图像包括:压缩拼接后的各行的二进制的像素数据,得到压缩后的各行的二进制的像素数据;基于压缩后的各行的二进制的像素数据,确定压缩后的图像的二进制的像素数据;将压缩后的图像的二进制的像素数据转换为具有预设数据格式的目标图像。
在实现方式中,由于Javascript的数组最大长度是231–1,因此需要使用压缩算法将每行合并后的图像进行一次压缩,从而使得后续针对压缩后的二进制的像素数据的计算量更小。最后把所有行的压缩后的数据组合起来,得到压缩后的图像的二进制的像素数据,再将压缩后的图像的二进制的像素数据转换为具有预设数据格式的目标图像。
在这里,用于压缩拼接后的各行的二进制的像素数据的方法,可以为现有技术或未来发展的技术中用于压缩图像的方法,本申请对此不做限定。
在一个具体的示例中,可以采用DEFLATE算法(是同时使用了LZ77算法与哈夫曼编码(Huffman Coding)的一个无损数据压缩算法)压缩各个横向拼接后的像素数据,之后再将压缩后的像素数据转换为PNG格式的目标图像。由于DEFLATE算法对图像里的直线进行预测然后存储颜色差值,这使得PNG可以获得比原始图像更大的压缩率。
本实现方式中的用于生成图像的方法,由于基于压缩后的图像的二进制的像素数据转换为具有预设数据格式的目标图像,可以减少转换的数据量,并提高目标图像相对于原始图像的压缩率。
以下结合图3,描述本公开的用于生成图像的方法的示例性应用场景。
如图3所示,图3示出了根据本公开的用于生成图像的方法的一些应用场景的示意性流程图。
如图3所示,用于生成图像的方法300运行于电子设备310中,可以包括:
首先,将原始图像301划分为多个区域302;其中,原始图像301的尺寸大于浏览器所支持的画布的最大尺寸,各个区域的尺寸小于浏览器所支持的画布的最大尺寸。
之后,对各个区域302分别采用画布303绘图,得到各个区域的二进制的像素数据304。
之后,将位于同一行的各个区域的二进制的像素数据302,拼接为至少一行的二进制的像素数据305。
最后,基于拼接后的各行的二进制的像素数据306,生成具有预设数据格式的目标图像307。
应当理解,上述图3中所示出的用于生成图像的方法的应用场景,仅为对于用于生成图像的方法的示例性描述,并不代表对该方法的限定。例如,上述将位于同一行的各个区域的二进制的像素数据305,拼接为至少一行的二进制的像素数据306,可以采用以下两个子步骤实现:合并位于同一行的各个区域的二进制的像素数据,得到各行的二进制的像素数据所占用的数组的长度;若单行的二进制的像素数据所占用的数组的长度大于脚本语言的数组的最大长度,将单行的二进制的像素数据在纵向上分割为至少两行的二进制的像素数据,分割后各行的二进制的像素数据所占用的数组的长度分别小于脚本语言的数组的最大长度。本公开对此不做限定。
本公开上述实施例提供的用于生成图像的方法,可以在前端正确生成尺寸大于浏览器所支持的画布的最大尺寸的目标图像,无需在后端生成目标图像,减少了数据传输量,降低了后端的复杂性。
请参考图4,其示出了根据本公开的用于生成图像的方法的又一些实施例的示例性结构图。
如图4所示,本实施例的用于生成图像的方法400,可以包括:
在步骤410中,响应于从浏览器接收对原始图像的下载请求,从图数据库中获取原始图像。
在本实施例中,用于生成图像的方法的执行主体(例如图1所示的终端、运行于图1所示的终端中的浏览器的主线程或运行于图1所示的终端中的浏览器中的主线程所创建的Web Worker线程)可以从浏览器接收的用户或第三方提交的对原始图像的下载请求。之后,上述执行主体可以根据下载请求,从图数据库中获取原始图像。
在步骤420中,将原始图像划分为多个区域。
在本实施例中,原始图像可以来自于远程或本地的图数据库。原始图像的尺寸通常大于浏览器所支持的画布的最大尺寸(如Chrome限制为16384×16384像素),划分原始图像后得到的各个区域的尺寸均小于浏览器所支持的画布Canvas的最大尺寸。
用于生成图像的方法的执行主体(例如图1所示的终端、运行于图1所示的终端中的浏览器的主线程或运行于图1所示的终端中的浏览器中的主线程所创建的Web Worker线程)可以采用现有技术或未来发展的技术中划分图像的方法来将原始图像划分为多个区域,本公开对此不做限定。例如,可以根据原始图像的尺寸和浏览器所支持的画布的最大尺寸,来确定划分后的区域的最大尺寸,并将原始图像划分为多个区域。
在步骤430中,对各个区域分别采用画布绘图,得到各个区域的二进制的像素数据。
在本实施例中,由于各个区域的尺寸均小于浏览器所支持的画布的最大尺寸,上述执行主体可以针对各个区域,分别创建可用于处理区域中的图像数据的画布。例如,若某个区域的尺寸为a×b,那么针对该区域可以创建尺寸大于a×b的画布。
采用创建的画布对各个区域进行绘图后,可以存储各个区域的二进制的像素数据,以便后续根据各个区域的二进制的像素数据确定目标图像。
在步骤440中,将位于同一行的各个区域的二进制的像素数据拼接为至少一行的二进制的像素数据。
在本实施例中,在本实施例中,上述执行主体可以拼接位于同一行的各个区域的二进制的像素数据,得到单行的或多于单行的二进制的像素数据,从而使得拼接后的各行的二进制的像素数据组成的图像的宽度为原图尺寸的宽度。
在确定拼接的结果时,需要考虑拼接后的单行的二进制的像素数据所占用的数组的长度是否小于JavaScript脚本语言的数组的长度。若小于,则说明拼接后的单行的二进制的像素数据可以存放于单个JavaScript脚本语言的数组中,此时将位于同一行的各个区域的二进制的像素数据拼接为单行的二进制的像素数据即可。若大于,则说明拼接后的单行的二进制的像素数据不能存放于单个JavaScript脚本语言的数组中,那么需要将拼接后的单行的二进制的像素数据拆分为多于单行的二进制的像素数据,使得各行的二进制的像素数据可以分别存放于一个的JavaScript脚本语言的数组中。
在步骤450中,基于拼接后的各行的二进制的像素数据,生成具有预设数据格式的目标图像。
在本实施例中,上述执行主体可以将拼接后的各行的二进制的像素数据,转换为用户所需要的预设数据格式,从而得到具有预设数据格式的目标图像。这里的预设数据格式,可以为现有技术或未来发展的技术中的数据格式,本公开对此不做限定。例如,预设数据格式可以为JPEG、PNG等数据格式。
在步骤460中,将目标图像嵌入HTML以供用户下载。
在本实施例中,在将目标图像嵌入HTML以供用户下载时,可以采用现有技术或未来发展的技术中的将图像嵌入HTML的方法,本申请对此不做限定。例如,可以借助Blob将目标图像转换成base64编码的dataURL,然后作为HTML超链接<a>元素的href属性,配合download属性,实现下载。也可以采用传统的用img标记将服务器上的图片引用到HTML中的方式将目标图像嵌入HTML。
本领域技术人员应当理解,上述步骤420至步骤450,分别与上述图2中所示的实施例中的步骤210至步骤240相对应,因此,上述图2中针对步骤210至步骤240所描述的操作和特征同样适用于步骤420至步骤450,在此不再赘述。
本公开上述图4所示的实施例中的用于生成图像的方法,与图2所示的实施例相比,可以响应于从浏览器接收对原始图像的下载请求,从图数据库中获取原始图像,并在生成具有预设数据格式的目标图像之后,将目标图像嵌入HTML以供用户下载,从而提高了浏览器向用户提供图像的能力,增强了浏览器与用户的交互能力。
在上述图2-图4所示的实施例的一些可选实现方式中,用于生成图像的方法还包括:创建一个Web Worker;采用Web Worker执行如述实施例中的用于生成图像的方法中的各个步骤,与采用主线程执行各个步骤相比,可以减少主线程的数据堵塞。
进一步参考图5,作为对上述各图所示方法的实现,本公开提供了一种用于生成图像的装置的一些实施例,该装置实施例与图2-图4所示的方法实施例相对应,该装置具体可以应用于各种电子设备中。
如图5所示,本实施例的用于生成图像的装置500可以包括:划分单元510,被配置成将原始图像划分为多个区域;其中,原始图像的尺寸大于浏览器所支持的画布的最大尺寸,各个区域的尺寸小于浏览器所支持的画布的最大尺寸;绘图单元520,被配置成对各个区域分别采用画布绘图,得到各个区域的二进制的像素数据;拼接单元530,被配置成将位于同一行的各个区域的二进制的像素数据拼接为至少一行的二进制的像素数据;生成单元540,被配置成基于拼接后的各行的二进制的像素数据,生成具有预设数据格式的目标图像。
在本实施例的一些可选实现方式中,装置还包括:获取单元550,被配置成响应于从浏览器接收对原始图像的下载请求,从图数据库中获取原始图像;和/或嵌入单元560,被配置成将目标图像嵌入HTML以供用户下载。
在本实施例的一些可选实现方式中,装置还包括(图中未示出):创建单元570,被配置成创建一个Web Worker;执行单元580,被配置成采用Web Worker调用如权利要求1或2中的用于生成图像的装置中的各个单元。
在本实施例的一些可选实现方式中,划分单元进一步被配置成:将原始图像的顶点和边的坐标数据传递至Web Worker中;采用Web Worker根据原始图像的顶点和边的坐标数据,计算原始图像的尺寸;采用Web Worker基于原始图像的尺寸和浏览器所支持的画布的最大尺寸,将原始图像划分为多个区域。
在本实施例的一些可选实现方式中,绘图单元进一步被配置成:根据各个区域的尺寸,分别创建对应各个区域的离屏画布;对各个区域分别采用对应各个区域的离屏画布绘图,并基于原始图像的顶点和边的坐标数据,将原始图像的顶点和边绘制至所对应的区域中,得到各个区域的二进制的像素数据。
在本实施例的一些可选实现方式中,拼接单元进一步被配置成:合并位于同一行的各个区域的二进制的像素数据,得到各行的二进制的像素数据所占用的数组的长度;若单行的二进制的像素数据所占用的数组的长度大于脚本语言的数组的最大长度,将单行的二进制的像素数据在纵向上分割为至少两行的二进制的像素数据,分割后各行的二进制的像素数据所占用的数组的长度分别小于脚本语言的数组的最大长度。
在本实施例的一些可选实现方式中,生成单元进一步被配置成:压缩拼接后的各行的二进制的像素数据,得到压缩后的各行的二进制的像素数据;基于压缩后的各行的二进制的像素数据,确定压缩后的图像的二进制的像素数据;将压缩后的图像的二进制的像素数据转换为具有预设数据格式的目标图像。
本公开的实施例还提供了一种电子设备/终端/服务器,包括:一个或多个处理器;存储装置,用于存储一个或多个程序;当一个或多个程序被一个或多个处理器执行,使得一个或多个处理器实现如上任一所述的方法。
本公开的实施例还提供了一种计算机可读介质,其上存储有计算机程序,该程序被处理器执行时实现如上任一所述的方法。
本公开的实施例还提供了一种服务器,包括:接口;存储器,其上存储有一个或多个程序;以及一个或多个处理器,在操作上连接到上述接口和上述存储器,用于:将原始图像划分为多个区域;其中,原始图像的尺寸大于浏览器所支持的画布的最大尺寸,各个区域的尺寸小于浏览器所支持的画布的最大尺寸;对各个区域分别采用画布绘图,得到各个区域的二进制的像素数据;将位于同一行的各个区域的二进制的像素数据拼接为至少一行的二进制的像素数据;基于拼接后的各行的二进制的像素数据,生成具有预设数据格式的目标图像。
本公开的实施例还提供了一种计算机可读存储介质,其上存储有计算机程序,其中,当上述计算机程序被一个或多个处理器执行时,使得上述一个或多个处理器:将原始图像划分为多个区域;其中,原始图像的尺寸大于浏览器所支持的画布的最大尺寸,各个区域的尺寸小于浏览器所支持的画布的最大尺寸;对各个区域分别采用画布绘图,得到各个区域的二进制的像素数据;将位于同一行的各个区域的二进制的像素数据拼接为至少一行的二进制的像素数据;基于拼接后的各行的二进制的像素数据,生成具有预设数据格式的目标图像。
下面参考图6,其示出了适于用来实现本公开的实施例的电子设备(例如图1中的服务器或终端设备)600的结构示意图。本公开的实施例中的终端设备可以包括但不限于诸如笔记本电脑、台式计算机等。图6示出的终端设备/服务器仅仅是一个示例,不应对本公开的实施例的功能和使用范围带来任何限制。
如图6所示,电子设备600可以包括处理装置(例如中央处理器、图形处理器等)601,其可以根据存储在只读存储器(ROM)602中的程序或者从存储装置608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM603中,还存储有电子设备600操作所需的各种程序和数据。处理装置601、ROM602以及RAM603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。
通常,以下装置可以连接至I/O接口605:包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置606;包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置607;包括例如磁带、硬盘等的存储装置608;以及通信装置609。通信装置609可以允许电子设备600与其他设备进行无线或有线通信以交换数据。虽然图6示出了具有各种装置的电子设备600,但是应理解的是,并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。图6中示出的每个方框可以代表一个装置,也可以根据需要代表多个装置。
特别地,根据本公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信装置609从网络上被下载和安装,或者从存储装置608被安装,或者从ROM602被安装。在该计算机程序被处理装置601执行时,执行本公开的实施例的方法中限定的上述功能。需要说明的是,本公开的实施例所述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开的实施例中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开的实施例中,计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:电线、光缆、RF(射频)等等,或者上述的任意合适的组合。
上述计算机可读介质可以是上述电子设备中所包含的;也可以是单独存在,而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被该电子设备执行时,使得该电子设备:将原始图像划分为多个区域;其中,原始图像的尺寸大于浏览器所支持的画布的最大尺寸,各个区域的尺寸小于浏览器所支持的画布的最大尺寸;对各个区域分别采用画布绘图,得到各个区域的二进制的像素数据;将位于同一行的各个区域的二进制的像素数据拼接为至少一行的二进制的像素数据;基于拼接后的各行的二进制的像素数据,生成具有预设数据格式的目标图像。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的实施例的操作的计算机程序代码,所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)——连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图,图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开的实施例中所涉及到的单元可以通过软件的方式实现,也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中,例如,可以描述为:一种处理器包括划分单元、绘图单元、拼接单元和生成单元。其中,这些单元的名称在某种情况下并不构成对该单元本身的限定,例如,划分单元还可以被描述为“将原始图像划分为多个区域的单元”。
以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解,本公开中所涉及的发明范围,并不限于上述技术特征的特定组合而成的技术方案,同时也应涵盖在不脱离上述发明构思的情况下,由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。