CN102682025B - 一种web图片评论添加和显示方法及装置 - Google Patents

Abstract

本发明公开了一种浏览器及其实现web图片评论添加和显示的方法，所述评论添加方法包括：获取图片评论内容和图片评论位置信息，计算所述图片评论位置与图片内一固定参考点间的相对坐标；将包括所述相对坐标、评论内容和图片ID的评论参数上传到web服务器，并利用所述评论参数形成评论信息层后置于图片层上。当用户进入web页面时，浏览器向web服务器请求显示评论信息，并在计算得到图片评论位置的绝对坐标后，将形成的评论信息层置于图片层上进行显示。本发明能够在页面静止不动的情况下，对图片某个局部进行“粘贴”式的评论，形象生动，趣味性强，特别是对漫画产品的评论有很好的效果，增加了互联网产品的用户粘度。

Description

一种web图片评论添加和显示方法及装置

技术领域

本发明涉及互联网技术领域，尤其涉及一种web图片评论添加和显示方法及装置。

背景技术

网站上的图片评论一般的实现方法和普通评论一样，在图片下方一条条展示评论内容。但如果想针对图片上的某个局部评论，只能通过文字描述来起定位的作用，这种方式很不形象直观，使得评论效果大打折扣。

发明内容

本发明提供一种web图片评论添加和显示方法及装置，用以解决现有技术不能实现图片定位评论的问题。

具体的，本发明提供一种web图片评论添加方法，包括：

获取图片评论内容和图片评论位置信息，计算所述图片评论位置与图片内一固定参考点间的相对坐标；

将包括所述相对坐标、评论内容和图片ID的评论参数上传到web服务器，并利用所述评论参数形成评论信息层后置于图片层上。

所述方法中，计算图片评论位置与图片内一固定参考点间的相对坐标包括：

计算所述固定参考点的绝对坐标，将所述图片评论位置的绝对坐标与固定参考点的绝对坐标做差，得到所述图片评论位置与固定参考点间的相对坐标。

其中，所述固定参考点为所述图片左上角的顶点；所述固定参考点的绝对坐标是以该图片为子对象向外到最外层父对象之间每层的相对坐标的和。

所述方法中，当所述图片为缩放后的图片时，将上传到web服务器的相对坐标按着图片缩放比例进行1：1还原。

本发明还提供一种web图片评论显示方法，包括：

向web服务器发送显示图片评论请求，并接收所述web服务器反馈的包括相对坐标和评论内容的评论参数；

计算图片评论位置在web页面内的绝对坐标，并将基于该图片评论位置的绝对坐标和评论参数形成的评论信息层置于web页面内的图片层上实现评论显示。

所述方法中，计算图片评论位置在web页面内的绝对坐标包括：

计算所述相对坐标的固定参考点在web页面中的绝对坐标，将该绝对坐标与相对坐标求和得到图片评论位置在web页面内的绝对坐标。

其中，相对坐标的固定参考点为所述图片左上角的顶点；所述固定参考点的绝对坐标是以该图片为子对象向外到最外层父对象之间每层的相对坐标的和。

本发明所述方法进一步具有以下特点：

当所述图片为缩放后的图片时，在接收到所述相对坐标后，将所述相对坐标根据图片的缩放比例进行缩放处理；

所述向web服务器发送显示图片评论请求的触发条件包括：进入web页面时浏览器主动触发或者进入web页面后由用户触发；

所述评论信息显示的方式包括下述方式中的一种：按着评论时间顺序显示、按着设定的评论信息条数显示和按着优先级顺序显示。

本发明还提供一种web图片评论添加和显示装置，包括：评论添加模块和评论显示模块；

所述评论添加模块，包括：

信息获取模块，用于获取图片评论内容和图片评论位置信息，计算所述图片评论位置与图片内一固定参考点间的相对坐标；

评论添加实现模块，用于将包括所述相对坐标、评论内容和图片ID的评论参数上传到web服务器，并将利用所述评论参数形成的评论信息层置于图片层上；

所述评论显示模块，包括：

评论参数获取模块，用于向web服务器发送显示图片评论请求，并接收所述web服务器反馈的包括相对坐标和评论内容的评论参数；

