easyui获取图片路径_在线计算图片热点植入位置的方法与流程

本发明涉及一种在线计算图片热点植入位置的方法，属于WEB应用技术领域。

背景技术：

为丰富页面的显示内容或查看更详细的图片信息，WEB页面的图片常常会添加一些热点信息，由于图片有不确定性，图片中热点的位置、数量及相关信息也有不确定性，如何让WEB用户方便高效灵活的植入图片热点是WEB应用系统的一个问题。

针对图片热点信息植入有两种主要解决方法，第一种是利用Dreamweaver等外部工具，编辑热点信息。该方法必须安装外部工具，工具的使用需要培训，并且编辑好的信息需要开发人员配合才能应用于页面显示。第二种是利用CMS系统进行热点信息维护，该方法比较专业，不适合WEB用户直接使用。

针对上述问题，本发明提出了一种在线计算图片热点植入位置的方法方案。

技术实现要素：

针对现有技术存在的上述缺陷，本发明提出了一种新的在线计算图片热点植入位置的方法,实现用户在无需安装外部工具，无需具备专业的系统维护知识，即可实现图片的热点信息维护。

本发明是采用以下的技术方案实现的：一种在线计算图片热点植入位置的方法，包括如下步骤：

第一步：用户在WEB页面，载入一张图片，设置图片的宽度W和高度H；

第二步：利用一个可移动位置和可调整大小的矩形框，选中一个需要植入热点的位置；

第三步：计算矩形框在图片上的相对坐标和相对大小，保存热点位置和热点信息，包括如下小步：

S1：保存时获取矩形框的起始坐标(x1,y1)，矩形框的宽度W1和高度H1；

S2：根据图片的宽度W和高度H，计算矩形框的相对坐标(x1/W,y1/H)；

S3：将矩形框的相对宽度W1/W，相对高度H1/H，并保存到数据库；

第四步：在图片显示页面，利用已保存的热点位置和热点信息，动态生成页面代码，包括如下小步：

S4：设置页面中图片的显示大小宽度(W0)，高度(H0)，显示的长宽比一定要和设置图片热点区域的长宽比一致；

S5：用数据库中保存的热点区域的相对位置信息，动态生成热点区域代码。

优选地，所述第二步中的矩形框利用Jquery EasyUI提供的Draggable控件和Resizable控件实现。

优选地，所述第三步中的矩形框在图片上的相对坐标，通过与图片的宽度和高度计算得出。

优选地，所述第三步中的矩形框在图片上的相对大小，通过与图片的宽度和高度计算得出。

本发明的有益效果是：采用本发明所述的在线计算图片热点植入位置的方法，不用安装外部工具，不用掌握专业知识，就能植入图片热点；该发明能实现用户不依懒于开发人员，不用了解编码知识，就能简单方便的植入图片热点。

附图说明

图1是本发明的流程框图。

具体实施方式

为了使本发明目的、技术方案更加清楚明白，下面结合附图，对本发明作进一步详细说明。

实施例一：

如图1所示，本发明所述的在线计算图片热点植入位置的方法，包括如下步骤：

第一步：用户在WEB页面，载入一张图片，设置图片的宽度W和高度H；

第二步：利用一个可移动位置和可调整大小的矩形框，选中一个需要植入热点的位置；

第三步：计算矩形框在图片上的相对坐标和相对大小，保存热点位置和热点信息，包括如下小步：

S1：保存时获取矩形框的起始坐标(x1,y1)，矩形框的宽度W1和高度H1；

S2：根据图片的宽度W和高度H，计算矩形框的相对坐标(x1/W,y1/H)；

S3：将矩形框的相对宽度W1/W，相对高度H1/H，并保存到数据库；

第四步：在图片显示页面，利用已保存的热点位置和热点信息，动态生成页面代码，包括如下小步：

S4：设置页面中图片的显示大小宽度(W0)，高度(H0)，显示的长宽比一定要和设置图片热点区域的长宽比一致；

S5：用数据库中保存的热点区域的相对位置信息，动态生成热点区域代码。

所述第二步中的矩形框利用Jquery EasyUI提供的Draggable控件和Resizable控件实现。

所述第三步中的矩形框在图片上的相对坐标，通过与图片的宽度和高度计算得出。

所述第三步中的矩形框在图片上的相对大小，通过与图片的宽度和高度计算得出。

实施例二：

本发明所述的一种在线计算图片热点植入位置的方法，属于WEB应用领域。用户在WEB页面，载入一张图片，利用一个可移动位置和可调整大小的矩形框，选中一个需要植入热点的位置，计算矩形框在图片上的相对坐标，保存热点位置和热点信息。在图片显示页面，利用已保存的热点位置和热点信息，系统动态生成页面代码，在不使用外部工具的前提下，用户也可以很方便的实现，提升了用户操作的便利性，也减少了系统的维护工作。

本发明所述的一种在线计算图片热点植入位置的方法，用户在WEB页面，载入一张图片，利用一个可移动位置和可调整大小的矩形框，选中一个需要植入热点的位置，计算矩形框在图片上的相对坐标和相对大小，保存热点位置和热点信息。在图片显示页面，利用已保存的热点位置和热点信息，动态生成页面代码。

所述的可移动位置和可调整大小的矩形框，利用Jquery EasyUI控件提供的Draggable控件和Resizable控件实例一个矩形框。

所述的相对坐标，获取矩形框的坐标，通过与图片的宽度和高度计算得出的相对坐标。

所述的相对大小，获取矩形框的宽度与高度，通过与图片的宽度和高度计算得出的相对大小。

配置并保存热点位置及信息:在热点配置画面，载入图片，设置图片的宽度(W)和高度(H)，拖动一个矩形框到热点位置，调整其大小为热点区域的大小。添加热点信息，点击保存。保存时获取矩形框的起始坐标(x1,y1)，矩形框的宽度(W1)和高度(H1)，根据图片的宽度(W)和高度(H)，计算矩形框的相对坐标(x1/W,y1/H)，矩形框的相对宽度(W1/W)，相对高度(H1/H)，并保存到数据库。

动态生成热点位置及信息:设置页面中图片的显示大小宽度(W0)，高度(H0)，显示的长宽比一定要和设置图片热点区域的长宽比一致。用数据库中保存的热点区域的相对位置信息，动态生成热点区域代码。生成内容例如：

<img usemap＝"#testmap"……

<map name＝"testmap"id＝"testmap">

<area shape＝"rect"coords＝"W0*x1/W,H0*y1/H,W0*x1/W

以上所述仅为本发明的较佳实施例而己，并不以本发明为限制，凡在本发明的精神和原则之内所作的均等修改、等同替换和改进等，均应包含在本发明的专利涵盖范围内。