CN106204439A - 图片自适应处理的方法和系统 - Google Patents

Abstract

本公开实施例公开了一种图片自适应处理的方法和系统，属于图片处理技术领域。其中，图片自适应处理的方法包括：对图片进行切分以形成主体内容层和至少一个图案层；至少基于屏幕显示宽度对图案层和主体内容层进行缩放。本公开的实施例通过将图片切分成图案层和主体内容层，与现有的九宫格布局相比，可以实现更简单的结构和更少的图片，通过至少基于屏幕显示宽度对图案层和主体内容层进行缩放，也可以实现对多种屏幕尺寸的自适应。

Description

图片自适应处理的方法和系统

技术领域

本公开实施例涉及图片处理技术领域，尤其涉及一种图片自适应的方法和系统。

背景技术

随着移动Web应用的发展，浏览器已经逐渐从传统桌面转向移动端，目前国内市场主流的手机浏览器有：UC、百度、欧朋、QQ、Safari、Chrome等。手机是移动互联网时代的主要终端载体，终端的多样化，众多的手机操作系统、分辨率、浏览器，造就了形形色色的终端，一个优秀的产品要想覆盖更多的用户群体，就需要更多地考虑多终端兼容问题。

无论是PC端还是移动端，web开发人员通常需要用背景图片去实现设计师给出的一些绚丽的视觉效果，对于规则的网页设计，可以采用响应式布局实现，但是针对不规则的网页设计，目前还没有一套成熟的多终端适配的解决方案。

针对不规则的网页设计，目前常见的解决方案是九宫格布局：九宫格布局就像是一个三行三列的表格，窗体可以在八个方向拉伸，这种布局逐渐被设计师运用到网页设计中。其中每一行包括三列，四个顶角是宽高固定的区域，四条边是要水平或垂直平铺的，中间的区域就是承载内容的主要区域。结构层：因为要适应八个方向的伸缩，所以每个方向都要用一个div来实现，少一个则灵活性就不足。表现层：基本实现原理是将最外层的容器设置为相对定位并且超出的部分全部隐藏，将里面的八个方向的div设置为绝对定位。

在实现本发明的过程中，发明人发现针对不规则的网页设计，传统的九宫格布局至少存在如下问题：

1、从结构层上看，九宫格布局结构比较臃肿；

2、每个节点是必不可少的，无法精简，否则会导致其灵活性不够；

3、八个方向需要提供不同的图片，图片数量太多，增加请求数量；

4、九宫格四条边上的图片只能是规则性的，灵活性较差；

5、设计师提供更加丰富的皮肤方案，开发人员无法灵活运用，无法实现更多视觉效果。

发明内容

本公开实施例提供一种图片自适应处理的方法和系统，用以解决现有技术中存在的一个或多个问题。

本公开实施例提供一种图片自适应处理的方法，包括：对图片进行切分以形成主体内容层和至少一个图案层；至少基于屏幕显示宽度对图案层和主体内容层进行缩放。

本公开实施例提供一种图片自适应处理的系统，包括：切分模块，配置用于对图片进行切分以形成主体内容层和至少一个图案层；缩放模块，配置用于至少基于屏幕显示宽度对图案层和主体内容层进行缩放。

本公开实施例提供的图片自适应处理的方法及系统，通过对图片进行切分并至少基于屏幕显示宽度对切分后的图片进行缩放，改变了现有技术中九宫格结构复杂，需要的图片较多，很多情况下对不规则的图片处理不好的问题，实现了简化代码，提高处理效率，可以很好地处理不规则图片。

附图说明

为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为现有技术中图片自适应处理方法的切分图；

图2为本公开图片自适应处理方法实施例流程图；

图3a为本公开图片自适应处理方法的一个实施例切分图；

图3b为本公开图片自适应处理方法的另一个实施例切分图；

图4为本公开图片自适应处理方法的实施例效果图；

图5a为本公开图片自适应处理方法实施例的切分效果图；

图5b为现有技术中图片自适应处理方法的切分效果图；

图6为本公开图片自适应处理的系统实施例结构示意图；

图7为可以应用于实现本公开实施例的终端设备或服务器的计算机系统的结构示意图。

具体实施方式

为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本公开一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。

需要说明的是，在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本公开。

图1示出了现有技术中图片自适应处理方法的切分图100。

如图1所示，现有技术图片自适应处理方法用的是九宫格布局，切分图100包括四个顶角101，102，103和104；四条边105，106，107和108；以及内容区109。在九宫格布局中，四个角都是宽高固定的，所以九宫格布局在应用于页面时，一般都是先根据屏幕显示宽度水平方向拉伸，再根据屏幕显示高度在高度方向拉伸，因此，如果图片的宽高比与屏幕的宽高比不一致，而四条边上的图片为不规则时，很容易造成四条边上的图片被拉变形，用户体验极不好。有些为了不让图片变形，可能会按照图片宽高比进行缩放，但是无法适用于更多的屏幕尺寸，不能兼容多种终端，用户体验不好。

