CN105373525A - 直邮制作方法及系统 - Google Patents

Abstract

本申请公开了一种直邮制作方法及系统，方法包括：将背景图片呈现在预设的可视化界面的预设区域；记录在所述背景图片上框选出的矩形区域的信息以及为所述矩形区域所设置的填充信息；根据所述矩形区域的信息循环对所述背景图片的区域进行表格划分，使得所述矩形区域分别位于一个独立的单元格中；对所述矩形区域设置对应的填充信息后生成表格代码发送到直邮目标客户的邮箱地址，并根据所述矩形区域的信息以及所述填充信息生成直邮对应的在线WEB页面上传到服务器。本公开的技术方案能够使表格中所包含的各个目标区域均单独位于一个独立的单元格中，从而便于排版以及便于对各独立表格元素进行控制。

Description

直邮制作方法及系统

技术领域

本公开总体涉及媒体通信技术领域，具体而言，涉及一种直邮制作方法及系统。

背景技术

直邮一般是指平时发送到公司内部邮箱或者第三方供应商的邮箱里面，宣传商品或者提示中奖之类的邮件，其目的大致可归纳为：在一定期间内，扩大营业额，并提高毛利率；稳定已有的顾客群并吸引增加新顾客，以提高客流量；介绍新产品、时令商品或公司重点推广的商品，以稳定消费群；增加特定商品(新产品、季节性商品、自有商品等)的销售，以提高人均消费额；增强企业形象，提高公司知名度；与同行业举办的促销活动竞争；刺激消费者的计划性购买和冲动性购买，提高商场营业额等。

直邮内容一般存在几个可点击区域，跳转到不同的网页，或者有几个可选择的文字区域，比如激活码之类的，以及有动态的图片展示等等，位置不固定，大小不固定，都属于自定义化比较高的内容，而且直邮展示的内容需要有一个对应一模一样的在线web页面，方便在邮箱中展示不出图片时，直邮接收者可以点击直邮跳转到对应的在线页面查看。这种直邮，一般是由开发人员来制作完成，因为涉及到技术相关问题，一般制作时间较长。

由于第三方供应商以及公司内部的群发邮箱系统，是会屏蔽选择区域采用绝对定位的样式，所以，目前采用的定位方式通常用table表格方式，类似excel的表格，可以合并，拉伸出不同区域，区域填充不同的内容。

相关技术制作直邮的方式一般为，让开发人员针对直邮的背景图从上到下进行横向切割多个选择区域，如图1所示，针对每个选择区域，填充图片或者添加响应事件，需要手动设定每个区域的高即可，因为宽固定为直邮的宽，最后根据这个规则生成table表格的代码。

由于选择区域是自上而下横向的大区域，做不到同一行内出现多个图片或者响应事件，导致同一行响应事件被迫设置为一样的；不能针对性的在指定区域放置需要的内容与事件，比如“Android下载”与“iPhone下载”，只能响应整行点击，会出现鼠标并非点击“下载按钮”，却响应了下载事件，因为点击的区域与“下载按钮”同行，不便于对各独立表格元素进行控制。而且，对于选择区域中添加的文字、图片等，需要很费劲才能使其居中或者摆放到想要的位置上，不便于排版。

发明内容

本公开提供一种直邮制作方法及系统，能够使表格中所包含的各个目标区域均单独位于一个独立的单元格中，从而便于排版以及便于对各独立表格元素进行控制。

本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。

根据本公开的一方面，本公开提供了一种直邮制作方法，包括：

将背景图片呈现在预设的可视化界面的预设区域；

记录在所述背景图片上框选出的矩形区域的信息以及为所述矩形区域所设置的填充信息，其中所述矩形区域的信息包括所述矩形区域的横坐标、纵坐标、宽度、以及高度；

根据所述矩形区域的信息循环对所述背景图片的区域进行表格划分，使得所述矩形区域分别位于一个独立的单元格中；

对所述矩形区域设置对应的填充信息后生成表格代码发送到直邮目标客户的邮箱地址，并根据所述矩形区域的信息以及所述填充信息生成直邮对应的在线WEB页面上传到服务器。

根据本公开的一实施方式，在记录在所述背景图片上框选出的矩形区域的信息之前，在所述背景图片上实时显示所述制作人员在所述背景图片上框选所述矩形区域的轨迹。

根据本公开的一实施方式，记录所述制作人员为所述矩形区域所设置的填充信息的操作包括：

记录所述制作人员为所述矩形区域所设置的连接地址、链接图片和/或文本。

根据本公开的一实施方式，所述根据所述矩形区域的信息循环对所述背景图片的区域进行表格划分的操作包括：

步骤S1、遍历所有的矩形区域，根据所述所有的矩形区域的纵坐标及高度将所述背景图片的区域划分为至少一个横向表格，以使每一横向表格包含最少数量的矩形区域；

