[發明專利]一種圖片處理方法和裝置

有效

• 申請號: 201410147879.2
• 申請日: 2014-04-14
• 公開（公告）號: CN104978723B
• 公開（公告）日: 2018-04-03
• 發明（設計）人: 茅曉鋒
• 申請（專利權）人: 阿里巴巴集團控股有限公司
• 主分類號: G06T5/50
• 分類號: G06T5/50
• 代理公司: 北京國昊天誠知識產權代理有限公司11315
• 代理人: 許志勇

技術領域

本申請涉及圖片處理領域，更具體地，涉及一種圖片處理方法和裝置。

背景技術

用戶在瀏覽器中對圖片進行處理的時候，有時需要將多個圖片合成為一個圖片，并且在合成之前，通常需要對待合成圖片中的某些圖片進行縮放、旋轉等操作。

現有技術中，存在多種對多個圖片進行合成的方法。其中一種方法是，基于圖塊模板對多圖片進行合成，即將不同的圖片在以某種固定的圖塊模式或布局拼在一起。這種方法的缺陷在于，待合成圖片的合成位置會因為圖塊模板的設定而被固定住，并且用戶無法對圖片進行縮放、旋轉等操作。另外一種方法是，將多個待合成圖片作為多個圖層在畫布上進行疊加，操作以達到顯示合成效果的目的。這種方法會帶來的一些問題包括，當用戶需要進行調整的圖片不在頂層時，由于該層被其上層的圖片遮蓋，用戶無法對該層的圖片的操作；此外，如果想要對所疊加的圖片進行合成，必須依賴后端服務器相關的技術來支持，而不能在瀏覽器中直接生成合成的圖片。

因此，在本領域中，需要一種圖片處理的方案，能夠解決現有技術中用戶無法對除頂層圖片之外的其他圖片進行調整和無法在瀏覽器中直接合成圖片等問題。

發明內容

本申請的主要目的在于提供一種圖片處理技術，以解決現有技術中用戶無法對除頂層圖片之外的其他圖片數據進行調整和無法在瀏覽器中直接合成圖片等問題。

根據本申請的第一方面，提供了一種圖片處理方法，其特征在于，方法包括：根據接收的交互請求在多個圖片圖層的頂層添加交互圖層，其中交互請求中攜帶有待關聯圖片圖層的標識；根據交互請求中攜帶的待關聯圖片圖層的標識，將交互圖層與標識所對應的圖片圖層進行關聯；根據在交互圖層中輸入的圖片數據，更新交互圖層所關聯的圖片圖層中的圖片數據；以及根據更新后的圖片數據，對各圖片圖層中的圖片進行合成。

根據本申請的第二方面，提供了一種圖片處理裝置，其特征在于，一個圖片圖層中包含至少一張圖片，裝置包括：添加模塊，用于根據接收的交互請求在多個圖片圖層的頂層添加交互圖層；關聯模塊，用交互請求中攜帶的待關聯圖片圖層的標識，將交互圖層與標識所對應的圖片圖層進行關聯；更新模塊，用于根據在交互圖層中輸入的圖片數據，更新交互圖層所關聯的圖片圖層中的圖片數據；以及合成模塊，用于根據更新后的圖片數據，對各圖片圖層中的圖片進行合成。

與現有技術相比，根據本申請的技術方案，能夠在疊加多個圖片的基礎上，滿足用戶對各圖片數據進行調整的需要，同時可以實時呈現用戶對圖片數據調整后的效果，并且可以在無需引入其他后端服務支持的情況下，在瀏覽器中直接合成圖片。

附圖說明

此處所說明的附圖用來提供對本申請的進一步理解，構成本申請的一部分，本申請的示意性實施例及其說明用于解釋本申請，并不構成對本申請的不當限定。在附圖中：

圖1是根據本申請一個實施例的圖片處理方法的流程圖；

圖2a是根據本申請一個實施例的圖片處理方法的示意圖；

圖2b是根據圖2a的圖片處理方法的操作過程中的用戶界面的示意圖；

圖2c是根據圖2a的圖片處理方法的合成后的圖片的示意圖；以及

圖3是根據本申請一個實施例的圖片處理裝置的框圖。

具體實施方式

在圖片處理領域，每一個圖層都是由許多像素組成的。在每一個圖層中，可以根據所提供的圖片數據繪制圖片。每一個含有圖片的圖層，即，圖片圖層，可以通過上下疊加的方式來組成整個圖像。

目前，主流瀏覽器HTML5的相關特性（canvas，畫布）允許用戶在用戶界面上進行繪圖操作。本申請提供一種在HTML5瀏覽器中實現對多圖片進行縮放、旋轉等調整并且對調整后的圖片進行合成的方法。

本申請的主要思想在于，通過根據接收的交互請求在多個圖片圖層的頂層添加交互圖層；根據該交互請求中攜帶的待關聯圖片圖層的標識，將交互圖層與標識所對應的圖片圖層進行關聯；根據在交互圖層中輸入的圖片數據，更新交互圖層所關聯的圖片圖層中的圖片數據；以及根據更新后的圖片數據對各圖片圖層中的圖片進行合成。該技術方案能夠在疊加多個圖片圖層的基礎上，通過用戶對位于頂層的交互圖層進行操作，調整各圖片圖層中的圖片數據（如，調整大小、位置、角度），同時可以實時呈現用戶對圖片數據調整后的效果，并且可以在無需引入其他后端服務支持的情況下，在瀏覽器中直接合成圖片。