评论显示实现模块，用于计算图片评论位置在web页面内的绝对坐标，并将基于所述图片评论位置的绝对坐标和评论参数形成的评论信息层置于web页面内的图片层上实现评论显示。

本发明所述装置进一步具有以下特点：

当所述图片为缩放后的图片时，所述信息获取模块将上传到web服务器的相对坐标按着图片缩放比例进行1：1还原。

当所述图片为缩放后的图片时，所述评论参数获取模块在接收到所述相对坐标后，将所述相对坐标根据图片的缩放比例进行缩放处理。

所述评论参数获取模块向web服务器发送显示图片评论请求的触发条件包括：进入web页面时浏览器主动触发或者进入web页面后由用户触发；

所述评论显示实现模块进行评论信息显示的方式包括下述方式中的一种：按着评论时间顺序显示、按着设定的评论信息条数显示和按着优先级顺序显示。

与现有技术相比，本发明有益效果如下：

本发明提供的图片评论添加和显示方法，实现了图片的评论，并且能够在页面静止不动的情况下，对图片某个局部进行“粘贴”式的评论，形象生动，趣味性强，特别是对漫画产品的评论有很好的效果，增加了互联网产品的用户粘度。

附图说明

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

图1为本发明提供的一种web图片评论添加方法流程图；

图2为本发明提供的一种web图片评论显示方法流程图；

图3为本发明实施例提供的web图片评论添加方法流程图；

图4为本发明实施例提供的web图片评论显示方法流程图；

图5为本发明提供的web图片评论添加和显示装置的结构图。

具体实施方式

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

为了解决现有技术中不能实现web页面内图片的定位评论问题，本发明提供一种web图片评论添加和显示方法及装置，所述方法能够对图片某个局部进行“粘贴”式的评论，使得图片评论生动直观，具有相当的趣味性，加强互联网产品对用户的吸引力。

如图1所示，本发明提供一种web图片评论添加方法，包括：

步骤S101、浏览器获取图片评论内容和图片评论位置信息，计算所述图片评论位置与图片内一固定参考点间的相对坐标；

该步骤具体为：计算固定参考点的绝对坐标，将图片评论位置的绝对坐标与固定参考点的绝对坐标做差，得到图片评论位置与固定参考点间的相对坐标。

其中，固定参考点优选为图片左上角的顶点；此时，所述固定参考点的绝对坐标是以该图片为子对象向外到最外层父对象之间每层的相对坐标的和。

步骤S102、浏览器将包括相对坐标、评论内容和图片ID的评论参数上传到web服务器，并利用评论参数形成评论信息层后，将评论信息层置于图片层上。

如图2所示，本发明还提供一种web图片评论显示方法，包括：

步骤S201、浏览器向web服务器发送显示图片评论请求，并接收所述web服务器反馈的包括相对坐标和评论内容的评论参数；

其中，浏览器向web服务器发送显示图片评论请求的触发条件包括：进入web页面时浏览器主动触发或者进入web页面后由用户触发。

步骤S202、浏览器计算图片评论位置在web页面内的绝对坐标，并基于该图片评论位置的绝对坐标和评论参数形成评论信息层后，将评论信息层置于web页面内的图片层上实现评论显示。

其中，评论信息显示的方式包括下述方式中的一种：按着评论时间顺序显示、按着设定的评论信息条数显示和按着优先级顺序显示。

通过上述方法可见，为了使评论“粘贴”到图片上，而且能够按原样重新显示，最重要就是获取“粘贴”到图片上的相对图片固定参考点（例如，图片左上角点）的坐标；这样在图片自身坐标变动的时候，评论位置不会受到影响。获得相对坐标后，再利用页面分层技术，把评论层置于图片层之上，就可以实现这种定位在图片某个位置上的评论。

由于在评论时已经将评论参数传递给web服务器，当用户要看评论时，用户浏览器向web服务器发出获取评论信息的请求，获取评论参数，浏览器再通过JAVASCRIPT解析信息，还原成评论内容。

上述评论添加和显示方法，对于用户来说，只需要用户在浏览器页面的输入框内输入评论内容，点击图片评论的按钮；用户把鼠标移动到图片某个位置上，点击左键，在那个位置贴上评论，图片评论添加完成；当本用户或其他用户进入具有图片评论的web页面时，浏览器自动下载评论信息进行显示或者在用户点击显示图片评论的按钮的触发下，浏览器被动请求下载显示，此时用户自己包括其他人做的图片评论一一显示出来，图片显示完成。

