图片的加载显示方法、设备和系统的制作方法
【技术领域】
[0001]本申请涉及计算机网络通信领域，特别涉及一种图片的加载显示方法、设备和系统，尤其适用于对超大图片的加载显示。
【背景技术】
[0002]传统的大图加载，通常需要在图片数据全部下载完后才会加载图片，这样就常常需要用户进行等待，降低用户的使用体验。也有另外的方式，通过对大图进行处理，生成一些分辨率低的图片，用于预先的模糊预览，待原图完全下载后再进行替换。这样虽然能解决漫长等待的问题，能提升用户体验，但在服务器端需要生成多种不同分辨率的图，增加了服务器端的计算与存储负担。同时，多图片的切换需要提供多个图片地址，服务器端与客户端需要反复验证，从而增加了加载大图实现的复杂程度和处理负荷。
【发明内容】
[0003]针对现有技术存在的上述缺陷，本申请提出了一种图片的加载显示方法，包括:
[0004]加载上传图片的第一链接地址；
[0005]根据由所述图片的第一链接地址解析出的所述图片的元数据，来判断所述图片字节数是否超出加载设备设置的阈值；
[0006]当没有超出所述阈值时，直接加载所述图片；
[0007]当超出所述阈值时，按设定的分块规则将所述图片分割为多个小图，将所述分块规则添加至分割前所述图片的元数据，生成所述图片的第二链接地址，根据加载所述第二链接地址解析出所述元数据描述的分块规则组装所述多个小图的图像数据，还原分割前所述图片。
[0008]本申请根据上述方案，对于超大图片，通过在设备端加载分割前图片的第二链接地址，而不是加载分割成的各个小图的地址，通过分块规则逐个加载各个分辨率高的小图，还原成原始超大图片，减轻了服务器端的计算与存储负担，且加载的图片分辨率高，给用户非常好的体验。
[0009]在一些实施方式中，所述加载第一链接地址是将所述图片的包括字节数、分辨率、动画类型、创建时间、裁剪系数、和图片地址、图片分块规则之一的元数据进行合并编码生成所述图片的统一资源定位符地址。其中，所述地址的编码方式包含了图片的一些关键信息，使客户端和服务端能够很好的识别图片，确保了加载图片时动画效果。
[0010]在一些实施方式中，所述分块规则是根据图片的动画效果和/或分辨率将所述图片分割成矩阵形式的多个区域。
[0011]其中，根据动画效果和/或分辨率规定的分块规则简单方便，使加载图片的分辨率高，减少图片失真，且动画效果逼真，给用户非常好的体验。
[0012]在一些实施方式中，所述加载显示是按动画形式逐渐加载显示。
[0013]在一些实施方式中，所述动画形式的分块规则是通过在分割图片时，对每个分割的小图进行编号，按所述编号的顺序加载所述图片。
[0014]在一些实施方式中，所述动画方形式包括:螺旋形、扇形、百叶窗、展开、收缩、楔入、切出、溶解、淡出、擦除形式。
[0015]另外，本申请提出了一种图片的加载显示设备，包括:
[0016]加载上传图片的第一链接地址的装置；
[0017]判断装置，根据由所述图片的第一链接地址解析出的所述图片的元数据，来判断所述图片字节数是否超出加载设备设置的阈值；和
[0018]图片还原装置，设置为当没有超出所述阈值时，直接加载所述图片；当超出所述阈值时，按设定的分块规则将所述图片分割为多个小图，将所述分块规则添加至分割前所述图片的元数据，生成所述图片的第二链接地址，根据加载所述第二链接地址解析出所述元数据描述的分块规则组装所述多个小图的图像数据，还原分割前所述图片。
[0019]其中所述第一链接地址是将所述图片的包括字节数、分辨率、动画类型、创建时间、裁剪系数和图片地址等在内的元数据进行合并编码生成的所述图片的统一资源定位符地址。
[0020]另外，本申请还提出了一种图片的加载显示系统，包括:
[0021]服务端，设置为根据上述第一链接地址解析出的图片的元数据，判断该图片字节数是否超出服务端设置的阈值；当图片字节数超出服务端设置的阈值时，服务端按分块规则将所述图片分割为若干块小图，并将分块规则添加至分割前图片的元数据，生成图片的第二链接地址；
[0022]客户端，当图片字节数没有超出服务端设置的阈值时，所述客户端直接加载上传图片的第一链接地址，显示所述图片。当图片字节数超出服务端设置的阈值时，所述客户端加载所述第二链接地址，根据所述第二链接地址解析出的元数据，还原显示所述分割前图片。
[0023]其中所述第一链接地址是将所述图片的包括字节数、分辨率、动画类型、创建时间、裁剪系数和图片地址等在内的元数据进行合并编码生成的所述图片的统一资源定位符地址。
[0024]具体而言，在远程网络的服务器上存储大图的分块图像数据，并提供单一的图片“加载链接”(加载链接在图片上传时已经计算生成)。当客户端需要加载这幅图片时，就加载这幅图片的链接地址。服务器上地址拦截器会根据链接地址解析出图片的元数据进行处理。如果元数据记录图片大小超过系统设置“阈值”，系统会按照元数据描述的分块规则有序组装这幅图片的所有的分块图像数据，并且在这些图块之间使用特殊的分割符号进行分害J，设备端通过加载这单一的图片(分割前图片)的链接地址，接收这个地址的socket内容，再通过解析接收的内容，还原图片的分块图像数据，然后依次加载这些分块图片数据。这样在加载图片时，就可以在客户端形成一种以动画方式载入的特效。
[0025]本申请提出的图片的加载显示方法、设备和系统，对超大图片效果更为明显，在加载图片时无需在设备端存储多幅图片，通过在设备端加载分割前图片的第二链接地址，而不是加载分割成的各个小图的地址，通过分块规则逐个加载各个分辨率高的小图，还原成原始超大图片，可以减轻服务器端的计算与存储负担，且加载的图片分辨率高，给用户带来了非常好的体验。
【附图说明】
[0026]图1为本申请一实施方式的图片加载的过程示意图；
[0027]图2为本申请一实施方式的大图分块规则示意图；
[0028]图3为本申请一实施方式的客户端加载分块数据流程示意图；
[0029]图4为本申请一实施方式的客户端获取分块数据，产生动画效果示意图；
[0030]图5为本申请一实施方式的图片链接地址的生成原理示意图；
[0031]图6为本申请一实施方式的图片的加载显示设备结构框图；
[0032]图7为本申请一实施方式的图片的加载显示系统结构框图。
【具体实施方式】
[0033]下面结合附图描述本申请的【具体实施方式】。
[0034]图1示意性地显示了本申请一实施方式的图片加载的过程图。参照图1，图片加载的过程包括以下步骤:
[0035]步骤SOOl:客户端加载服务端中的图片的第一链接地址。其中，第一链接地址是服务端根据图片的字节数、分辨率、动画类型、创建时间、裁剪系数、图片地址等元数据进行合并编码生成该图片的统一资源定位符地址。
[0036]步骤S002:服务端链接拦截器根据从所述图片的第一链接地址解析出的图片的元数据，判断该图片字节数是否超出服务端设置的阈值。
[0037]步骤S003:当图片字节数超出服务端设置的阈值时，服务端按分块规则将所述图片分割为若干块小图，并将分块规则添加至分割前图片的元数据，生成图片的第二链接地址。
[0038]其中，图片的分块规则的设定是基于显示图片的动画效果、分辨率等因素确定。具体在分割图片时，对每个分割后的小图进行编号，以便之后按所述编号的顺序加载所述图片，形成动画形式的加载效果。
[0039]图2示意性地显示了本申请一实施方式的大图分块规则图。参照图2，根据图片的裁剪规则、裁剪系数、图片分辨率等将所述图片分割成矩阵形式的若干区域。例如，在分辨率为2N*2M的大图中，根据分区的值(即裁减系数)进行图片分割。例如，设定裁减系数为2时，图片就被划分为(2N/2)*(2M/2)块区域。即，大图片被分成长、宽的分辨率分别为N和M的区域，得到N*M个小图。
[0040]步骤S004:客户端加载图片的第二链接地址，根据第二链接地址解析出的元数据，还原分割前所述图片。
[0041]步骤S005:当图片字节数没有超出服务端设置的阈值时，客户端直接加载所述图片。
[0042]其中，加载链接地址是通过设备端解析这段地址，获取图片大小，分辨率，裁剪系数，动画类型信息，然后通过http协议远程加载这个图片链接。
[0043]其中，上述第二链接地址是通过服务端的链接拦截器通过nginx拦截的图片的URL地址。其中，nginx ("engine x〃)是一个高性能的http和反向代理服务器，具体是一个IMAP/POP3/SMTP