在图片上添加热区链接的方法和装置与流程

本发明涉及计算应用技术，特别是涉及一种在图片上添加热区链接的方法和装置。

背景技术：

进入21世纪后，电子商务逐渐占据了广大消费者的视线。现如今，网上购物早已成为人们生活的一部分，人们习惯性打开诸多购物网站，如淘宝、京东等等，搜索出喜欢的商品，然后点击购买。当用户进入购物网站的商品详情页后，会见到各种最佳组合、优惠套装、推荐搭配等，以推荐列表的形式进行打包销售。也可能会在图片上添加多个热点图标，点击热点图标即可跳转到到相应的商品详情页。极个别商品详情页会在商品介绍图片上添加链接热区。

现有的在图片上添加链接热区的方案中，主要是利用html中map,area标签，给图片添加热区，不论是矩形区域、还是多边形区域链接，多是由前端开发人员通过前端设计工具如dreamweaver等在开发阶段完成的，上线运行后便不可再操作了，然而矩形区域不够精确，不规则形状又可能需要维护大数据量顶点集合，加上前端设计工具的上手难度，使得商家很难介入到图片热区的设计中，因此，商家无法通过定制图片热区链接的方式，提供更好的商品推荐方式。

由此可见，现有的给图片添加热区链接的方案无法在系统完成开发之后由商家根据商品推荐需要添加热区链接。

技术实现要素：

有鉴于此，本发明的主要目的在于提供一种在图片上添加热区链接的方法和装置，可以在系统开发完成后给图片添加热区链接。

为了达到上述目的，本发明提出的技术方案为：

一种在图片上添加热区链接的方法，包括：

记录用户当前在图片上用于勾画热区的画线轨迹，得到所述轨迹的点集合；

采用格栅切割的方式，对所述点集合中的轨迹点进行筛选，得到所述热区的精选点集合；

触发所述用户输入所述待添加热区的提示信息和链接信息，将所述图片的名称、所述精选点集合、所述提示信息和所述链接信息作为所述热区的属性配置信息保存；

当所述图片需要被网页加载时，根据所述图片的名称获取该图片对应热区的属性配置信息，并利用预设的网页脚本语言对所获取的属性配置信息进行拼装，网页浏览器根据所述拼装的结果，加载所述图片的所述热区。

一种在图片上添加热区链接的装置，包括：

采集单元，用于记录用户当前在图片上用于勾画热区的画线轨迹，得到所述轨迹的点集合；

筛选单元，用于采用格栅切割的方式，对所述点集合中的轨迹点进行筛选，得到所述热区的精选点集合；

配置单元，用于触发所述用户输入所述待添加热区的提示信息和链接信息，将所述图片的名称、所述精选点集合、所述提示信息和所述链接信息作为所述热区的属性配置信息保存；

显示单元，用于当所述图片需要被网页加载时，根据所述图片的名称获取该图片对应热区的属性配置信息，并利用预设的网页脚本语言对所获取的属性配置信息进行拼装，网页浏览器根据所述拼装的结果，加载所述图片的所述热区。

综上所述，本发明提出在图片上添加热区链接的方法和装置中，在系统开发完成后，用户可以根据需要在图片上勾画出需要添加热区链接的区域范围，并采用格栅切割的方式，对于用户勾画的画线轨迹所对应的点集合进行筛选，将筛选后的点集合、所在图片的名称以及用户输入的热区相关信息作为热区的属性配置信息保存，在显示图片时可以直接获取该图片所对应的所有热区的属性配置信息，并利用网页脚本语言对这些信息进行拼装，通过网页浏览器显示所述拼装的结果，即可在图片上显示出用户所添加的热区链接信息，从而可以在系统开发完成后，实现图片热区链接的添加。

附图说明

图1为本发明实施例的方法流程示意图；

图2为本发明中对画线轨迹对应的矩形区域进行切割的示例图；

图3为本发明实施例的装置结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图及具体实施例对本发明作进一步地详细描述。

本发明的核心思想是：在系统开发完成后，用户可以根据需要在图片上勾画出需要添加热区链接的区域范围，对用户所勾画的区域范围的边界点进行采集并进行筛选，使得筛选后的点集体合可以作为用于定位热区链接的热区属性配置信息进行保存，同时将热区属性配置信息与所在图片相关联，这样，当图片需要加载时，可以将与该图片相关联的所有热区属性配置信息拼装，网页浏览器便可基于该拼装结果加载所述图片的热区，从而可以实现在系统开发完成后在图片上加载热区链的目的。

图1为本发明实施例的方法流程示意图，如图1所示，该实施例实现的在图片上添加热区链接的方法主要包括：

步骤101、记录用户当前在图片上用于勾画热区的画线轨迹，得到所述轨迹的点集合。

本步骤中，将记录用户在图片上对待添加热区的范围进行勾画的画线轨迹，以便在后续步骤中对该轨迹对应的点集合进行筛选，使得筛选后的点集合可以用于对热区进行定位。