下面根据图3～图4给出本发明几个较佳的实施例，并结合对实施例的描述，进一步给出本发明的技术细节，使其能够更好地说明本发明所述方法的具体实现过程。

实施例一

本发明实施例提供一种web图片评论添加方法，如图3所示，包括：

步骤S301、用户在浏览器web页面内输入图片评论内容；

步骤S302、用户选定图片上某一点为图片评论位置后点击鼠标左键，触发页面的javascript事件；

步骤S303、浏览器获取鼠标点击事件所在的页面绝对坐标X和Y（即图片评论位置的绝对坐标）；

其中，绝对坐标值X和Y是鼠标事件对象本身自有的，直接取出来即可。

步骤S304、在图片内选定一点作为图片评论位置的固定参考点，并计算该固定参考点在页面内的绝对坐标；

通常图片及其父对象们一般是不带绝对坐标属性的，所以此时固定参考点优选的选择图片左上角的顶点；该图片左上角的顶点绝对坐标是以该图片为子对象向外到最外层父对象之间每层的相对坐标的和：其计算流程为：先取出图片和其父对象之间的相对坐标，再加上父对象和父父对象之间的相对坐标，再加上父父对象和该父父对象的父对象之间的相对坐标，依次类推，一直循环到找不到父对象为止，这时的相加结果就是图片左上角顶点的绝对坐标值。

然而，当图片带绝对坐标属性时，浏览器可以取图片内任意除图片评论位置点外的其他点作为固定参考点，此时只要记录选取的参考点并直接获取该点的绝对坐标即可；所以说，本发明所述的固定参考点的选取可以是随机；只有在浏览器不支持图片绝对坐标属性时，才优选选取图片边缘点作为固定参考点。

步骤S305、浏览器用图片评论位置的绝对坐标减去固定参考点的绝对坐标，得到图片评论位置与图片上固定参考点间的相对坐标；

步骤S306、浏览器把得到的相对坐标，连同用户输入的评论内容和图片ID等一起传到web服务器；并利用这些信息，通过html和javascript的层技术，实时动态形成一个含有评论内容的信息层，将该信息层置于在图片层上，实现评论的添加；此时用户能直观的立即看到自己的评论效果。

该步骤中，浏览器在向web服务器传送信息时，优选的通过AJAX页面技术提交信息数据，使得web页面保持静止。

值得一提的是，当所述图片为缩放后的图片时，将上传到web服务器的相对坐标按着图片缩放比例进行1：1还原；而对于生成新的信息层所利用相对坐标则是浏览器直接计算得到的相对坐标。

步骤S307、web服务器把相对坐标、评论内容和图片ID保存到数据库服务器中。

结合上述评论添加方法，下面给出一具体示例来详细说明：

示例：某位网络用户在漫画网站的漫画浏览页面上，在漫画评论输入框中填写了比如“两只海鸥”的评论内容。然后点击评论按钮，把鼠标移动到图片上，此时鼠标光标会变成十字星，表示可以点击粘贴评论。此时在图片的两只海鸥处点击鼠标左键时，触发了页面的javascript鼠标事件；

页面javascript代码获取鼠标点击事件所在的页面绝对坐标X和Y（即图片评论位置绝对坐标），并计算图片页面内固定参考点的绝对坐标；用图片评论位置绝对坐标减去固定参考点的绝对坐标，得到图片评论位置相对于图片固定参考点的相对坐标；

把得到的相对坐标，连同用户ID、评论内容、图片ID等一起传到web服务器，用AJAX页面技术提交数据，使得页面保持静止，增加用户良好感受；同时利用这些信息，通过html和javascript的页面分层技术和定位技术，实时动态形成一个含有评论信息新的层，“粘贴”在图片上，让用户能直观的立即看到自己的评论效果。

实施例二

本实施例提供一种web图片评论显示方法，如图4所示，包括：

步骤S401、用户进入浏览器web页面，并点击显示图片评论按钮；

步骤S402、浏览器在用户的触发下向web服务器发出获取图片评论请求；

优选的，该步骤中浏览器通过AJAX页面技术提交请求并使页面保持不动；