下面给出本公开实施例的图片自适应的处理方法，本公开的方案可以解决现有技术中存在的一个或多个问题。

请参考图2，其示出了本公开图片自适应处理方法实施例流程图200。

如图2所示，在步骤201中，对图片进行切分以形成主体内容层和至少一个图案层。

在本实施例中，先对网页设计师给出的图片进行切分，形成图案层加主体内容层的布局。其中，图案层可以有一个或多个，本公开在此方面没有限制。图案层与主体内容层的布局可以是图案层-主体内容层或主体内容层-图案层，也可以是图案层-主体内容层-图案层。可以进一步参考图3a和图3b，图3a示出了本公开图片自适应处理方法的一个实施例切分图，图3b示出了本公开图片自适应处理方法的另一个实施例切分图。如图3a所示，切分后的图片包括一个图案层311和一个主体内容层312，其中，图案层311可以在主体内容层312的任意一个方位，例如图中所示的上面，也可以在主体内容层312的下面，左边或右边，本公开在此方面没有限制。

本实施例的方案可以实现更简单的布局，由于布局相比九宫格布局更简单，因此，设计的代码量大大减少，需要的切分的图片数量也大大减少。

在步骤202中，至少基于屏幕显示宽度对图案层和主体内容层进行缩放。

在本实施例中，可以至少基于屏幕显示宽度对图案层和主体内容层进行缩放。也可以基于屏幕显示宽高比或者屏幕显示高度对图案层和主体内容层进行缩放，本公开在此方面没有限制。

本实施例的方案可以在现有技术的基础上实现更加简化的布局，由于布局简单，使用不规则的图片时，按照本方案进行缩放也不会出现图片变形的现象，并且可以兼容多种屏幕。

在一些可选的实施例中，可以先基于屏幕显示宽度对图案层和主体内容层进行等比缩放，即可以将图案层和主体内容层先按照原始图片的宽高比等比缩放至宽度与屏幕显示宽度一致；然后，可以基于屏幕显示高度对主体内容层的高度进行缩放，即当宽度与屏幕显示宽度一致后，如果高度与屏幕显示高度不一致时，还可以根据屏幕显示高度将主体内容层在高度方向拉伸或缩短至主体内容层的高度与图案层的高度相加为当前的屏幕显示高度；最后，将缩放后的图案层和主体内容层布置在屏幕上，即可以将缩放好的图案层和主体内容层布置在屏幕上。上述方案可以实现更精确的布局，并且，由于使用等比缩放的技术，可以更好地将设计师的方案呈现在屏幕上，而不会出现由于缩放比例不一致，而是设计师给的图片变形，影响呈现效果。

在另一些可选的实施例中，本公开的图片自适应处理方法可以基于HTML和CSS实现。

有上述代码可以看出，本公开的图片自适应处理方案由于切分地更简洁，代码结构更简单，对切分后的各个部分的处理也更加简洁，由于使用HTML编写结构，采用CSS编写样式，可以兼容多种浏览器，兼容性更好。需要注意的是，本申请的方案并不限于基于HTML和CSS编写，本领域的技术人员还可以使用目前已知的或未来开发的其他的语言或架构编写，在此不再赘述。

进一步参考图4，其示出了本公开图片自适应处理方法的实施例效果图。

如图4所示，经过本公开的方案处理过的图片可以更好地呈现设计师给出的绚丽的效果。其中，401和403均为图案层，402为填充了内容的主体内容层。经过本公开的方案中的相关处理，该图片可以适用于多种不同宽高比的屏幕，并且处理后的图片不会变形，可以实现很多现有技术中无法实现的效果，能很好地表达设计师想要的效果，用户体验更好。

进一步参考图5a和图5b，图5a示出了本公开图片自适应处理方法实施例的切分效果图，图5b示出了现有技术中图片自适应处理方法的切分效果图。其中图5a中，应用本公开的图片自适应处理方法，只需将设计师给出的切分成图中的图案层511和513以及主体内容层512，再在主体内容层512中填充内容，即可很好地实现设计师给出的方案和效果。进一步参考图5b，虽然也能实现设计师给出的方案和效果，但是需要将图片切分成图中的九个部分：四个顶角521，523，527和529，四条边522，524，526和528，以及内容部分525，因为切分的图片更多，结构更加复杂，处理起来也需要更多步骤。相比之下，采用本公开的方案，切分的图片更少，结构更加精简，由于处理时需要加载的图片更少，也能处理得更快。

由图5a和图5b的对比可以看出，本公开的方案也能用于处理之前用九宫格布局处理的图片，并且很多(例如图4)本公开的方案可以很好地处理，而用九宫格处理不仅繁琐，也可能无法实现设计师想要的效果，并且不能很好地兼容多种屏幕。

虽然本公开的示例性实施例只示出了以上示例性效果图，但是本公开的图片自适应处理方案还可以有实现其他效果的图片，本领域的技术人员很容易根据以上描述给出更多的方案和效果，在此不再赘述。

