自适应背景图片拉伸方法、装置、介质和设备

摘要

本发明涉及一种自适应背景图片拉伸方法，该方法包括：采用专用像素在背景图片的至少一个侧边进行可拉伸区域标记；根据专用像素计算背景图片的可拉伸区域的像素、可拉伸区域的面积及可拉伸区域的位置信息；基于可拉伸区域的像素、面积和位置信息计算出多个拉伸方向上渐变后的像素数据后，计算可拉伸区域的位置，并将可拉伸区域填充到画布上；通过画布的标签按照所需的图片格式，输出自适应拉伸的背景图片。本发明还涉及自适应背景图片拉伸装置、介质和设备。

说明书

技术领域

本发明涉及图像处理技术领域，尤其涉及一种自适应背景图片拉伸方法方法、装置、介质和设备。

背景技术

目前，现有技术通常是通过切图的方式实现背景图根据内容自适应拉伸，现有技术的切图方法会使图片资源较多，且非常不易管理。

现有的（.9.png）的技术是安卓开发里面的一种特殊的图片，这种格式的图片通过ADT自带的编辑工具生成，使用九宫格切分的方法，使图片支持在android 环境下的自适应展示。该技术需要把png格式的图片经过安卓的工具特殊处理才能使用，且只适用于安卓开发环境。

为解决现有技术中存在的问题，亟需研发提出一种较好解决自适应背景图片拉伸问题的方法，同时能够解决使用一张含有标记像素的图片实现背景图片根据内容自适应调节大小的问题。

发明内容

本发明所要解决的技术问题是针对现有技术的不足，提供一种自适应背景图片拉伸方法、装置、介质和设备。

本发明解决上述技术问题的技术方案如下：

本发明提供一种自适应背景图片拉伸方法，该方法包括：

采用专用像素在背景图片的至少一个侧边进行可拉伸区域标记；

根据专用像素计算背景图片的可拉伸区域的像素、可拉伸区域的面积及可拉伸区域的位置信息；

基于可拉伸区域的像素、面积和位置信息计算出多个拉伸方向上渐变后的像素数据后，计算可拉伸区域的位置，并将可拉伸区域填充到画布上；

通过画布的标签按照所需的图片格式，输出自适应拉伸的背景图片。

优选的，上述采用像素标记在背景图片的至少一个侧边进行可拉伸区域标记，进一步包括：

专用像素使用白色像素对背景图片的上侧和左侧的可拉伸区域进行标记；

白色像素与背景图片间紧密设置。

优选的，上述根据专用像素计算背景图片的可拉伸区域的像素、可拉伸区域的面积及可拉伸区域的位置信息，进一步包括：

将背景图片填充在离屏画布上，取出画布中第一行和第一列的像素，获得标记的白色像素的位置及白色像素的长度，计算背景图片的可拉伸区域的位置和面积；

根据可拉伸区域的位置和面积，获取固定区域及可拉伸区域的像素，并将可拉伸区域的位置及像素、固定区域的像素进行存储。

优选的，上述基于可拉伸区域的像素、面积和位置信息计算出多个拉伸方向上渐变后的像素数据后，计算可拉伸区域的位置，并将可拉伸区域填充到画布上，进一步包括：

可拉伸区域包括横向拉伸区域、纵向拉伸区域及横向纵向拉伸区域，根据横向拉伸区域横向每行像素的首尾像素及首尾像素之间的宽度计算出横向渐变后的像素数据；

根据纵向拉伸区域纵向每列像素的首尾像素及首尾像素之间的高度计算出纵向渐变后的像素数据；

横向纵向拉伸区域，先进行横向拉伸的像素数据计算，再进行纵向拉伸的像素数据计算；

根据横向拉伸区域、纵向拉伸区域及横向纵向拉伸区域的像素数据，重新计算各区域的位置，根据各区域的像素、位置、大小重新填充画布。

本发明实施还提供一种自适应背景图片拉伸装置，采用如上所述自适应背景图片拉伸方法，该装置包括：

标记模块：采用专用像素在背景图片的至少一个侧边进行可拉伸区域标记；

可拉伸区域计算模块：根据专用像素计算背景图片的可拉伸区域的像素、可拉伸区域的面积及可拉伸区域的位置信息；

拉伸渐变计算模块：基于可拉伸区域的像素、面积和位置信息计算出多个拉伸方向上渐变后的像素数据后，计算可拉伸区域的位置，并将可拉伸区域填充到画布上；

图片输出模块：通过画布的标签按照所需的图片格式，输出自适应拉伸的背景图片。

优选的，标记模块，进一步包括：

专用像素标记模块：专用像素使用白色像素对背景图片的上侧和左侧的可拉伸区域进行标记；

边缘设置模块：白色像素与背景图片边缘紧密设置。