步骤S2、遍历所有的横向表格，根据所述所有的矩形区域的横坐标及宽度将所述背景图片的区域划分为至少一个纵向表格，以使每一纵向表格包含最少数量的矩形区域；

步骤S3、遍历所有的纵向表格，若其中存在纵向表格包含至少两个矩形区域，则根据所包含的矩形区域的纵坐标及高度将所述纵向表格划分为至少一个横向表格，以使每一横向表格包含最少数量的矩形区域；

步骤S4、遍历所有的横向表格，若其中存在横向表格包含至少两个矩形区域，则根据所包含的矩形区域的横坐标及宽度将所述横向表格划分为至少一个纵向表格，以使每一纵向表格包含最少数量的矩形区域；

重复执行步骤S3-S4,直到每一矩形区域分别位于一个独立的单元格为止。

根据本公开的一实施方式，所述步骤S1具体包括，将矩形区域Ri的纵坐标Y到纵坐标Y加上所述矩形区域Ri的高度之间在所述背景图片上形成的横向表格称为Ci，若所述横向表格Ci与其他矩形区域重叠，则对所述横向表格Ci的宽度进行延伸直到不与其他矩形区域重叠，再从所述背景图片的区域划出所述横向表格Ci，遍历完所有的矩形区域后，在所述背景图片上形成横向表格C1-Cn；

所述步骤S2具体包括，遍历所有的横向表格C1-Cn，若其中存在横向表格包含至少两个矩形区域，则根据所包含的至少两个矩形区域的横坐标及宽度将所述横向表格Ci进一步划分为多个列向表格，将矩形区域Ri的纵坐标Y到纵坐标Y加上所述矩形区域Ri的高度之间在所述背景图片上形成的横向表格称为Ci，若所述横向表格Ci与其他矩形区域重叠，则对所述横向表格Ci的宽度进行延伸直到不与其他矩形区域重叠，再从所述背景图片的区域划出所述横向表格Ci，遍历完所有的矩形区域后，在所述背景图片上形成横向表格C1-Cn。

根据本公开的一方面，本公开还提供了一种直邮制作系统，包括：

背景图片呈现单元，用于将背景图片呈现在预设的可视化界面的预设区域；

区域信息记录单元，用于记录在所述背景图片上框选出的矩形区域的信息以及为所述矩形区域所设置的填充信息，其中所述矩形区域的信息包括所述矩形区域的横坐标、纵坐标、宽度、以及高度；

表格划分单元，用于根据所述矩形区域的信息循环对所述背景图片的区域进行表格划分，使得所述矩形区域分别位于一个独立的单元格中；

直邮发送单元，用于对所述矩形区域设置对应的填充信息后生成表格代码发送到直邮目标客户的邮箱地址，并根据所述矩形区域的信息以及所述填充信息生成直邮对应的在线WEB页面上传到服务器。

根据本公开的一实施方式，所述系统还包括框选轨迹显示单元，用于在记录在所述背景图片上框选出的矩形区域的信息之前，在所述背景图片上实时显示在所述背景图片上框选所述矩形区域的轨迹。

根据本公开的一实施方式，所述区域信息记录单元具体用于，记录为所述矩形区域所设置的连接地址、链接图片和/或文本。

根据本公开的一实施方式，所述表格划分单元还包括：

横向划分子单元，用于遍历所有的矩形区域，根据所述所有的矩形区域的纵坐标及高度将所述背景图片的区域划分为至少一个横向表格，以使每一横向表格包含最少数量的矩形区域；

纵向划分子单元，用于遍历所有的横向表格，根据所述所有的矩形区域的横坐标及宽度将所述背景图片的区域划分为至少一个纵向表格，以使每一纵向表格包含最少数量的矩形区域；

横向分隔子单元，用于遍历所有的纵向表格，若其中存在纵向表格包含至少两个矩形区域，则根据所包含的矩形区域的纵坐标及高度将所述纵向表格划分为至少一个横向表格，以使每一横向表格包含最少数量的矩形区域；

纵向分隔子单元，用于遍历所有的横向表格，若其中存在横向表格包含至少两个矩形区域，则根据所包含的矩形区域的横坐标及宽度将所述横向表格划分为至少一个纵向表格，以使每一纵向表格包含最少数量的矩形区域；

重复通过所述横向分隔子单元以及所述纵向分隔子单元分隔包含至少两个矩形区域的单元格，直到每一矩形区域分别位于一个独立的单元格为止。

根据本公开的一实施方式，所述横向划分子单元具体用于，将矩形区域Ri的纵坐标Y到纵坐标Y加上所述矩形区域Ri的高度之间在所述背景图片上形成的横向表格称为Ci，若所述横向表格Ci与其他矩形区域重叠，则对所述横向表格Ci的宽度进行延伸直到不与其他矩形区域重叠，再从所述背景图片的区域划出所述横向表格Ci，遍历完所有的矩形区域后，在所述背景图片上形成横向表格C1-Cn；

