[发明专利]在WEB页面实现动态图片裁切的装置和方法

说明书

技术领域

本发明涉及WEB页面图片裁切技术，特别是涉及在WEB页面上用背景图片位置属性实现的动态图片裁切的方法和实现该方法的装置。

背景技术

在WEB页面中，动态地对图片进行裁切时，传统上均是使用和滤镜或向量图形有关的方法，例如应用特技滤镜裁切图片时，因为大多数滤镜效果是在选区或浮动层中应用，因此应先激活对象浮动层或制作选区，然后通过调节各种滤镜参数观察到各种作用效果，传统方法非常复杂而且不够直观，给使用者带来了很大不便。

发明内容

本发明解决现有技术在WEB页面动态裁切图片时复杂、不直观的问题，提供了一种更易使用更直观的方法，能够使得裁切图片变的更简单，实现WEB页面中动态地对图片进行裁切的方法和实现该方法的装置。

本发明方法包括如下步骤：

A、将所需裁切的图片设置为层对象的背景图片，并将背景属性设置为双向重复；

B、为层对象添加鼠标和/或键盘事件；

C、根据移动层对象或改变层对象的尺寸时产生的数据进行运算，实时改变背景图片的位置属性；

D、逆向移动背景图片的相对位置。

所述A步骤中层对象包括DIV或类似对象。

本发明装置包括顺次相连的：

客户端图片设置模块，背景属性设置模块；

服务器端鼠标和/或键盘事件添加模块，运算模块，背景图片处理模块；

所述客户端图片设置模块将所需裁切的图片设置为层对象的背景图片，然后由背景属性设置模块将背景属性设置为双向重复；由所述服务器端鼠标和/或键盘事件添加模块为层对象添加鼠标和/或键盘事件，再通过运算模块根据移动层对象或改变层对象的尺寸时产生的数据进行运算，并将运算结果送至背景图片处理模块，背景图片处理模块实时改变背景图片的位置属性，并逆向移动背景图片的相对位置。

技术效果：

本发明在WEB页面实现动态图片裁切的方法将图片设置为层对象(DIV)或其它类似对象的背景图片，并将背景属性设置为双向重复；为层对象添加鼠标和/或键盘事件，使得层对象可以被移动和改变尺寸；在移动层对象或改变层对象的尺寸时，根据移动或改变尺寸的数据进行运算，实时改变背景图片的位置属性；逆向移动背景图片的相对位置。这样，在层对象的移动或改变尺寸的过程中，视觉上背景图片并没有移动，而是被裁切，这样的方法使得裁切图片变的更简单、直观，运行时的系统效率也更高。

附图说明

图1是本发明方法的流程图。

图2是本发明装置的结构示意图。

具体实施方式

结合附图详细说明本发明的方法和装置。

图1是本发明方法的流程图，首先是在客户端将需要裁切的图片设置为层对象(DIV)或其它类似对象的背景图片，然后设置背景属性，将背景属性设置为双向重复，再在服务器端为层对象添加鼠标和/或键盘事件，使得层对象可以被移动和改变尺寸；在客户端移动层对象或改变层对象尺寸，服务器端根据移动层对象或改变层对象的尺寸时产生的数据进行运算，实时改变背景图片的位置属性，并逆向移动背景图片的相对位置。

图2是本发明装置的结构示意图，包括顺次相连的：客户端图片设置模块，背景属性设置模块；服务器端鼠标和/或键盘事件添加模块，运算模块，背景图片处理模块；所述客户端图片设置模块将所需裁切的图片设置为层对象(DIV)或其它类似对象的背景图片，然后由背景属性设置模块将背景属性设置为双向重复；由所述服务器端鼠标和/或键盘事件添加模块为层对象添加鼠标和/或键盘事件，使得层对象可以被移动和改变尺寸，再通过运算模块根据移动层对象或改变层对象的尺寸时产生的数据进行运算，并将运算结果送至背景图片处理模块，背景图片处理模块实时改变背景图片的位置属性，并逆向移动背景图片的相对位置。

以上所述的实例仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以作出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。