优选的，可拉伸区域计算模块，进一步包括：

第一可拉伸区域计算模块：将背景图片填充在离屏画布上，取出画布中第一行和第一列的像素，获得标记的白色像素的位置及白色像素的长度，计算背景图片的可拉伸区域的位置和面积；

第二可拉伸区域计算模块：根据可拉伸区域的位置和面积，获取固定区域及可拉伸区域的像素，并将可拉伸区域的位置及像素、固定区域的像素进行存储。

优选的，拉伸渐变计算模块，进一步包括：

第一拉伸渐变计算模块：可拉伸区域包括横向拉伸区域、纵向拉伸区域及横向纵向拉伸区域，根据横向拉伸区域横向每行像素的首尾像素及首尾像素之间的宽度计算出横向渐变后的像素数据；

第二拉伸渐变计算模块：根据纵向拉伸区域纵向每列像素的首尾像素及首尾像素之间的高度计算出纵向渐变后的像素数据；

第三拉伸渐变计算模块：横向纵向拉伸区域，先进行横向拉伸的像素数据计算，再进行纵向拉伸的像素数据计算；

填充模块：根据横向拉伸区域、纵向拉伸区域及横向纵向拉伸区域的像素数据，重新计算各区域的位置，根据各区域的像素、位置、大小重新填充画布。

本发明提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述的自适应背景图片拉伸方法的步骤。

本发明提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现如上的自适应背景图片拉伸方法的步骤。

本方法发明的有益效果是：

1）本发明提出只需要用一张图片，就可以实现背景图片自适应，而现有方案需要手动切成多张图片；

2）本发明方案对图片格式没有任何要求，而现有方案（.9.png）是安卓开发里面的一种特殊的图片，只能在安卓开发环境下才具有自适应调节大小的能力。

本发明附加的方面的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明实践了解到。

附图说明

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

图1为本发明自适应背景图片拉伸方法流程图；

图2为本发明具体实施例自适应背景图片拉伸方法流程图；

图3为本发明具体实施例背景图片标记示意图；

图4为本发明具体实施例可拉伸区域示意图；

图5为为本发明具体实施例画布填充示意图；

图6为本发明自适应背景图片拉伸装置示意图。

具体实施方式

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

本发明旨在解决使用一张含有标记像素的图片实现背景图片根据内容自适应调节大小问题。

本发明解决上述技术问题的技术方案如下：如图1所示，本发明提供一种自适应背景图片拉伸方法，该方法包括：

S10：采用专用像素在背景图片的至少一个侧边进行可拉伸区域标记；

S20：根据专用像素计算背景图片的可拉伸区域的像素、可拉伸区域的面积及可拉伸区域的位置信息；

S30：基于可拉伸区域的像素、面积和位置信息计算出多个拉伸方向上渐变后的像素数据后，计算可拉伸区域的位置，并将可拉伸区域填充到画布上；

S40：通过画布的标签按照所需的图片格式，输出自适应拉伸的背景图片。

优选的，上述S10采用像素标记在背景图片的至少一个侧边进行可拉伸区域标记，进一步包括：

专用像素使用白色像素对背景图片的上侧和左侧的可拉伸区域进行标记；

白色像素与背景图片间紧密设置。

优选的，上述S20根据专用像素计算背景图片的可拉伸区域的像素、可拉伸区域的面积及可拉伸区域的位置信息，进一步包括：

将背景图片填充在离屏画布上，取出画布中第一行和第一列的像素，获得标记的白色像素的位置及白色像素的长度，计算背景图片的可拉伸区域的位置和面积；

根据可拉伸区域的位置和面积，获取固定区域及可拉伸区域的像素，并将可拉伸区域的位置及像素、固定区域的像素进行存储。

优选的，上述S30基于可拉伸区域的像素、面积和位置信息计算出多个拉伸方向上渐变后的像素数据后，计算可拉伸区域的位置，并将可拉伸区域填充到画布上，进一步包括：

可拉伸区域包括横向拉伸区域、纵向拉伸区域及横向纵向拉伸区域，根据横向拉伸区域横向每行像素的首尾像素及首尾像素之间的宽度计算出横向渐变后的像素数据；

根据纵向拉伸区域纵向每列像素的首尾像素及首尾像素之间的高度计算出纵向渐变后的像素数据；

横向纵向拉伸区域，先进行横向拉伸的像素数据计算，再进行纵向拉伸的像素数据计算；

根据横向拉伸区域、纵向拉伸区域及横向纵向拉伸区域的像素数据，重新计算各区域的位置，根据各区域的像素、位置、大小重新填充画布。

以下结合附图对本发明具体实施例进行详细说明：

本发明具体实施例中采用为提升效率，像素处理的工作在线程（WebWorker）中进行。

如图2所示，本发明具体实施例方法流程：