所述纵向划分子单元具体用于，遍历所有的横向表格C1-Cn，若其中存在横向表格包含至少两个矩形区域，则根据所包含的至少两个矩形区域的横坐标及宽度将所述横向表格Ci进一步划分为多个列向表格，将矩形区域Ri的纵坐标Y到纵坐标Y加上所述矩形区域Ri的高度之间在所述背景图片上形成的横向表格称为Ci，若所述横向表格Ci与其他矩形区域重叠，则对所述横向表格Ci的宽度进行延伸直到不与其他矩形区域重叠，再从所述背景图片的区域划出所述横向表格Ci，遍历完所有的矩形区域后，在所述背景图片上形成横向表格C1-Cn。

根据本公开的技术方案能够使表格中所包含的各个目标区域均单独位于一个独立的单元格中，从而便于排版以及便于对各独立表格元素进行控制。

附图说明

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

通过参照附图详细描述其示例实施例，本公开的上述和其它目标、特征及优点将变得更加显而易见。

图1示意性示出现有技术所述的直邮制作方法生成的table表格的代码；

图2示意性示出根据本公开示例实施例一所述的直邮制作方法流程图；

图3示意性示出根据本公开示例实施例二所述的直邮制作方法流程图；

图4示意性示出根据本公开示例实施例二所述的在背景图片上框选矩形框的示意图；

图5示意性示出根据本公开示例实施例二所述的为矩形区域设置点击链接的示意图；

图6示意性示出根据本公开示例实施例二所述的为矩形区域设置文本链接的示意图；

图7示意性示出根据本公开示例实施例二所述的直邮制作方法中划分表格以及完成制作的流程图；

图8示意性示出根据本公开示例实施例二所述的对矩形区域按行进行分组的示意图；

图9示意性示出根据本公开示例实施例二所述的对矩形区域按列进行分组的示意图；

图10示意性示出根据本公开示例实施例二所述的对矩形区域再按行进行分组的示意图；

图11示意性示出根据本公开示例实施例三所述的直邮制作系统结构框图；

图12示意性示出根据本公开示例实施例四所述的直邮制作系统结构框图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中，提供许多具体细节从而给出对本公开的实施方式的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而省略所述特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知结构、方法、装置、实现、材料或者操作以避免喧宾夺主而使得本公开的各方面变得模糊。

附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

为使本发明解决的技术问题、采用的技术方案和达到的技术效果更加清楚，下面将结合附图对本发明实施例的技术方案作进一步的详细描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

下面结合附图并通过具体实施方式来进一步说明本发明的技术方案。

实施例一

图1是本实施例所述的直邮制作方法流程图，本实施例可适用于制作使表格中所包含的各个目标区域均单独位于一个独立的单元格中的直邮的情况，如图1所示，本实施例所述的直邮制作方法包括：

本实施例通过步骤S210将背景图片呈现在预设的可视化界面的预设区域。

本实施例需要提供一种可视化界面，通过该可视化界面接收制作人员的操作信息。包括接收制作人员选择背景图片，将背景图片呈现在该可视化界面的预设区域等，并且在制作人员在所选择背景图片上操作时，所述可视化界面还用于对制作人员的操作进行响应。

当本实施例的执行主体是电脑时，制作人员对所述可视化界面的操作可以是通过键盘和/或鼠标，当本实施例的执行主体具有触摸屏时，制作人员对所述可视化界面的操作可以是制作人员通过手指或触控笔在所述可视化界面上的触摸、点击、划动等触控操作。

所述预设区域是指在所述可视化界面中预设的用于呈现背景图片的区域，通常设置在所述可视化界面的主要部位，而且面积应当设置得较大，便于制作人员在该背景图片上操作。例如便于制作人员在该背景图片上划出预填充其他文字信息、链接信息、和/或的图片信息的区域范围等操作。

本实施例通过步骤S220记录在所述背景图片上框选出的矩形区域的信息以及为所述矩形区域所设置的填充信息。

其中所述矩形区域的信息可包括所述矩形区域的横坐标、纵坐标、宽度、以及高度，还可包括所述矩形区域的两对角点坐标，如坐上角和右下角坐标。

制作人员选择合乎要求的背景图片之后，将所述背景图片显示在所述可视化界面的预设区域，即可在该预设区域中的背景图片上划出需要填充其他文字信息、链接信息、和/或的图片信息的区域范围。

需要说明的是，通过鼠标或对触摸屏进行触控的方式要画出绝对符合要求的矩形区域相当难，为了提高制作人员的操作效率，本实施例并不要求制作人员画出严格的矩形框，而是只要求制作人员在背景图片上画出封闭的圈就行。对过对封闭圈按照给定的算法进行加工处理而生成矩形，例如求取封闭圈的外接矩形或求取封闭圈的近似矩形作为制作人员划出的矩形框。