步骤S403、web服务器根据图片ID从数据库服务器中获得此图片评论、坐标信息等，并传递到用户浏览器页面；

步骤S404、浏览器计算所述相对坐标参考的固定参考点的绝对坐标；

该步骤中，当固定参考点为图片左上角的顶点时，其绝对坐标的算去方法与步骤S304中相同，即：先取出图片和其父对象之间的相对坐标，再加上父对象和父父对象之间的相对坐标，再加上父父对象和该父父对象的父对象之间的相对坐标，依次类推，一直循环到找不到父对象为止，这时的相加结果就是图片左上角顶点的绝对坐标值。

步骤S405、浏览器根据得到的固定参考点的绝对坐标加上web服务器传回的相对坐标，得到了评论内容所在的web页面内的绝对坐标；

该步骤中，如果存在图片缩放功能，那么在获得了评论的相对坐标后，还要根据此时的图片缩放比率进行缩放再进行相加。

步骤S406、浏览器根据得到的评论内容所在的页面绝对坐标和评论内容等信息，利用html和javascript的页面分层技术和定位技术，动态的生成一个包含评论内容的信息层，把该信息层置于图片层上完成评论显示。

为了方便用户观看，可以用页面JAVASCRIPT技术按评论时间顺序一个一个间隔自动展示；或者，在评论过多，可以分批次展示，以免评论互相重叠影响观看；由于一个评论一个层，评论层的优先级比图片高，新评论层的优先级比旧评论高，所以当发生重叠时，新层覆盖旧层。

上述实施例一、二中的JAVASCRIPT技术均可改为VBSCRIPT技术。

综上所述，本发明提供的图片评论添加和显示方法，实现了图片的评论，并且能够在页面静止不动的情况下，对图片某个局部进行“粘贴”式的评论，再通过合理方便的方式控制评论的显示和隐藏，形象生动，趣味性强，特别是对漫画产品的评论有很好的效果，增加了互联网产品的用户粘度。

如图5所示，本发明还提供一种web图片评论添加和显示装置，具体包括：评论添加模块510和评论显示模块520；其中：

评论添加模块510，包括：

信息获取模块511，用于获取图片评论内容和图片评论位置信息，计算所述图片评论位置与图片内一固定参考点的相对坐标；

评论添加实现模块512，用于将包括所述相对坐标、评论内容和图片ID的评论参数上传到web服务器，并利用所述评论参数形成评论信息层后，将评论信息层置于图片层上；

其中，所述信息获取模块511包括：

第一评论参数获取子模块，用于获取图片评论内容和图片评论位置信息；

第二评论参数获取子模块，用于计算所述固定参考点的绝对坐标，将所述图片评论位置的绝对坐标与固定参考点的绝对坐标做差，得到所述图片评论位置与固定参考点间的相对坐标。

其中，固定参考点为所述图片左上角的顶点；固定参考点的绝对坐标是以该图片为子对象向外到最外层父对象之间每层的相对坐标的和。

值得注意的是，当所述图片为缩放后的图片时，所述信息获取模块511将上传到web服务器的相对坐标按着图片缩放比例进行1：1还原。

所述评论显示模块520，包括：

评论参数获取模块521，用于向web服务器发送显示图片评论请求，并接收所述web服务器反馈的包括相对坐标和评论内容的评论参数；

评论显示实现模块522，用于计算图片评论位置在web页面内的绝对坐标，并基于所述图片评论位置的绝对坐标和评论参数形成评论信息层后，将评论信息层置于web页面内的图片层上实现评论显示。

其中，所述评论显示实现模块522计算图片评论位置在web页面内的绝对坐标具体包括：计算所述相对坐标的固定参考点在web页面中的绝对坐标，将该绝对坐标与相对坐标求和得到图片评论位置在web页面内的绝对坐标。

其中，相对坐标的固定参考点为所述图片左上角的顶点；所述固定参考点的绝对坐标是以该图片为子对象向外到最外层父对象之间每层的相对坐标的和。

进一步的，评论参数获取模块521向web服务器发送显示图片评论请求的触发条件包括：进入web页面时浏览器主动触发或者进入web页面后由用户触发；

评论显示实现模块522进行评论信息显示的方式包括下述方式中的一种：按着评论时间顺序显示、按着设定的评论信息条数显示和按着优先级顺序显示。