较佳地，所述画线轨迹可以为鼠标的拖动轨迹，即用户可以通过鼠标在图片上勾画出待添加热区链接的区域范围。

较佳地，可以利用html5中的画板canvas技术，记录所述画线轨迹。具体地，可以将待添加热区链接的图片(采用上传预览或拖拽的方式)画到canvas上，canvas尺寸与图片尺寸相等，并且图片占据整个canvas(亦可添加宽度width、高度height设置来对canvas尺寸进行调整，以使得图片可以被设定到适当的尺寸)。捕捉canvas上的鼠标事件onmousedown、onmousemove、onmouseup，设置画线状态drawflag＝false。当在canvas上按下鼠标左键时，触发onmousedown事件，此时设置drawflag＝true，开始记录鼠标经过点集，通过事件event入参event.offsetx、event.offsety即可获得鼠标经过点坐标{x:event.offsetx,y:event.offsety}(相对于canvas左上角(0,0)坐标，即图片左上角)，当按住鼠标左键进行轨迹拖动时，拖动过程中会不断触发canvas上的onmousemove事件，当drawflag＝true时(即为画线状态)则记录全部鼠标经过点，可将所有点依次存放在array对象pointarray中,当鼠标左键释放时，触发onmouseup事件，即完成此次点击收集，设置drawflag＝false。在鼠标拖动过程中，可通过canvas中lineto等画线方法，每次连接pointarray中最后加入的两个点，即可画出鼠标拖动轨迹，以直观显示勾画区域，勾画区域即为本次热区范围。

步骤102、采用格栅切割的方式，对所述点集合中的轨迹点进行筛选，得到所述热区的精选点集合。

本步骤，考虑到步骤101中得到的画线轨迹的点集合虽然可以直接用于对图片上所添加的热区进行定位，但是其顶点数量可以会很庞大，包括几百或几千个顶点，如此，会导致热区的属性配置信息太长，一方面会占用太多的存储空间、另一方面也会增加图片的加载时间，从而难以实际应用。因此，本步骤中将对步骤101中得到的画线轨迹的点集合进行筛选，去掉其中的冗余顶点，以避免新添加热区的属性配置信息太长。

较佳地，可以采用下述方法对点集合中的轨迹点进行筛选：

步骤x1、利用预设方向的n条切割线将所述画线轨迹对应的矩形区域进行切割，根据所述点集合，沿着所述画线轨迹依次记录所述画线轨迹与所述切割线的交点，得到一切割交点队列，其中，相邻两条所述切割线之间的宽度为预设的格栅宽度。

本步骤中，需要对画线轨迹对应的矩形区域进行切割，将画线轨迹与切割线的交点作为候选的精选轨迹点集合，即在后续步骤中再基于这些交点得到最终的筛选结果。

这里，需要沿着所述画线轨迹依次记录所述画线轨迹与所述切割线的交点，得到一切割交点队列，以便在后续步骤中找出采集时被漏掉的点。

所述画线轨迹与切割线的交点的确定是基于步骤101所得到的画线轨迹的点集合实现的，即如果对矩形区域的切割是沿着y轴方向进行的，则沿着画线轨迹依次判断所述点集合中是否有与割线相同y轴坐标值的点，如果有，将其加入切割交点队列中。

所述切割线的条数n将由所述预设的格栅宽度和矩形区域确定。

在实际应用中，当格栅宽度设置的很小时会使切割线更密集，便可获取更多的切割点，如此可以更大程度维持原区域形状的完整性，保留了原区域的形状，但是，这样会导致筛选后的点集合规模较大，当格栅宽度设置的很大时会使切割线数量较少，从而会使切割点数量较小，如此会影响定位热区范围的精确度，具体地，可由本领域技术人员根据实际需要设置格栅宽度的合适取值。

图2为对画线轨迹对应的矩形区域进行切割的示例图。图2中左侧的为用户绘制的热区的原区域，总共包括376个点，将格栅宽度range设置为40，并以该图形的顶点集合中的x方向的最小值minx、最大值maxx作为x边界，以顶点集合中y方向的最小值miny、最大值maxy作为y边界,并以格栅宽度range＝40对边界内矩形区域进行y方向切割，如图2中右侧的优化区域所示，截取所有切割交点与边界点即得到上述候选的精选轨迹点集合。

步骤x2、遍历所述切割交点队列中的每个点i，判断该点i与其后的相邻点之间的连线段是否与至少一条所述切割线相交，如果相交，则将该交点增加到所述切割交点队列中且按照所述画线轨迹的顺序排序在该点i之后。

本步骤中，考虑到实际应用中利用步骤101采集画线轨迹的点集合的过程中，可能并不能记录全部的点，由于拖动速度过快，会使得点轨迹出现断裂(不连续)，因此会出现两个点连线穿过切割线，但是却获取不到交点的情况。因此，在步骤x2中需要依次对连续两点连线是否穿过切割线(两点间切割线)做出判断(几何学科判断两条线段是否相交)，并且若穿过切割线，计算出两点连线和该切割线的交点(几何学科求两条线段交点)，将该交点加入点集中，以使得切割更为精准。