为了即时显示用户的操作内容以给制作人员直观的感受和及时的响应，本实施例可以在制作人员在所述背景图片上以触屏划动的方式或者以鼠标划动的方式画封闭圈时，可以实时在该背景图片上显示该制作人员的绘制轨迹，在轨迹封闭时，可实时显示出根据该封闭圈生成的矩形框。

进一步地，为了便于制作人员对生成的矩形框进行修改调整，还可提供编辑接品允许制作人员对生成的矩形框进行编辑，例如选中该矩形框、移动该矩形框、放大或缩小该矩形框、横向拉绅或缩短该矩形框、和/或纵向拉绅或缩短该矩形框等。

制作人员绘制完矩形框之后，本实施例还可提供可视化接口，用于制作人员为矩形框设置填充信息，包括连接地址、链接图片和/或文本等信息。该用户为矩形框设置填充信息的操作的接口，可以支持用户每完成一个矩形框绘制后及时操作，也可支持用户将所有需要绘制的矩形框绘制完成之后，通过选中矩形框分别为各当前选中的矩形框设置填充信息。

本实施例通过步骤S230根据所述矩形区域的信息循环对所述背景图片的区域进行表格划分，使得所述矩形区域分别位于一个独立的单元格中。

本步骤的目的在于，所述背景图片的区域进行表格划分之后，各矩形区域分别位于一个独立的单元格中，即每一独立单元格最多包含一个矩形区域，从而便于排版以及便于对各独立表格元素进行控制。

其具体方法可包括多种，例如，可通过如下步骤实现：

步骤一、遍历所有的矩形区域，根据所述所有的矩形区域的纵坐标及高度将所述背景图片的区域划分为至少一个横向表格，以使每一横向表格包含最少数量的矩形区域。

例如，具体包括，将矩形区域Ri的纵坐标Y到纵坐标Y加上所述矩形区域Ri的高度之间在所述背景图片上形成的横向表格称为Ci，若所述横向表格Ci与其他矩形区域重叠，则对所述横向表格Ci的宽度进行延伸直到不与其他矩形区域重叠，再从所述背景图片的区域划出所述横向表格Ci，遍历完所有的矩形区域后，在所述背景图片上形成横向表格C1-Cn。

步骤二、遍历所有的横向表格，根据所述所有的矩形区域的横坐标及宽度将所述背景图片的区域划分为至少一个纵向表格，以使每一纵向表格包含最少数量的矩形区域。

例如，遍历所有的横向表格C1-Cn，若其中存在横向表格包含至少两个矩形区域，则根据所包含的至少两个矩形区域的横坐标及宽度将所述横向表格Ci进一步划分为多个列向表格，将矩形区域Ri的纵坐标Y到纵坐标Y加上所述矩形区域Ri的高度之间在所述背景图片上形成的横向表格称为Ci，若所述横向表格Ci与其他矩形区域重叠，则对所述横向表格Ci的宽度进行延伸直到不与其他矩形区域重叠，再从所述背景图片的区域划出所述横向表格Ci，遍历完所有的矩形区域后，在所述背景图片上形成横向表格C1-Cn。

步骤三、遍历所有的纵向表格，若其中存在纵向表格包含至少两个矩形区域，则根据所包含的矩形区域的纵坐标及高度将所述纵向表格划分为至少一个横向表格，以使每一横向表格包含最少数量的矩形区域。

步骤四、遍历所有的横向表格，若其中存在横向表格包含至少两个矩形区域，则根据所包含的矩形区域的横坐标及宽度将所述横向表格划分为至少一个纵向表格，以使每一纵向表格包含最少数量的矩形区域；

重复执行步骤三至步骤四,直到每一矩形区域分别位于一个独立的单元格为止。

本实施例通过步骤S240对所述矩形区域设置对应的填充信息后生成表格代码发送到直邮目标客户的邮箱地址，并根据所述矩形区域的信息以及所述填充信息生成直邮对应的在线WEB页面上传到服务器。

本实施例通过在呈现背景图片之后，根据在背景图片上框选出的矩形区域的信息以及为所述矩形区域所设置的填充信息，对背景图片的区域进行表格划分，使得所述矩形区域分别位于一个独立的单元格中。能够使表格中所包含的各个目标区域均单独位于一个独立的单元格中，从而便于排版以及便于对各独立表格元素进行控制。

实施例二

图3是本实施例所述的直邮制作方法流程图，本实施例在实施例一的基础之上，本实施例以制作人员通过电脑来制作直邮，其中通过鼠标操作来对可视化界面进行操作为例说明制作直邮的方法。如图3所示，本实施例所述的直邮制作方法包括：

本实施例通过步骤S310实现可视化界面。

操作界面实现。界面采用网页实现的方式，默认情况下，界面中间显示一个“+”号，实际上是一个透明度为零的input文件选择按钮，作用是点击后可以让用户选择一个文件，当用户点击选择一张图片作为直邮背景图，利用FileReader对象获取用户选择的文件，判断文件类型是否图片，如果不是则提示用户选择错误；再利用readAsDataURL函数获取图片的Base64字符编码，将此编码设置在img标签的src属性，则能显示出用户刚刚选择的图片。