值得注意的是，当所述图片为缩放后的图片时，所述评论参数获取模块521，在接收到所述相对坐标后，将所述相对坐标根据图片的缩放比例进行缩放处理。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (11)

1.一种web图片评论添加方法，其特征在于，包括：

获取图片评论内容和图片评论位置信息，计算所述图片评论位置与图片内一固定参考点间的相对坐标；

将包括所述相对坐标、评论内容和图片ID的评论参数上传到web服务器，并利用所述评论参数形成评论信息层后置于图片层上。

2.如权利要求1所述的方法，其特征在于，所述计算图片评论位置与图片内一固定参考点间的相对坐标包括：

计算所述固定参考点的绝对坐标，将所述图片评论位置的绝对坐标与固定参考点的绝对坐标做差，得到所述图片评论位置与固定参考点间的相对坐标。

3.如权利要求2所述的方法，其特征在于，所述固定参考点为所述图片左上角的顶点；所述固定参考点的绝对坐标是以该图片为子对象向外到最外层父对象之间每层的相对坐标的和。

4.如权利要求1或2或3所述的方法，其特征在于，当所述图片为缩放后的图片时，将上传到web服务器的相对坐标按着图片缩放比例进行1：1还原。

5.一种web图片评论显示方法，其特征在于，包括：

向web服务器发送显示图片评论请求，并接收所述web服务器反馈的包括相对坐标和评论内容的评论参数；

计算图片评论位置在web页面内的绝对坐标，并基于该图片评论位置的绝对坐标和评论参数形成评论信息层后置于web页面内的图片层上实现评论显示。

6.如权利要求5所述的方法，其特征在于，所述计算图片评论位置在web页面内的绝对坐标包括：

计算所述相对坐标的固定参考点在web页面中的绝对坐标，将该绝对坐标与相对坐标求和得到图片评论位置在web页面内的绝对坐标。

7.如权利要求6所述的方法，其特征在于，所述相对坐标的固定参考点为所述图片左上角的顶点；所述固定参考点的绝对坐标是以该图片为子对象向外到最外层父对象之间每层的相对坐标的和。

8.如权利要求5或6或7所述的方法，其特征在于，

当所述图片为缩放后的图片时，在接收到所述相对坐标后，将所述相对坐标根据图片的缩放比例进行缩放处理；

所述向web服务器发送显示图片评论请求的触发条件包括：进入web页面时浏览器主动触发或者进入web页面后由用户触发；

所述评论信息显示的方式包括下述方式中的一种：按着评论时间顺序显示、按着设定的评论信息条数显示和按着优先级顺序显示。

9.一种web图片评论添加和显示装置，其特征在于，包括：评论添加模块和评论显示模块；

所述评论添加模块，包括：

信息获取模块，用于获取图片评论内容和图片评论位置信息，计算所述图片评论位置与图片内一固定参考点间的相对坐标；

评论添加实现模块，用于将包括所述相对坐标、评论内容和图片ID的评论参数上传到web服务器，并利用所述评论参数形成评论信息层后置于图片层上；

所述评论显示模块，包括：

评论参数获取模块，用于向web服务器发送显示图片评论请求，并接收所述web服务器反馈的包括相对坐标和评论内容的评论参数；

评论显示实现模块，用于计算图片评论位置在web页面内的绝对坐标，并基于所述图片评论位置的绝对坐标和评论参数形成评论信息层后置于web页面内的图片层上实现评论显示。

10.如权利要求9所述的装置，其特征在于，

当所述图片为缩放后的图片时，所述信息获取模块将上传到web服务器的相对坐标按着图片缩放比例进行1：1还原；

当所述图片为缩放后的图片时，所述评论参数获取模块在接收到所述相对坐标后，将所述相对坐标根据图片的缩放比例进行缩放处理。

11.如权利要求9所述的装置，其特征在于，

所述评论参数获取模块向web服务器发送显示图片评论请求的触发条件包括：进入web页面时浏览器主动触发或者进入web页面后由用户触发；

所述评论显示实现模块进行评论信息显示的方式包括下述方式中的一种：按着评论时间顺序显示、按着设定的评论信息条数显示和按着优先级顺序显示。

Images