步骤x3、从所述遍历后得到的切割交点队列中，查找出每一组共线且连续相邻的三个以上的点，将所查找出的每组点中上除共线的两端点外的其他点从所述切割交点队列中删除。

本步骤中，用于去除切割交点队列中共直线的冗余点。这里考虑到实际应用中还存在一种现象，就是切割交点队列中有三个以上的点处于同一直线上，而对于一条直线，仅需要两个端点就足够了。因此在本步骤中需要将共直线的多个点中除端点之外的点去除，保证同一直线仅保留两个端点，如此，可以达到最大程度减少切割交点队列中顶点数量的目的。

利用上述方法可以实现对步骤101所得到的点集合的精减，同时还可以确保热区范围的精准度。例如，对于图2中的示例，通过优化，轨迹点的个数由最初的376降到了24个点，并且尽可能保留了原区域的形状。

步骤103、触发所述用户输入所述待添加热区的提示信息和链接信息，将所述图片的名称、所述精选点集合、所述提示信息和所述链接信息作为所述热区的属性配置信息保存。

本步骤中，需要将图片的名称作为热区的属性配置信息保存，以便此后加载图片时能获取到该图片上所有热区的属性配置信息。

步骤104、当所述图片需要被网页加载时，根据所述图片的名称获取该图片对应热区的属性配置信息，并利用预设的网页脚本语言对所获取的属性配置信息进行拼装，网页浏览器根据所述拼装的结果，加载所述图片的所述热区。

本步骤中，在需要加载图片时，需要根据所述图片的名称获取该图片对应的所有热区的属性配置信息，然后对其进行拼装，这样，网页浏览器便可根据拼装的结果，加载所述图片的所述热区，从而可以在网页上显示出图片的热区。

本步骤中利用网页脚本语言对所获取的属性配置信息进行拼装的具体方法为本领域技术人员所掌握。例如，可以采用下述形式进行拼装：

<imgsrc＝"…"usemap＝"#myimgmap">

<mapname＝"myimgmap"id＝"myimgmap">

<areashape＝’poly’title＝’提示1’href＝’链接1’coords＝’点集1’>

……

<areashape＝’poly’title＝’提示n’href＝’链接n’coords＝’点集n’>

</map>，

将<map/>元素的name或id属性与图片<img/>元素的usemap属性对应，每个<area/>元素单独对应一个热区，即可实现图片多个热区的关联与设置。当用户鼠标进入area区域(对应之前鼠标拖动画线区域)内时，浏览器会给出相应的提示，点击该区域时，即可跳转到href属性对应链接，如果某个area标签中的坐标和其他区域发生了重叠，会优先采用最先出现的area标签且浏览器会忽略超过图像边界范围之外的坐标。

进一步地，为了使提示热区处显示的提示信息更醒目，可以在上述拼装的脚本中增加使提示信息更突出的语句，即可对<area/>元素添加自定义的显示方式信息，以突出提示信息的显示效果，增强用户体验。

图3为与上述方法相对应的一种在图片上添加热区链接的装置，如图3所示，该装置包括：

采集单元，用于记录用户当前在图片上用于勾画热区的画线轨迹，得到所述轨迹的点集合；

筛选单元，用于采用格栅切割的方式，对所述点集合中的轨迹点进行筛选，得到所述热区的精选点集合；

配置单元，用于触发所述用户输入所述待添加热区的提示信息和链接信息，将所述图片的名称、所述精选点集合、所述提示信息和所述链接信息作为所述热区的属性配置信息保存；

显示单元，用于当所述图片需要被网页加载时，根据所述图片的名称获取该图片对应热区的属性配置信息，并利用预设的网页脚本语言对所获取的属性配置信息进行拼装，网页浏览器根据所述拼装的结果，加载所述图片的所述热区。

较佳地，所述采集单元利用html5中的画板canvas技术，记录所述画线轨迹。

较佳地，所述画线轨迹为鼠标的拖动轨迹。

较佳地，筛选单元，用于利用预设方向的n条切割线将所述画线轨迹对应的矩形区域进行切割，根据所述点集合，沿着所述画线轨迹依次记录所述画线轨迹与所述切割线的交点，得到一切割交点队列，其中，相邻两条所述切割线之间的宽度为预设的格栅宽度；遍历所述切割交点队列中的每个点i，判断该点i与其后的相邻点之间的连线段是否与至少一条所述切割线相交，如果相交，则将该交点增加到所述切割交点队列中且按照所述画线轨迹的顺序排序在该点i之后；从所述遍历后得到的切割交点队列中，查找出每一组共线且连续相邻的三个以上的点，将所查找出的每组点中上除共线的两端点外的其他点从所述切割交点队列中删除。

综上所述，以上仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。