监听用户的鼠标在背景图的所有事件。当鼠标点击在背景图的任意地方时候，开启勾选区域模式，当鼠标在图片上移动的时候，展示出勾选的区域，例如，显示为蓝色以区别于背景图，当鼠标点击放开的时候，表示确定了框选出来的区域。

本实施例通过步骤S320监听用户的鼠标在背景图片的操作事件。

鼠标单击蓝色矩形区域，可以修改矩形区域的大小以及位置。如下图4所示。鼠标双击蓝色区域，可以为选中区域填充内容以及响应事件，如图5-6所示。

输入需要的内容后，能够实时看到效果，及时调整内容。

本实施例通过步骤S330划分表格，完成制作。

本步骤的算法实现包括：用户操作界面中，采用的是绝对定位的方式来显示，但最终保存为直邮时候并不能这么做，因为邮件系统会把绝对定位信息给过滤掉，能兼容所有浏览器和邮件系统的，就只有table表格布局了。

操作界面中，会将用户框选的所有内容保存起来，其中包括矩形区域的x坐标，y坐标，宽度，高度，以及填充的内容，以及会记录直邮背景图的大小，作为布局的边界。

本步骤通过图7示意性示出本步骤中直邮制作方法中划分表格以及完成制作的流程图，如图7所示，本步骤具体包括如下子步骤：

本实施例通过步骤S710遍历所有的矩形区域，对矩形区域按行进行分组，遍历完所有的区域，将区域都分好组，分出组A1-An。

遍历所有的矩形区域，对矩形区域进行分组，分组名设定为A，分组的依据是每个区域的y坐标到y坐标加上区域高度之间，在这个横向的面积中(如图8的分组A1)，不存在与其他区域重叠，则分为分组A1；如果存在(如图8的分组A2)，则将面积往下拉伸，找到区域3的y坐标加上高度，在这个横向面积中，没有与其他区域重叠的，这分为分组A2。

按照步骤一的方式，遍历完所有的区域，将区域都分好组，分出组A1-An。

本实施例通过步骤S720遍历分组A1-An，对每个分组的区域，再次按列进行分组，划分出更细的分组A1-n到An-n。

遍历分组A1-An，对每个分组的区域，再次进行分组，分组的依据是每个区域x坐标到x坐标加上宽度之间，在这个纵向的面积中(如图9所示的分组A1-a)，如果不存在与其他的区域重叠的情况，那么分为分组A1-a；如果存在(如图9所示的分组A2-a)，这将纵向面积往右侧拉伸，找到下一个区域5，判断区域2的x坐标到区域5的x坐标加上宽度的面积中，是否存在其它其它叠加区域，不存在，则分为分组A2-a；如果存在则继续之前步骤。

按照步骤二的方式，遍历完所有的步骤一分组，划分出更细的分组A1-n到An-n出来。

本实施例通过步骤S730遍历所有的分组An-n，判断该分组中是否有且只有一个区域，如果是，跳过；如果不是，将该分组重复进行步骤一与步骤二的操作，直到所有的区域都单独划分在一个分组中。

遍历所有的分组An-n，判断该分组中是否有且只有一个区域，如果是，跳过；如果不是，将该分组进行步骤一与步骤二的操作，最多进行三次重复分组，能将99％以上的情况把所有的区域都单独划分在一个分组中(如图10)。

本实施例通过步骤S740根据分好的组划分和合并表格出来。

根据步骤四分好的组，来划分和合并table出来，根据图10中横宽的线，制作一个7行1列的表格A，每一行的的高度根据步骤一中的分组A的y坐标与高度而定，从0开始，0到分组A1的的y坐标为一个高度，分组A1的y坐标到分组A1的y坐标加上高度为第二个高度，如此类推出所有的高度；在表格A的第二行添加一个1行3列的表格A1，每一列的高宽根据步骤二中的分组An-n的x坐标与宽度而定，从0开始，0到分组A1-a的x坐标为一个宽度，分组A1-a的x坐标到A1-a的x坐标加宽度为第二个宽度，如此类推出所有宽度；其中第二列有且只有一个区域，所以填充区域1的具体内容到表格中。

本实施例通过步骤S750遍历完分组A中的所有分组，判断出表格中的列有且只有一个区域，则停止遍历这个分组，并且填充区域内容到表格中；如果判断列中存在多个区域，则需要将此列循环调用步骤S704的操作，直到列中只有一个区域即可，然后填充对应的区域内容。

遍历完分组A中的所有分组，判断出表格中的列有且只有一个区域，则停止遍历这个分组，并且填充区域内容到表格中；如果判断列中存在多个区域，则需要将此列循环调用步骤四的操作，最多三次，直到列中只有一个区域即可，然后填充对应的区域内容。