1、如图3所示，在背景图片上用像素标记出可拉伸的区域，具体是在图片的上侧和左侧标记可扩展区域。

1.1使用白色像素对图片的上侧和左侧的可拉伸区域进行标记。白色像素与背景图片间不可有缝隙。

1.2可拉伸区域不能存在不可拉伸的形状，如人物照片、几何图形等。

2、如图4所示，获取到原始图片中，固定大小区域和可拉伸区域的像素、大小和位置信息，可以把图片填充在canvas上，根据标记条读取可扩展区域像素和固定大小区域。

2.1在子线程中把图片填充在离屏画布（OffscreenCanvas）上，取出画布中第一行和第一列的像素，得到标记的白色像素的位置（h1、h2、v1、v2）、长度，计算出原始图片可拉伸区域（2、4、5、6、8）的位置和大小。

2.2根据可拉伸区域的位置和大小，取出固定大小区域（1、3、7、9）及可拉伸区域的像素，同区域位置一并存储在数组里。

3、如图5所示，各区域的像素信息根据实际需要填充的内容计算出可拉伸区域的拉伸结果，根据可拉伸区域的拉伸结果计算出各区域的正确位置，并填充在画布中。

3.1需要横向拉伸区域（2、8），根据每行像素的首尾像素及实际的宽度计算出渐变后的像素数据。需要纵向拉伸区域（4、6），根据每列像素的首尾像素及实际的高度计算出渐变后的像素数据。既需要横向拉伸，又需要纵向拉伸区域（5），先进行横向拉伸区域，再进行纵向拉伸。

3.2根据可拉伸区域的像素数据，重新计算各区域的位置，根据各区域的像素、位置、大小重新填充画布。

4、把离屏画布（OffscreenCanvas）转成位图对象（ImageBitmap）传给主线程。在主线程中可以通过画布（canvas）标签，把位图对象转成想要的图片格式。

本发明实施还提供一种自适应背景图片拉伸装置，如图6所示，采用如上所述自适应背景图片拉伸方法，该装置包括：

标记模块10：采用专用像素在背景图片的至少一个侧边进行可拉伸区域标记；

可拉伸区域计算模块20：根据专用像素计算背景图片的可拉伸区域的像素、可拉伸区域的面积及可拉伸区域的位置信息；

拉伸渐变计算模块30：基于可拉伸区域的像素、面积和位置信息计算出多个拉伸方向上渐变后的像素数据后，计算可拉伸区域的位置，并将可拉伸区域填充到画布上；

图片输出模块40：通过画布的标签按照所需的图片格式，输出自适应拉伸的背景图片。

优选的，标记模块10，进一步包括：

专用像素标记模块：专用像素使用白色像素对背景图片的上侧和左侧的可拉伸区域进行标记；

边缘设置模块：白色像素与背景图片边缘紧密设置。

优选的，可拉伸区域计算模块20，进一步包括：

第一可拉伸区域计算模块：将背景图片填充在离屏画布上，取出画布中第一行和第一列的像素，获得标记的白色像素的位置及白色像素的长度，计算背景图片的可拉伸区域的位置和面积；

第二可拉伸区域计算模块：根据可拉伸区域的位置和面积，获取固定区域及可拉伸区域的像素，并将可拉伸区域的位置及像素、固定区域的像素进行存储。

优选的，拉伸渐变计算模块30，进一步包括：

第一拉伸渐变计算模块：可拉伸区域包括横向拉伸区域、纵向拉伸区域及横向纵向拉伸区域，根据横向拉伸区域横向每行像素的首尾像素及首尾像素之间的宽度计算出横向渐变后的像素数据；

第二拉伸渐变计算模块：根据纵向拉伸区域纵向每列像素的首尾像素及首尾像素之间的高度计算出纵向渐变后的像素数据；

第三拉伸渐变计算模块：横向纵向拉伸区域，先进行横向拉伸的像素数据计算，再进行纵向拉伸的像素数据计算；

填充模块：根据横向拉伸区域、纵向拉伸区域及横向纵向拉伸区域的像素数据，重新计算各区域的位置，根据各区域的像素、位置、大小重新填充画布。

本发明提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述的自适应背景图片拉伸方法的步骤。

本发明提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上所述的自适应背景图片拉伸方法的步骤。

与现有技术相比，本发明方案只需要用一张图片，就可以实现背景图片自适应，而现有方案需要手动切成多张图片。本方案对图片格式没有任何要求，而现有方案（.9.png）是安卓开发里面的一种特殊的图片，只能在安卓开发环境下才具有自适应调节大小的能力。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

在本发明所提供的实施例中，应该理解到，所揭露的装置/终端设备和方法，可以通过其它的方式实现。例如，以上所描述的装置/终端设备实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个装置，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。

基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM， Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括是电载波信号和电信信号。

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

以上，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。