请参考图6，其示出了本公开图片自适应处理的系统实施例结构示意图。

如图6所示，图片自适应处理的系统600包括切分模块601和缩放模块602。其中，切分模块601，配置用于对图片进行切分以形成主体内容层和至少一个图案层；缩放模块602，配置用于至少基于屏幕显示宽度对图案层和主体内容层进行缩放。本公开的实施例可以实现更加简洁的布局和更好地处理不规则的图片。

在一些可选的实施例中，图片自适应处理的系统600中的切分模块601还可以进一步包括第一切分模块(图中未示出)或者第二切分模块(图中未示出)其中，第一切分模块，配置用于对图片进行切分以形成图案层-主体内容层或主体内容层-图案层的布局。而第二切分模块，配置用于对图片进行切分以形成图案层-主体内容层-图案层的布局。

在另一些可选的实施例中，图片自适应处理的系统600中的缩放模块602还可以进一步包括等比缩放模块、高度缩放模块和布置模块(图中未示出)。其中，等比缩放模块，配置用于基于屏幕显示宽度对所述图案层和所述主体内容层进行等比缩放；高度缩放模块，配置用于基于屏幕显示高度对主体内容层的高度进行缩放；以及布置模块，配置用于将缩放后的图案层和主体内容层布置在所述屏幕上。

在另一些可选的实施例中，图片自适应处理的系统600还可以基于HTML和CSS实现。由于使用HTML和CSS实现，可以具有对多种浏览器的兼容。

应当理解，图6中记载的诸模块与参考图2中描述的方法中的各个步骤相对应。由此，上文针对方法描述的操作和特征以及相应的技术效果同样适用于图6中的诸模块，在此不再赘述。

值得注意的是，本公开的实施例中的模块并不用于限制本公开的方案，例如切分模块可以描述为用于对图片进行切分以形成主体内容层和至少一个图案层的模块。另外，还可以通过硬件处理器来实现相关功能模块，例如切分模块也可以用处理器实现，在此不再赘述。

下面参考图7，其示出了适于用来实现本公开实施例的终端设备或服务器的计算机系统700的结构示意图。

如图7所示，计算机系统700包括中央处理单元(CPU)701，其可以根据存储在只读存储器(ROM)702中的程序或者从存储部分708加载到随机访问存储器(RAM)703中的程序而执行各种适当的动作和处理。在RAM 703中，还存储有系统700操作所需的各种程序和数据。CPU 701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(I/O)接口705也连接至总线704。

以下部件连接至I/O接口705：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入存储部分708。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括有形地包含在机器可读介质上的计算机程序，所述计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本公开的技术方案，而非对其限制；尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本公开各实施例技术方案的精神和范围。

Claims (10)

1.一种图片自适应处理的方法，包括：

对图片进行切分以形成主体内容层和至少一个图案层；

至少基于屏幕显示宽度对所述图案层和所述主体内容层进行缩放。

2.根据权利要求1所述的方法，对图片进行切分以形成主体内容层和至少一个图案层包括：

对图片进行切分以形成图案层-主体内容层或主体内容层-图案层的布局。

3.根据权利要求1所述的方法，对图片进行切分以形成主体内容层和至少一个图案层包括：

对图片进行切分以形成图案层-主体内容层-图案层的布局。

4.根据权利要求1所述的方法，所述至少基于屏幕显示宽度对所述图案层和所述主体内容层进行等比缩放包括：

基于所述屏幕显示宽度对所述图案层和所述主体内容层进行等比缩放；

基于屏幕显示高度对所述主体内容层的高度进行缩放；

将缩放后的所述图案层和所述主体内容层布置在所述屏幕上。

5.根据权利要求1-4中任一项所述的方法，所述方法包括基于HTML和CSS实现。

6.一种图片自适应处理的系统，包括：

切分模块，配置用于对图片进行切分以形成主体内容层和至少一个图案层；

缩放模块，配置用于至少基于屏幕显示宽度对所述图案层和所述主体内容层进行缩放。

7.根据权利要求6所述的系统，所述切分模块进一步包括：

第一切分模块，配置用于对图片进行切分以形成图案层-主体内容层或主体内容层-图案层的布局。

8.根据权利要求6所述的系统，所述切分模块进一步包括：

第二切分模块，配置用于对图片进行切分以形成图案层-主体内容层-图案层的布局。

9.根据权利要求6所述的系统，所述缩放模块进一步包括：

等比缩放模块，配置用于基于所述屏幕显示宽度对所述图案层和所述主体内容层进行等比缩放；

高度缩放模块，配置用于基于屏幕显示高度对所述主体内容层的高度进行缩放；

布置模块，配置用于将缩放后的所述图案层和所述主体内容层布置在所述屏幕上。

10.根据权利要求6-9中任一项所述的系统，所述系统包括基于HTML和CSS实现。