本实施例通过步骤S760将填充好的表格代码生成出来。

将步骤五填充好的表格代码生成出来，利用innerHTML方法获取表格代码。

本实施例通过步骤S770生成直邮对应的在线web页面。

生成直邮对应的在线web页面，这个步骤相对简单很多，因为在线web是支持绝对定位的，直接利用用户界面操作保存的数据(x坐标，y坐标，宽度，高度，内容)即可制作对应的页面出来。

本实施例通过步骤S780将生成表格代码发送到邮箱，以及将生成的web页面上传到服务器即可。

将以上生成表格代码发送到邮箱，以及将web页面上传到服务器即可。

本实施例的技术方案降低了操作门槛，完全不需要开发人员参与，解放了开发人员的劳动力，去掉了编辑与开发人员的沟通成本，直邮由原本的制作时间为2小时，降低为5分钟即可完成。

可以自由选择直邮背景图片，利用鼠标在直邮图片中框选出需要的响应区域，对于区域可以选择添加图片、文字、链接等内容，居中居左等随意切换，同一行同一列，可以存在多个区域，点击事件只会响应需要的区域。

能够实时预览做好的效果，操作简单，无需开发人员参与，编辑与产品人员均可完成直邮制作。

本实施例中算法的选用，针对目前直邮不支持绝对定位的方式，所以直邮的布局只能采用table来进行布局，但table是采用矩形方格的方式(类似excel的那种)，需要自定义任意位置、任意大小的区域出来，比较困难，经过多次实践，table需要针对页面上所有自定义区域，进行位置从左到右，上到下的方式排序，根据横向有重合的区域划分为一个大区域，之后再每个横向大区域中划分出纵向大区域，如此递归3次，就能把所有的自定义区域用table的方式划分出来。

本实施例通过可视化窗口及用户操作工具的开发，提供一个可视化界面，让编辑可以在上面自定义勾画出需要的响应区域，最终保存和上传到服务器，以及发送到邮箱中。

实施例三

图11示意性示出根据本公开示例实施例三所述的直邮制作系统结构框图，如图11所示，本实施例所述的直邮制作系统包括：

背景图片呈现单元1110，用于将背景图片呈现在预设的可视化界面的预设区域；

区域信息记录单元1120，用于记录在所述背景图片上框选出的矩形区域的信息以及为所述矩形区域所设置的填充信息，其中所述矩形区域的信息包括所述矩形区域的横坐标、纵坐标、宽度、以及高度；

表格划分单元1130，用于根据所述矩形区域的信息循环对所述背景图片的区域进行表格划分，使得所述矩形区域分别位于一个独立的单元格中；

直邮发送单元1140，用于对所述矩形区域设置对应的填充信息后生成表格代码发送到直邮目标客户的邮箱地址，并根据所述矩形区域的信息以及所述填充信息生成直邮对应的在线WEB页面上传到服务器。

进一步地，所述系统还包括框选轨迹显示单元(图11中未示出)，用于在记录在所述背景图片上框选出的矩形区域的信息之前，在所述背景图片上实时显示在所述背景图片上框选所述矩形区域的轨迹。

进一步地，所述区域信息记录单元1120具体用于，记录为所述矩形区域所设置的连接地址、链接图片和/或文本。

本实施例提供的直邮制作系统可执行本发明实施例一和实施例二所提供的直邮制作方法，具备执行方法相应的功能模块和有益效果。

实施例四

图12示意性示出根据本公开示例实施例四所述的直邮制作系统结构框图，如图12所示，本实施例所述的直邮制作系统包括：

背景图片呈现单元1210，用于将背景图片呈现在预设的可视化界面的预设区域；

区域信息记录单元1220，用于记录在所述背景图片上框选出的矩形区域的信息以及为所述矩形区域所设置的填充信息，其中所述矩形区域的信息包括所述矩形区域的横坐标、纵坐标、宽度、以及高度；

进一步地，所述区域信息记录单元1220具体用于，记录为所述矩形区域所设置的连接地址、链接图片和/或文本。

表格划分单元1230，用于根据所述矩形区域的信息循环对所述背景图片的区域进行表格划分，使得所述矩形区域分别位于一个独立的单元格中；

直邮发送单元1240，用于对所述矩形区域设置对应的填充信息后生成表格代码发送到直邮目标客户的邮箱地址，并根据所述矩形区域的信息以及所述填充信息生成直邮对应的在线WEB页面上传到服务器。

进一步地，所述系统还包括框选轨迹显示单元(图12中未示出)，用于在记录在所述背景图片上框选出的矩形区域的信息之前，在所述背景图片上实时显示制作人员在所述背景图片上框选所述矩形区域的轨迹。

进一步地，所述表格划分单元还包括：

横向划分子单元1231，用于遍历所有的矩形区域，根据所述所有的矩形区域的纵坐标及高度将所述背景图片的区域划分为至少一个横向表格，以使每一横向表格包含最少数量的矩形区域；

