[發明專利]在WEB頁面實現動態圖片裁切的裝置和方法

在審

• 申請號: 201410360177.2
• 申請日: 2014-07-25
• 公開（公告）號: CN104714793A
• 公開（公告）日: 2015-06-17
• 發明（設計）人: 施霞虹
• 申請（專利權）人: 南寧市磁匯科技有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44;G06F17/30
• 代理公司: 北京海虹嘉誠知識產權代理有限公司 11129
• 代理人: 張濤

技術領域

本發明涉及WEB頁面圖片裁切技術，特別是涉及在WEB頁面上用背景圖片位置屬性實現的動態圖片裁切的方法和實現該方法的裝置。

背景技術

在WEB頁面中，動態地對圖片進行裁切時，傳統上均是使用和濾鏡或向量圖形有關的方法，例如應用特技濾鏡裁切圖片時，因為大多數濾鏡效果是在選區或浮動層中應用，因此應先激活對象浮動層或制作選區，然后通過調節各種濾鏡參數觀察到各種作用效果，傳統方法非常復雜而且不夠直觀，給使用者帶來了很大不便。

發明內容

本發明解決現有技術在WEB頁面動態裁切圖片時復雜、不直觀的問題，提供了一種更易使用更直觀的方法，能夠使得裁切圖片變的更簡單，實現WEB頁面中動態地對圖片進行裁切的方法和實現該方法的裝置。

本發明方法包括如下步驟：

A、將所需裁切的圖片設置為層對象的背景圖片，并將背景屬性設置為雙向重復；

B、為層對象添加鼠標和/或鍵盤事件；

C、根據移動層對象或改變層對象的尺寸時產生的數據進行運算，實時改變背景圖片的位置屬性；

D、逆向移動背景圖片的相對位置。

所述A步驟中層對象包括DIV或類似對象。

本發明裝置包括順次相連的：

客戶端圖片設置模塊，背景屬性設置模塊；

服務器端鼠標和/或鍵盤事件添加模塊，運算模塊，背景圖片處理模塊；

所述客戶端圖片設置模塊將所需裁切的圖片設置為層對象的背景圖片，然后由背景屬性設置模塊將背景屬性設置為雙向重復；由所述服務器端鼠標和/或鍵盤事件添加模塊為層對象添加鼠標和/或鍵盤事件，再通過運算模塊根據移動層對象或改變層對象的尺寸時產生的數據進行運算，并將運算結果送至背景圖片處理模塊，背景圖片處理模塊實時改變背景圖片的位置屬性，并逆向移動背景圖片的相對位置。

技術效果：

本發明在WEB頁面實現動態圖片裁切的方法將圖片設置為層對象(DIV)或其它類似對象的背景圖片，并將背景屬性設置為雙向重復；為層對象添加鼠標和/或鍵盤事件，使得層對象可以被移動和改變尺寸；在移動層對象或改變層對象的尺寸時，根據移動或改變尺寸的數據進行運算，實時改變背景圖片的位置屬性；逆向移動背景圖片的相對位置。這樣，在層對象的移動或改變尺寸的過程中，視覺上背景圖片并沒有移動，而是被裁切，這樣的方法使得裁切圖片變的更簡單、直觀，運行時的系統效率也更高。

附圖說明

圖1是本發明方法的流程圖。

圖2是本發明裝置的結構示意圖。

具體實施方式

結合附圖詳細說明本發明的方法和裝置。

圖1是本發明方法的流程圖，首先是在客戶端將需要裁切的圖片設置為層對象(DIV)或其它類似對象的背景圖片，然后設置背景屬性，將背景屬性設置為雙向重復，再在服務器端為層對象添加鼠標和/或鍵盤事件，使得層對象可以被移動和改變尺寸；在客戶端移動層對象或改變層對象尺寸，服務器端根據移動層對象或改變層對象的尺寸時產生的數據進行運算，實時改變背景圖片的位置屬性，并逆向移動背景圖片的相對位置。

圖2是本發明裝置的結構示意圖，包括順次相連的：客戶端圖片設置模塊，背景屬性設置模塊；服務器端鼠標和/或鍵盤事件添加模塊，運算模塊，背景圖片處理模塊；所述客戶端圖片設置模塊將所需裁切的圖片設置為層對象(DIV)或其它類似對象的背景圖片，然后由背景屬性設置模塊將背景屬性設置為雙向重復；由所述服務器端鼠標和/或鍵盤事件添加模塊為層對象添加鼠標和/或鍵盤事件，使得層對象可以被移動和改變尺寸，再通過運算模塊根據移動層對象或改變層對象的尺寸時產生的數據進行運算，并將運算結果送至背景圖片處理模塊，背景圖片處理模塊實時改變背景圖片的位置屬性，并逆向移動背景圖片的相對位置。

以上所述的實例僅是本發明的優選實施方式，應當指出，對于本技術領域的普通技術人員來說，在不脫離本發明原理的前提下，還可以作出若干改進和潤飾，這些改進和潤飾也應視為本發明的保護范圍。