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

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

【技术实现步骤摘要】

本公开实施例涉及图片处理
，尤其涉及一种图片自适应的方法和系统。
技术介绍
随着移动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实现。有上述代码可以看本文档来自技高网...

【技术保护点】
一种图片自适应处理的方法，包括：对图片进行切分以形成主体内容层和至少一个图案层；至少基于屏幕显示宽度对所述图案层和所述主体内容层进行缩放。

【技术特征摘要】
1.一种图片自适应处理的方法，包括：对图片进行切分以形成主体内容层和至少一个图案层；至少基于屏幕显示宽度对所述图案层和所述主体内容层进行缩放。2.根据权利要求1所述的方法，对图片进行切分以形成主体内容层和至少一个图案层包括：对图片进行切分以形成图案层-主体内容层或主体内容层-图案层的布局。3.根据权利要求1所述的方法，对图片进行切分以形成主体内容层和至少一个图案层包括：对图片进行切分以形成图案层-主体内容层-图案层的布局。4.根据权利要求1所述的方法，所述至少基于屏幕显示宽度对所述图案层和所述主体内容层进行等比缩放包括：基于所述屏幕显示宽度对所述图案层和所述主体内容层进行等比缩放；基于屏幕显示高度对所述主体内容层的高度进行缩放；将缩放后的所述图案层和所述主体内容层布置在所述屏幕上。5.根据权利要求1-4中任一项所述的方法，所述方法包括基于HTML和CSS实现。6.一种图片自适应处...

【专利技术属性】
技术研发人员：何亮，李晓凤，
申请(专利权)人：乐视控股北京有限公司，乐视致新电子科技天津有限公司，
类型：发明
国别省市：北京;11