纵向划分子单元1232，用于遍历所有的横向表格，根据所述所有的矩形区域的横坐标及宽度将所述背景图片的区域划分为至少一个纵向表格，以使每一纵向表格包含最少数量的矩形区域；

横向分隔子单元1233，用于遍历所有的纵向表格，若其中存在纵向表格包含至少两个矩形区域，则根据所包含的矩形区域的纵坐标及高度将所述纵向表格划分为至少一个横向表格，以使每一横向表格包含最少数量的矩形区域；

纵向分隔子单元1234，用于遍历所有的横向表格，若其中存在横向表格包含至少两个矩形区域，则根据所包含的矩形区域的横坐标及宽度将所述横向表格划分为至少一个纵向表格，以使每一纵向表格包含最少数量的矩形区域；

重复通过所述横向分隔子单元1233以及所述纵向分隔子单元1234分隔包含至少两个矩形区域的单元格，直到每一矩形区域分别位于一个独立的单元格为止。

进一步地

所述横向划分子单元1231具体用于，将矩形区域Ri的纵坐标Y到纵坐标Y加上所述矩形区域Ri的高度之间在所述背景图片上形成的横向表格称为Ci，若所述横向表格Ci与其他矩形区域重叠，则对所述横向表格Ci的宽度进行延伸直到不与其他矩形区域重叠，再从所述背景图片的区域划出所述横向表格Ci，遍历完所有的矩形区域后，在所述背景图片上形成横向表格C1-Cn；

所述纵向划分子单元1232具体用于，遍历所有的横向表格C1-Cn，若其中存在横向表格包含至少两个矩形区域，则根据所包含的至少两个矩形区域的横坐标及宽度将所述横向表格Ci进一步划分为多个列向表格，将矩形区域Ri的纵坐标Y到纵坐标Y加上所述矩形区域Ri的高度之间在所述背景图片上形成的横向表格称为Ci，若所述横向表格Ci与其他矩形区域重叠，则对所述横向表格Ci的宽度进行延伸直到不与其他矩形区域重叠，再从所述背景图片的区域划出所述横向表格Ci，遍历完所有的矩形区域后，在所述背景图片上形成横向表格C1-Cn。

本实施例提供的直邮制作系统可执行本发明实施例一和实施例二所提供的直邮制作方法，具备执行方法相应的功能模块和有益效果。

以上实施例提供的技术方案中的全部或部分内容可以通过软件编程实现，其软件程序存储在可读取的存储介质中，存储介质例如：计算机中的硬盘、光盘或软盘。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (10)

1.一种直邮制作方法，其特征在于，包括：

将背景图片呈现在预设的可视化界面的预设区域；

记录在所述背景图片上框选出的矩形区域的信息以及为所述矩形区域所设置的填充信息；

根据所述矩形区域的信息循环对所述背景图片的区域进行表格划分，使得所述矩形区域分别位于一个独立的单元格中；

对所述矩形区域设置对应的填充信息后生成表格代码发送到直邮目标客户的邮箱地址，并根据所述矩形区域的信息以及所述填充信息生成直邮对应的在线WEB页面上传到服务器。

2.如权利要求1所述的方法，其特征在于，所述方法还包括，在记录在所述背景图片上框选出的矩形区域的信息之前，在所述背景图片上实时显示在所述背景图片上框选所述矩形区域的轨迹。

3.如权利要求1所述的方法，其特征在于，记录为所述矩形区域所设置的填充信息的操作包括：

记录为所述矩形区域所设置的连接地址、链接图片和/或文本。

4.如权利要求1所述的方法，其特征在于，所述矩形区域的信息包括所述矩形区域的横坐标、纵坐标、宽度、以及高度；

所述根据所述矩形区域的信息循环对所述背景图片的区域进行表格划分的操作包括：

步骤S1、遍历所有的矩形区域，根据所述所有的矩形区域的纵坐标及高度将所述背景图片的区域划分为至少一个横向表格，以使每一横向表格包含最少数量的矩形区域；

步骤S2、遍历所有的横向表格，根据所述所有的矩形区域的横坐标及宽度将所述背景图片的区域划分为至少一个纵向表格，以使每一纵向表格包含最少数量的矩形区域；

步骤S3、遍历所有的纵向表格，若其中存在纵向表格包含至少两个矩形区域，则根据所包含的矩形区域的纵坐标及高度将所述纵向表格划分为至少一个横向表格，以使每一横向表格包含最少数量的矩形区域；

步骤S4、遍历所有的横向表格，若其中存在横向表格包含至少两个矩形区域，则根据所包含的矩形区域的横坐标及宽度将所述横向表格划分为至少一个纵向表格，以使每一纵向表格包含最少数量的矩形区域；

重复执行步骤S3-S4,直到每一矩形区域分别位于一个独立的单元格为止。

