[發明專利]在線編輯圖片的方法和裝置

有效

• 申請號: 201110400403.1
• 申請日: 2011-12-06
• 公開（公告）號: CN103150745B
• 公開（公告）日: 2018-03-20
• 發明（設計）人: 鐘雨歡;林挺
• 申請（專利權）人: 騰訊科技（深圳）有限公司
• 主分類號: G06T11/60
• 分類號: G06T11/60;H04L29/08
• 代理公司: 北京德琦知識產權代理有限公司11018
• 代理人: 陳世華,王琦

1.一種在線編輯圖片的方法，其特征在于，包括：

服務器端根據客戶端的指令將待編輯圖片傳輸給客戶端展示；

客戶端生成編輯框并置于所述待編輯圖片之上，并監聽對所述編輯框的操作指令，根據監聽到的操作指令對所述編輯框進行移動和縮放；

客戶端將所述編輯框在所述待編輯圖片上的相對區域參數上傳給服務器；

服務器根據所述相對區域參數編輯處理所述待編輯圖片，生成最終圖片；

該方法進一步包括客戶端預覽最終圖片效果，具體為：

客戶端在一預覽區域顯示至少兩個與所述待編輯圖片相同的預覽圖片，針對每個預覽圖片分別對應生成一遮罩層置于該預覽圖片之上，各個遮罩層中分別存在與最終圖片的形狀和大小相同的透明區域，且所述透明區域與預覽圖片相對位置和所述編輯框與待編輯圖片的相對位置相同；

客戶端在根據監聽到的操作指令對所述編輯框進行移動和縮放時，按照移動參數反向移動所述預覽圖片，按照縮放參數反向縮放所述預覽圖片。

2.根據權利要求1所述的方法，其特征在于，所述服務器端根據客戶端的編輯指令將待編輯圖片傳輸給客戶端展示的過程具體包括：客戶端向服務器發起編輯指令并將本地原始圖片上傳給服務器，服務器將該原始圖片縮放為預定尺寸的待編輯圖片，再將該待編輯圖片傳輸給客戶端展示。

3.根據權利要求1所述的方法，其特征在于，所述遮罩層為HTML元素或圖片。

4.根據權利要求1所述的方法，其特征在于，該方法在生成最終圖片后進一步包括：保存該最終圖片，在收到應用指令后，將所保存的最終圖片發送到該應用指令對應的場景中。

5.根據權利要求1所述的方法，其特征在于，該方法在生成最終圖片后進一步包括：保存所述編輯框在該待編輯圖片上的相對區域參數；

當客戶端再次監測到對所述待編輯圖片的編輯指令后，根據所保存的所述編輯框在所述待編輯圖片上的相對區域參數，還原所述編輯框在所述待編輯圖片上的大小和位置。

6.根據權利要求1所述的方法，其特征在于，所述客戶端的處理步驟為js腳本處理步驟。

7.一種在線編輯圖片的裝置，其特征在于，該裝置包括：

客戶端的指令發起模塊，用于監聽對圖片的指令并通知服務器；

服務器的圖片傳輸模塊，用于將待編輯圖片傳輸給客戶端；

客戶端的圖片展示模塊，用于展示所述待編輯圖片；

客戶端的編輯框處理模塊，用于生成編輯框置于所述待編輯圖片之上，并監聽對所述編輯框的操作指令，根據監聽到的操作指令對所述編輯框進行移動和縮放；

客戶端的參數上傳模塊，用于將所述編輯框在所述待編輯圖片上的相對區域參數上傳給服務器；

服務器的圖片編輯處理模塊，用于根據所述相對區域參數編輯處理所述待編輯圖片，生成最終圖片；

該裝置進一步包括客戶端的預覽模塊，其中具體包括：

預覽圖片顯示模塊，用于在一預覽區域顯示至少兩個與所述待編輯圖片相同的預覽圖片；

遮罩層模塊，用于針對每個預覽圖片分別對應生成一遮罩層置于所述預覽圖片之上，各個遮罩層中分別存在與最終圖片的形狀和大小相同的透明區域，且所述透明區域與預覽圖片相對位置和所述編輯框與待編輯圖片的相對位置相同；

預覽圖片調整模塊，用于根據編輯框處理模塊監聽到的對所述編輯框的移動和縮放指令，按照移動參數反向移動所述預覽圖片，按照縮放參數反向縮放所述預覽圖片。

8.根據權利要求7所述的裝置，其特征在于，

所述客戶端的指令發起模塊中進一步包括：圖片上傳模塊，用于將本地原始圖片上傳給服務器；

所述裝置進一步包括：服務器的圖片縮放模塊，用于所述客戶端上傳的原始圖片縮放為預定尺寸的待編輯圖片，將該待編輯圖片發送給服務器的圖片傳輸模塊。

9.根據權利要求7所述的裝置，其特征在于，該裝置進一步包括：服務器的圖片存儲模塊，用于存儲所述最終圖片。