图片加载方法及系统的制作方法
【专利摘要】本发明公开图片加载方法及系统，其中，所述方法包括步骤：图片接收端接收到用户的浏览指令，获取用户需浏览的图片的图片信息，根据所述图片信息生成并显示与图片尺寸相同的原始位图；图片接收端根据图片尺寸将所述图片分为N部分向服务器发送N个请求，用于获取对应的N部分图片数据；服务器接收到所述请求后，将所述图片的与请求对应的图片数据提取出来，并将提取出来的图片数据返回至图片接收端；图片接收端接收到所述图片数据后，将所述图片数据填充到所述原始位图上，并进行显示。本发明提高了图片的下载显示速度，还改善了用户浏览图片的效果。
【专利说明】图片加载方法及系统
【技术领域】
[0001]本发明涉及数字图像处理【技术领域】，尤其涉及图片加载方法及系统。
【背景技术】
[0002]当前，信息技术迅猛发展，从有线网络发展到无线网络，Internet互联网终端从传统的PC终端发展到智能手机、智能平板、智能电视等各式各样的终端设备。
[0003]伴随着信息分享方式的多样化，现在基于图片的服务软件逐渐流行，由于图片与文本信息相比数据量大，特别是一些高质量的大图片，通过网络传输到终端的时间比较长，用户需要等待很长时间才能看到完整的图片。
[0004]现有技术中，比较主流的图片加载技术是顺序下载图片数据并逐行显示图片的，但在网络较差的情况下用户刚开始只能看到图片顶端的部分，无法快速的获取图片全貌，还有一种技术是先下载分辨率和数据量很小的缩略图显示模糊全貌的图片，接着下载分辨率大一点的缩略图显示清晰一点的图片，最后下载整个原图数据后最终显示原图，这种方案在不稳定的无线网络下容易造成最后原图数据下载不了，只显示了分辨率小的模糊的图片。
[0005]因此，现有技术还有待于改进和发展。
【发明内容】
[0006]鉴于上述现有技术的不足，本发明的目的在于提供一种图片加载方法及系统，旨在解决现有技术中图片下载时间长、显示速度慢的问题。
`[0007]本发明的技术方案如下:
一种图片加载方法，其中，包括步骤:
A、图片接收端接收到用户的浏览指令，获取用户需浏览的图片的图片信息，根据所述图片信息生成并显示与图片尺寸相同的原始位图；
B、图片接收端根据图片尺寸将所述图片分为N部分向服务器发送N个请求，用于获取对应的N部分图片数据；
C、服务器接收到所述请求后，将所述图片的与请求对应的图片数据提取出来，并将提取出来的图片数据返回至图片接收端；
D、图片接收端接收到所述图片数据后，将所述图片数据填充到所述原始位图上，并进行显示。
[0008]所述的图片加载方法，其中，所述步骤A中的图片信息包括图片的地址、宽度及高度?目息。
[0009]所述的图片加载方法，其中，所述步骤A中，生成并显示所述原始位图的过程包括:
Al、判断所述图片在本地是否有缩略图，当有时转入步骤Α2，否则转入步骤A3 ;
Α2、根据缩略图生成宽度及高度分别与图片的宽度及高度对应相同的原始位图； A3、生成像素值唯一且宽度及高度分别与图片的宽度及高度对应相同的原始位图；
A4、将步骤A2或A3生成的原始位图进行显示。
[0010]所述的图片加载方法，其中，所述步骤B中，所述图片接收端同时发送多个请求，或者按照一定的时间间隔顺序发送请求。
[0011]所述的图片加载方法，其中，所述步骤B中的请求包括:图片的分割量N、图片的图片数据编号以及返回图片数据使用的压缩算法。
[0012]所述的图片加载方法，其中，所述步骤C具体包括:
Cl、按照图片的宽度及高度将图片生成相同尺寸的图片位图；
C2、通过定位算法定位所述图片数据编号对应的图片数据的所有像素在所述图片位图中的位置；
C3、将按照定位出的位置对应的像素放置在一局部像素数组中提取出所述图片数据编号对应的图片数据。
[0013]所述的图片加载方法，其中，所述步骤D具体包括:
D1、将接收到的图片数据还原为宽度及高度分别与图片的宽度及高度对应相同的局部位图；
D2、根据所述局部位图采用定位算法定位所述图片数据的所有像素在所述原始位图的原始像素数组中的位置，按照定位出的位置将图片数据的所有像素填充到所述原始位图的原始像素数组中；
D3、填充完毕后，显示填充后的原始位图。
[0014]一种图片加载系统，其中，包括图片接收端及服务器，所述图片接收端包括:原始位图生成模块、请求发送模块及图片显示模块，所述服务器包括图片数据提取模块、图片数据返回模块；
所述原始位图生成模块，用于接收到用户的浏览指令，获取用户需浏览的图片的图片信息，根据所述图片信息生成并显示与图片尺寸相同的原始位图；
所述请求发送模块，用于根据图片尺寸将所述图片分为N部分向服务器发送N个请求，用于获取对应的N部分图片数据；
所述图片数据提取模块，用于接收到所述请求后，将所述图片的与请求对应的图片数据提取出来；
所述图片数据返回模块，用于将提取出来的图片数据返回至图片接收端；
所述图片显示模块，用于接收到所述图片数据后，将所述图片数据填充到所述原始位图上，并进行显示。
[0015]所述的图片加载系统，其中，所述原始位图生成模块包括:
判断单元，用于判断所述图片在本地是否有缩略图；
原始位图生成单元，用于当所述图片有缩略图时根据缩略图生成宽度及高度分别与图片的宽度及高度对应相同的原始位图，或者当所述图片无缩略图时生成像素值唯一且宽度及高度分别与图片的宽度及高度对应相同的原始位图；
显示单元，用于生成的原始位图进行显示。
[0016]所述的图片加载系统，其中，所述图片数据提取模块包括:
图片位图生成单元，用于按照图片的宽度及高度将图片生成相同尺寸的图片位图； 定位单元，用于通过定位算法定位所述图片数据编号对应的图片数据的所有像素在所述图片位图中的位置；
提取单元，用于将按照定位出的位置对应的像素放置在一局部像素数组中提取出所述图片数据编号对应的图片数据。
[0017]有益效果:本发明通过同时或分步请求图片的每个部分的图片数据，每收到任何一部分图片数据后都可以立即显示，并且显示的图片是全图轮廓，显示效果由模糊到清晰，所以本发明不仅提高了图片的下载显示速度，还改善了用户浏览图片的效果。此外，由于图片被分割为了多个部分，在请求发送图片数据的过程中，如果大部分请求成功，而小部分请求失败，也并不影响原图显示的整体效果，这样用户既能够尽快浏览到图片的全貌，又能防止图片下载失败导致看不到比较清晰的有全部轮廓的图片的问题，本发明可以广泛应用在PC终端、智能手机、智能平板、智能电视中。
【专利附图】
【附图说明】
[0018]图1为本发明图片加载方法较佳实施例的流程图。
[0019]图2为图1所示方法中生成并显示所述原始位图的过程的具体流程图。
[0020]图3为图1所示方法中提取图片数据的过程的具体流程图。
[0021]图4为图1所示方法中填充并显示图片数据的过程的具体流程图。
[0022]图5为本发明图片加载系统较佳实施例的结构框图。
[0023]图6为图5所示系统中原始位图生成模块的结构框图。
[0024]图7为图5所示系统中图片数据提取及返回模块的结构框图。
[0025]图8为图5所示系统中图片显示模块的结构框图。
【具体实施方式】
[0026]本发明提供一种图片加载方法及系统，为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
[0027]请参阅图1，图1为本发明图片加载方法较佳实施例的流程图，如图所示，其包括步骤:
5101、图片接收端接收到用户的浏览指令，获取用户需浏览的图片的图片信息，根据所述图片信息生成并显示与图片尺寸相同的原始位图；
5102、图片接收端根据图片尺寸将所述图片分为N部分向服务器发送N个请求，用于获取对应的N部分图片数据；
5103、服务器接收到所述请求后，将所述图片的与请求对应的图片数据提取出来，并将提取出来的图片数据返回至图片接收端；
5104、图片接收端接收到所述图片数据后，将所述图片数据填充到所述原始位图上，并进行显示。
[0028]在步骤SlOl中，首先是图片接收端接收到用户的浏览指令，然后获取用户需浏览的图片的图片信息，该图片接收端可以是例如PC终端、智能手机、智能平板或者智能电视等等任意的终端设备，用户在图片接收端发出浏览图片的指令后，图片接收端开始获取该图片的图片信息。所述的图片信息包括图片的地址、图片的宽度Width、图片的高度Height，此外，还要根据所述图片信息生成一原始位图，该原始位图可以由图片的缩略图生成，或者直接为该缩略图，如图2所示，其过程包括:
S201、判断所述图片在本地是否有缩略图，当有时转入步骤S202，否则转入步骤S203 ；此步骤是判断图片是否有缩略图，当有时根据该缩略图生成原始位图，当没有时，则需要根据图片的尺寸来直接生成。
[0029]S202、根据缩略图生成宽度及高度分别与图片的宽度及高度对应相同的原始位图；
当有时，则将该缩略图生成一个尺寸与图片相同的原始位图，该原始位图是一个不清晰的图片，但该原始位图显示了图片的基本轮廓，从而使用户可以一开始就能看到图片的全貌。
[0030]S203、生成像素值唯一且宽度及高度分别与图片的宽度及高度对应相同的原始位图；
当没有该图片的缩略图时，则需要自动生成一张尺寸与图片相同的原始位图，这张原始位图的像素值处处相同，例如为全黑或者全白，这样以后加载的图片数据能够逐渐显示在该原始位图上。
[0031]S204、此步骤是将步骤S202或者S203生成的原始位图显示出来，以使用户能够第一时间得到该图片的全部轮廓。
[0032]在步骤S102中，图片接收端还需根据图片尺寸将图片确定为合适的N部分，然后向服务器发送N个请求，来获取这N个请求对应的N部分图片数据，将图片分为N部分的目的是分别接收N部分图片数据，这样可以提高图片下载的速度，减少等待的时间，并且即使小部分图片数据没有接收到，也不影响用户看到全部轮廓的图片。前述的将图片确定为N部分，是根据图片尺寸来确定的，而不是将实际的图片分割为N部分，下面详细描述如何确定N部分:根据图片的宽度和高度，计算出图片的总像素量P，P等于Width乘Heigh，那么N等于P除以(50X 1024)(即50KB大小)，这样N即为一个较合适的值，即可加快传输速度，又能保证显示足够的图片数据，而按照上述公式获得的N小于I时，则取N为I，若想显示完整的清晰图片，则需要发送N个请求，获得所有的N部分图片数据。当然，前述的50KB是一个较佳的实施例，本发明也可选择50KB左右的其他值，同样能够实现本发明的目的。
[0033]图片接收端可以向服务器分别请求N个部分的图片数据，即一部分图片数据对应一个请求，一共N个请求，这N个请求可以按照不同的方式发送，例如在网络稳定和网速较快的情况下同时发送多个请求，甚至同时发送N个请求，而在网络较差和网速较慢的情况下则按照一定的时间间隔顺序发送请求，例如依次发送第一个请求、第二个请求、第三个请求等等。
[0034]在发送的请求中，除了包含图片的分割量N、图片的图片数据编号(即所请求获取的图片数据属于N部分中的第几部分)外，还包括返回图片数据使用的压缩算法，例如采用http协议上的gzip (GNUzip，一种文件压缩程序)压缩方式对图片数据进行压缩。
[0035]在步骤S103中，服务器接收到请求后，将该请求对应的图片数据从图片中提取出来，然后返回至图片接收端。
[0036]其中，如图3所示，服务器提取图片的图片数据过程具体包括:S301、按照图片的宽度及高度将图片生成相同尺寸的图片位图；
此步骤是将图片按照其尺寸生成一个图片位图，方便提取图片数据，该图片位图的尺寸与图片本身是一致的。
[0037]S302、通过定位算法定位所述图片数据编号对应的图片数据的所有像素在所述图片位图中的位置；
通过定位算法定位出图片数据编号对应的图片数据的所有像素在图片位图的位置，其目的是在图片位图中找到请求中所需的图片数据的所有像素的位置。
[0038]其中，本发明中的定位算法是指按照一定的方式提取图片的图片数据，比如图片被分割为N个部分，其中请求获取的图片数据编号为T (T^N), ImgData表示图片像素数组，即图片所有的像素分布为:宽为Width、高位Height的二维数组；
定位算法就是先将ImgData中的每一行按顺序分为M部分(M是由N来确定的，M与N的乘积大于等于ImgData中的每一行的像素量，并且M取其最小值，例如ImgData中每一行具有23个像素，N为4，M与N的乘积应大于等于23，并且M取其最小值，如此，可计算得到M为6)，若Width是N的整数倍，则M部分中的每一部分均有N个像素(举例说明，若ImgData中每一行具有24个像素,那么N为4,那么每一行可分为M (M为6)部分,这6部分中每一部分具有4个像素)，但是由于Width不一定是N的整数倍，所以第M部分的像素个数小于或等于N(即前述的每一行具有23个像素的情况，第6部分中只有3个像素，而不是4个像素)，M部分中，每一部分中的第T个像素即为要提取的像素，该像素所在位置即为其在图片位图的位置。当然，如果第M部分中没有该第T个像素时，则为无效值。
[0039]S303、将按照定位出的位置对应的像素放置在一局部像素数组中形成所述图片数据编号对应的图片数据，该局部像素数组为原始图片的总像素数组的一部分，即N部分图片数据中的某一部分。
[0040]这个过程就是提取某一请求对应的图片数据的过程，这个图片数据可以形成一个宽高与图片相同的一个小图片。
[0041]然后，服务器将提取出来的图片数据按照请求中包含的压缩算法将图片数据压缩打包发送给图片接收端。
[0042]在步骤S104中，图片接收端接收到所述图片数据的压缩包后，按照所述压缩算法对应的解压缩方法对其进行解压，获取其中的图片数据，最后还需要将该图片数据与原始位图合并，从而使原始位图加载该图片数据对应的部分，使原始位图逐渐清晰。
[0043]如图4所示,其加载显示的过程具体包括:
5401、将接收到的图片数据还原为宽度及高度分别与图片的宽度及高度对应相同的局部位图；
5402、根据所述局部位图使用定位算法定位所述图片数据的所有像素在所述原始位图的原始像素数组中的位置，按照定位出的位置将图片数据的像素填充到所述原始位图的原始像素数组中；
5403、填充完毕后，显示填充后的原始位图。
[0044]上述过程从原理上来说，是提取图片数据的逆过程，这样获得了 N个请求对应的图片数据后，即可完整清晰的显示图片的内容了。
[0045]本发明中，通过同时或分步请求图片的每个部分的图片数据，每收到任何一部分图片数据后都可以立即显示，并且显示的图片是全图轮廓，显示效果由模糊到清晰，所以本发明不仅提高了图片的下载显示速度，还改善了用户浏览图片的效果。此外，由于图片被分割为了多个部分，在请求发送图片数据的过程中，如果大部分请求成功，而小部分请求失败，也并不影响原图显示的整体效果，这样用户既能够尽快浏览到图片的全貌，又能防止图片下载失败导致看不到比较清晰的有全部轮廓的图片的问题，本发明可以广泛应用在PC终端、智能手机、智能平板、智能电视中。
[0046]基于上述方法，本发明还提供一种图片加载系统，如图5所示，包括图片接收端100及服务器200，所述图片接收端100包括:原始位图生成模块110、请求发送模块120及图片显示模块130，所述服务器200包括图片数据提取模块210、图片数据返回模块220 ；
所述原始位图生成模块110，用于接收到用户的浏览指令，获取用户需浏览的图片的图片信息，根据所述图片信息生成并显示与图片尺寸相同的原始位图；
所述请求发送模块120，用于根据图片尺寸将所述图片分为N部分向服务器发送N个请求，用于获取对应的N部分图片数据；
所述图片数据提取模块210，用于接收到所述请求后，将所述图片的与请求对应的图片数据提取出来；
所述图片数据返回模块220，用于将提取出来的图片数据返回至图片接收端；
所述图片显示模块130，用于接收到所述图片数据后，将所述图片数据填充到所述原始位图上，并进行显示。关于上述功能模块的作用在前面的方法中已有详述，故不再赘述。
[0047]进一步,如图6所示,所述原始位图生成模块110包括:
判断单元111，用于判断所述图片在本地是否有缩略图；
原始位图生成单元112，用于当所述图片有缩略图时将缩略图生成宽度及高度分别与图片的宽度及高度对应相同的原始位图，或者当所述图片无缩略图时生成像素值生成像素值唯一且宽度及高度分别与图片的宽度及高度对应相同的原始位图；
显示单元113，用于生成的原始位图进行显示。关于上述功能模块的作用在前面的方法中已有详述，故不再赘述。
[0048]进一步，如图7所示，所述图片数据提取模块210包括:
图片位图生成单元211，用于按照图片的宽度及高度将图片生成相同尺寸的图片位
图；
定位单元212，用于通过定位算法定位所述图片数据编号对应的图片数据的所有像素在所述图片位图中的位置；
提取单元213，用于将按照定位出的位置对应的像素放置在一局部像素数组中提取出所述图片数据编号对应的图片数据。关于上述功能模块的作用在前面的方法中已有详述，故不再赘述。
[0049]进一步,如图8所示,所述显示模块130包括:
局部位图生成单元131，用于将接收到的图片数据还原为宽度及高度分别与图片的宽度及高度对应相同的局部位图；
填充单元132，用于根据所述局部位图采用定位算法定位所述图片数据的所有像素在所述原始位图的原始像素数组中的位置，并按照定位出的位置将图片数据的所有像素填充到所述原始位图的原始像素数组中； 显示单元113，用于填充完毕后，显示填充后的原始位图。关于上述功能模块的作用在前面的方法中已有详述，故不再赘述。
[0050]应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。
【权利要求】
1.一种图片加载方法，其特征在于，包括步骤: A、图片接收端接收到用户的浏览指令，获取用户需浏览的图片的图片信息，根据所述图片信息生成并显示与图片尺寸相同的原始位图； B、图片接收端根据图片尺寸将所述图片分为N部分向服务器发送N个请求，用于获取对应的N部分图片数据； C、服务器接收到所述请求后，将所述图片的与请求对应的图片数据提取出来，并将提取出来的图片数据返回至图片接收端； D、图片接收端接收到所述图片数据后，将所述图片数据填充到所述原始位图上，并进行显示。
2.根据权利要求1所述的图片加载方法，其特征在于，所述步骤A中的图片信息包括图片的地址、宽度及高度信息。
3.根据权利要求2所述的图片加载方法，其特征在于，所述步骤A中，生成并显示所述原始位图的过程包括: Al、判断所述图片在本地是否有缩略图，当有时转入步骤A2，否则转入步骤A3 ； A2、根据缩略图生成宽度及高度分别与图片的宽度及高度对应相同的原始位图； A3、生成像素值唯一且宽度及高度分别与图片的宽度及高度对应相同的原始位图； A4、将步骤A2或A3生成的原始位图进行显示。
4.根据权利要求1所述的图`片加载方法，其特征在于，所述步骤B中，所述图片接收端同时发送多个请求，或者按照一定的时间间隔顺序发送请求。
5.根据权利要求1所述的图片加载方法，其特征在于，所述步骤B中的请求包括:图片的分割量N、图片的图片数据编号以及返回图片数据使用的压缩算法。
6.根据权利要求5所述的图片加载方法，其特征在于，所述步骤C具体包括: Cl、按照图片的宽度及高度将图片生成相同尺寸的图片位图； C2、通过定位算法定位所述图片数据编号对应的图片数据的所有像素在所述图片位图中的位置； C3、将按照定位出的位置对应的像素放置在一局部像素数组中提取出所述图片数据编号对应的图片数据。
7.根据权利要求6所述的图片加载方法，其特征在于，所述步骤D具体包括: D1、将接收到的图片数据还原为宽度及高度分别与图片的宽度及高度对应相同的局部位图； D2、根据所述局部位图采用定位算法定位所述图片数据的所有像素在所述原始位图的原始像素数组中的位置，按照定位出的位置将图片数据的所有像素填充到所述原始位图的原始像素数组中； D3、填充完毕后，显示填充后的原始位图。
8.一种图片加载系统，其特征在于，包括图片接收端及服务器，所述图片接收端包括:原始位图生成模块、请求发送模块及图片显示模块，所述服务器包括图片数据提取模块、图片数据返回模块； 所述原始位图生成模块，用于接收到用户的浏览指令，获取用户需浏览的图片的图片信息，根据所述图片信息生成并显示与图片尺寸相同的原始位图；所述请求发送模块，用于根据图片尺寸将所述图片分为N部分向服务器发送N个请求，用于获取对应的N部分图片数据； 所述图片数据提取模块，用于接收到所述请求后，将所述图片的与请求对应的图片数据提取出来； 所述图片数据返回模块，用于将提取出来的图片数据返回至图片接收端； 所述图片显示模块，用于接收到所述图片数据后，将所述图片数据填充到所述原始位图上，并进行显示。
9.根据权利要求8所述的图片加载系统，其特征在于，所述原始位图生成模块包括: 判断单元，用于判断所述图片在本地是否有缩略图； 原始位图生成单元，用于当所述图片有缩略图时根据缩略图生成宽度及高度分别与图片的宽度及高度对应相同的原始位图，或者当所述图片无缩略图时生成像素值唯一且宽度及高度分别与图片的宽度及高度对应相同的原始位图； 显示单元，用于生成的原始位图进行显示。
10.根据权利要求8所述的图片加载系统，其特征在于，所述图片数据提取模块包括: 图片位图生成单元，用于按照图片的宽度及高度将图片生成相同尺寸的图片位图； 定位单元，用于通过定位算法定位所述图片数据编号对应的图片数据的所有像素在所述图片位图中的位置； 提取单元，用于将按照定位出的位置对应的像素放置在一局部像素数组中提取出所述图片数据编号对应的图片`数据。
【文档编号】H04L29/08GK103514241SQ201210522041
【公开日】2014年1月15日 申请日期:2012年12月7日 优先权日:2012年12月7日
【发明者】覃春光 申请人:Tcl集团股份有限公司