5.如权利要求4所述的方法，其特征在于：

所述步骤S1具体包括，将矩形区域Ri的纵坐标Y到纵坐标Y加上所述矩形区域Ri的高度之间在所述背景图片上形成的横向表格称为Ci，若所述横向表格Ci与其他矩形区域重叠，则对所述横向表格Ci的宽度进行延伸直到不与其他矩形区域重叠，再从所述背景图片的区域划出所述横向表格Ci，遍历完所有的矩形区域后，在所述背景图片上形成横向表格C1-Cn；

所述步骤S2具体包括，遍历所有的横向表格C1-Cn，若其中存在横向表格包含至少两个矩形区域，则根据所包含的至少两个矩形区域的横坐标及宽度将所述横向表格Ci进一步划分为多个列向表格，将矩形区域Ri的纵坐标Y到纵坐标Y加上所述矩形区域Ri的高度之间在所述背景图片上形成的横向表格称为Ci，若所述横向表格Ci与其他矩形区域重叠，则对所述横向表格Ci的宽度进行延伸直到不与其他矩形区域重叠，再从所述背景图片的区域划出所述横向表格Ci，遍历完所有的矩形区域后，在所述背景图片上形成横向表格C1-Cn。

6.一种直邮制作系统，其特征在于，包括：

背景图片呈现单元，用于将背景图片呈现在预设的可视化界面的预设区域；

区域信息记录单元，用于记录在所述背景图片上框选出的矩形区域的信息以及为所述矩形区域所设置的填充信息；

表格划分单元，用于根据所述矩形区域的信息循环对所述背景图片的区域进行表格划分，使得所述矩形区域分别位于一个独立的单元格中；

直邮发送单元，用于对所述矩形区域设置对应的填充信息后生成表格代码发送到直邮目标客户的邮箱地址，并根据所述矩形区域的信息以及所述填充信息生成直邮对应的在线WEB页面上传到服务器。

7.如权利要求6所述的系统，其特征在于，所述系统还包括框选轨迹显示单元，用于在记录在所述背景图片上框选出的矩形区域的信息之前，在所述背景图片上实时显示在所述背景图片上框选所述矩形区域的轨迹。

8.如权利要求6所述的系统，其特征在于，所述区域信息记录单元具体用于，记录为所述矩形区域所设置的连接地址、链接图片和/或文本。

9.如权利要求6所述的系统，其特征在于，所述矩形区域的信息包括所述矩形区域的横坐标、纵坐标、宽度、以及高度；

所述表格划分单元还包括：

横向划分子单元，用于遍历所有的矩形区域，根据所述所有的矩形区域的纵坐标及高度将所述背景图片的区域划分为至少一个横向表格，以使每一横向表格包含最少数量的矩形区域；

纵向划分子单元，用于遍历所有的横向表格，根据所述所有的矩形区域的横坐标及宽度将所述背景图片的区域划分为至少一个纵向表格，以使每一纵向表格包含最少数量的矩形区域；

横向分隔子单元，用于遍历所有的纵向表格，若其中存在纵向表格包含至少两个矩形区域，则根据所包含的矩形区域的纵坐标及高度将所述纵向表格划分为至少一个横向表格，以使每一横向表格包含最少数量的矩形区域；

纵向分隔子单元，用于遍历所有的横向表格，若其中存在横向表格包含至少两个矩形区域，则根据所包含的矩形区域的横坐标及宽度将所述横向表格划分为至少一个纵向表格，以使每一纵向表格包含最少数量的矩形区域；

重复通过所述横向分隔子单元以及所述纵向分隔子单元分隔包含至少两个矩形区域的单元格，直到每一矩形区域分别位于一个独立的单元格为止。

10.如权利要求9所述的系统，其特征在于：

所述横向划分子单元具体用于，将矩形区域Ri的纵坐标Y到纵坐标Y加上所述矩形区域Ri的高度之间在所述背景图片上形成的横向表格称为Ci，若所述横向表格Ci与其他矩形区域重叠，则对所述横向表格Ci的宽度进行延伸直到不与其他矩形区域重叠，再从所述背景图片的区域划出所述横向表格Ci，遍历完所有的矩形区域后，在所述背景图片上形成横向表格C1-Cn；

所述纵向划分子单元具体用于，遍历所有的横向表格C1-Cn，若其中存在横向表格包含至少两个矩形区域，则根据所包含的至少两个矩形区域的横坐标及宽度将所述横向表格Ci进一步划分为多个列向表格，将矩形区域Ri的纵坐标Y到纵坐标Y加上所述矩形区域Ri的高度之间在所述背景图片上形成的横向表格称为Ci，若所述横向表格Ci与其他矩形区域重叠，则对所述横向表格Ci的宽度进行延伸直到不与其他矩形区域重叠，再从所述背景图片的区域划出所述横向表格Ci，遍历完所有的矩形区域后，在所述背景图片上形成横向表格C1-Cn。