WO2012122769A1 - 一种浏览器及其实现web图片评论添加和显示的方法 - Google Patents

Description

一种浏览器及其实现 web图片评论添加和显示的方法 技术领域

本发明涉及互联网技术领域， 尤其涉及一种浏览器及其实现 web图片 评论添加和显示的方法。 背景技术

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

有鉴于此， 本发明实施例提供一种浏览器及其实现 web图片评论添加 和显示的方法， 用以解决现有技术不能实现图片定位评论的问题。

具体的， 本发明实施例提供一种 web图片评论添加方法， 包括： 获取图片评论内容和图片评论位置信息， 计算所述图片评论位置与图 片内固定参考点间的相对坐标；

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

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

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

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

本发明实施例还提供一种 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图片评论添加和显示的方法， 所述 方法能够对图片某个局部进行 "粘贴" 式的评论， 使得图片评论生动直观， 具有相当的趣味性， 加强互联网产品对用户的吸引力。

如图 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所示， 本发明还提供一种浏览器， 具体包括： 评论添加模块 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

权利要求书

1、 一种 web图片评论添加方法， 该方法包括：

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

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

2、 如权利要求 1所述的方法， 其中， 所述计算图片评论位置与图片内 固定参考点间的相对坐标为：

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

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

4、 如权利要求 1至 3任一项所述的方法， 其中， 该方法还包括： 当所 述图片为缩放后的图片时， 将上传到 web服务器的相对坐标按着图片缩放 比例进行 1 : 1还原。

5、 一种 web图片评论显示方法， 该方法包括：

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

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

6、 如权利要求 5所述的方法， 其中， 所述计算图片评论位置在 web页 面内的绝对坐标为： 计算所述相对坐标的固定参考点在 web页面中的绝对坐标， 将该绝对 坐标与相对坐标求和得到图片评论位置在 web页面内的绝对坐标。

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

8、 如权利要求 5至 7任一项所述的方法， 其中，

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

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

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

9、 一种浏览器， 该浏览器包括： 评论添加模块和评论显示模块； 所述评论添加模块， 包括：

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

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

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

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

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

10、 如权利要求 9所述的浏览器， 其中，

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

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

11、 如权利要求 9所述的浏览器， 其中，

所述评论参数获取模块向 web服务器发送显示图片评论请求的触发条 件包括： 进入 web页面时浏览器主动触发或进入 web页面后由用户触发； 所述评论显示实现模块进行评论信息显示的方式包括下述方式中的一 种： 按着评论时间顺序显示、 按着设定的评论信息条数显示和按着优先级 顺序显示。