一種圖片處理方法和裝置的制造方法
【技術領域】
[0001]本申請涉及圖片處理領域，更具體地，涉及一種圖片處理方法和裝置。
【背景技術】
[0002]用戶在瀏覽器中對圖片進行處理的時候，有時需要將多個圖片合成為一個圖片，并且在合成之前，通常需要對待合成圖片中的某些圖片進行縮放、旋轉(zhuǎn)等操作。
[0003]現(xiàn)有技術中，存在多種對多個圖片進行合成的方法。其中一種方法是，基于圖塊模板對多圖片進行合成，即將不同的圖片在以某種固定的圖塊模式或布局拼在一起。這種方法的缺陷在于，待合成圖片的合成位置會因為圖塊模板的設定而被固定住，并且用戶無法對圖片進行縮放、旋轉(zhuǎn)等操作。另外一種方法是，將多個待合成圖片作為多個圖層在畫布上進行疊加，操作以達到顯示合成效果的目的。這種方法會帶來的一些問題包括，當用戶需要進行調(diào)整的圖片不在頂層時，由于該層被其上層的圖片遮蓋，用戶無法對該層的圖片的操作；此外，如果想要對所疊加的圖片進行合成，必須依賴后端服務器相關的技術來支持，而不能在瀏覽器中直接生成合成的圖片。
[0004]因此，在本領域中，需要一種圖片處理的方案，能夠解決現(xiàn)有技術中用戶無法對除頂層圖片之外的其他圖片進行調(diào)整和無法在瀏覽器中直接合成圖片等問題。

【發(fā)明內(nèi)容】

[0005]本申請的主要目的在于提供一種圖片處理技術，以解決現(xiàn)有技術中用戶無法對除頂層圖片之外的其他圖片數(shù)據(jù)進行調(diào)整和無法在瀏覽器中直接合成圖片等問題。
[0006]根據(jù)本申請的第一方面，提供了一種圖片處理方法，其特征在于，方法包括:根據(jù)接收的交互請求在多個圖片圖層的頂層添加交互圖層，其中交互請求中攜帶有待關聯(lián)圖片圖層的標識；根據(jù)交互請求中攜帶的待關聯(lián)圖片圖層的標識，將交互圖層與標識所對應的圖片圖層進行關聯(lián)；根據(jù)在交互圖層中輸入的圖片數(shù)據(jù)，更新交互圖層所關聯(lián)的圖片圖層中的圖片數(shù)據(jù)；以及根據(jù)更新后的圖片數(shù)據(jù)，對各圖片圖層中的圖片進行合成。
[0007]根據(jù)本申請的第二方面，提供了一種圖片處理裝置，其特征在于，一個圖片圖層中包含至少一張圖片，裝置包括:添加模塊，用于根據(jù)接收的交互請求在多個圖片圖層的頂層添加交互圖層；關聯(lián)模塊，用交互請求中攜帶的待關聯(lián)圖片圖層的標識，將交互圖層與標識所對應的圖片圖層進行關聯(lián)；更新模塊，用于根據(jù)在交互圖層中輸入的圖片數(shù)據(jù)，更新交互圖層所關聯(lián)的圖片圖層中的圖片數(shù)據(jù)；以及合成模塊，用于根據(jù)更新后的圖片數(shù)據(jù)，對各圖片圖層中的圖片進行合成。
[0008]與現(xiàn)有技術相比，根據(jù)本申請的技術方案，能夠在疊加多個圖片的基礎上，滿足用戶對各圖片數(shù)據(jù)進行調(diào)整的需要，同時可以實時呈現(xiàn)用戶對圖片數(shù)據(jù)調(diào)整后的效果，并且可以在無需引入其他后端服務支持的情況下，在瀏覽器中直接合成圖片。
【附圖說明】
[0009]此處所說明的附圖用來提供對本申請的進一步理解，構(gòu)成本申請的一部分，本申請的示意性實施例及其說明用于解釋本申請，并不構(gòu)成對本申請的不當限定。在附圖中:
[0010]圖1是根據(jù)本申請一個實施例的圖片處理方法的流程圖；
[0011]圖2a是根據(jù)本申請一個實施例的圖片處理方法的示意圖；
[0012]圖2b是根據(jù)圖2a的圖片處理方法的操作過程中的用戶界面的示意圖；
[0013]圖2c是根據(jù)圖2a的圖片處理方法的合成后的圖片的示意圖；以及
[0014]圖3是根據(jù)本申請一個實施例的圖片處理裝置的框圖。
【具體實施方式】
[0015]在圖片處理領域，每一個圖層都是由許多像素組成的。在每一個圖層中，可以根據(jù)所提供的圖片數(shù)據(jù)繪制圖片。每一個含有圖片的圖層，即，圖片圖層，可以通過上下疊加的方式來組成整個圖像。
[0016]目前，主流瀏覽器HTML5的相關特性(canvas，畫布)允許用戶在用戶界面上進行繪圖操作。本申請?zhí)峁┮环N在HTML5瀏覽器中實現(xiàn)對多圖片進行縮放、旋轉(zhuǎn)等調(diào)整并且對調(diào)整后的圖片進行合成的方法。
[0017]本申請的主要思想在于，通過根據(jù)接收的交互請求在多個圖片圖層的頂層添加交互圖層；根據(jù)該交互請求中攜帶的待關聯(lián)圖片圖層的標識，將交互圖層與標識所對應的圖片圖層進行關聯(lián)；根據(jù)在交互圖層中輸入的圖片數(shù)據(jù)，更新交互圖層所關聯(lián)的圖片圖層中的圖片數(shù)據(jù)；以及根據(jù)更新后的圖片數(shù)據(jù)對各圖片圖層中的圖片進行合成。該技術方案能夠在疊加多個圖片圖層的基礎上，通過用戶對位于頂層的交互圖層進行操作，調(diào)整各圖片圖層中的圖片數(shù)據(jù)(如，調(diào)整大小、位置、角度)，同時可以實時呈現(xiàn)用戶對圖片數(shù)據(jù)調(diào)整后的效果，并且可以在無需引入其他后端服務支持的情況下，在瀏覽器中直接合成圖片。
[0018]為使本申請的目的、技術方案和優(yōu)點更加清楚，下面將結(jié)合本申請具體實施例及相應的附圖對本申請技術方案進行清楚、完整地描述。顯然，所描述的實施例僅是本申請一部分實施例，而不是全部的實施例。基于本申請中的實施例，本領域普通技術人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都屬于本申請保護的范圍。
[0019]參考圖1，圖1是根據(jù)本申請一個實施例的圖片處理方法100的流程圖。如圖1所示，方法100開始于步驟101。
[0020]在步驟101，根據(jù)接收的交互請求在多個圖片圖層的頂層添加交互圖層。
[0021]具體而言，在對圖片進行處理的初始階段，一個圖片圖層中包含至少一張圖片，其中，圖層的大小可以是預先設定的，每一個圖層的大小、形狀等規(guī)格可以相同。然后，可以根據(jù)合成時需要的順序，將含有圖片的圖層由底向上依次疊加，同時記錄并存儲所有圖片圖層中的圖片數(shù)據(jù)。
[0022]圖片數(shù)據(jù)可以包括圖片圖層中的圖片的序號(按疊加順序計算)、內(nèi)容、大小(例如，高度和寬度)、中心點坐標和角度中的至少一種。記錄并存儲這些數(shù)據(jù)。
[0023]當接收到用戶啟動交互的交互請求時，執(zhí)行在圖片圖層的頂層添加一透明的交互圖層。交互圖層的大小、形狀等規(guī)格可以與圖片圖層相同。該交互圖層可以用于捕捉用戶對交互圖層的操作，如通過觸屏、鼠標等輸入設備執(zhí)行的拖拽、點擊等。
[0024]在步驟101中，根據(jù)標識所對應的圖片圖層中的圖片數(shù)據(jù)，可以在交互圖層中生成交互提示，以供用戶基于交互提示對交互圖層進行操作。具體地，可以根據(jù)標識所對應的圖片圖層中的圖片的大小、中心點坐標和角度等數(shù)據(jù)，在交互圖層繪制交互提示。
[0025]交互提示在交互圖層中的顯示形式可以包括方框、陰影等。
[0026]交互提示的內(nèi)容可以包括:提示圖片縮放的拖拽點、角度旋轉(zhuǎn)提示、提示性文字或其他任何可以向用戶提供操作提示的提示性信息。
[0027]由于在頂層的交互圖層中生成交互提示，該交互提示不會被下面的其他圖片圖層遮擋，可以完整地呈現(xiàn)給用戶，從而提高了用戶體驗。
[0028]在步驟102，根據(jù)交互請求中攜帶的待關聯(lián)圖片圖層的標識，將交互圖層與標識所對應的圖片圖層進行關聯(lián)。
[0029]具體而言，每一個圖片圖層都對應一個標識，如序號等。所接收的交互請求中攜帶有圖片圖層的標識，可以根據(jù)該標識找到相對應的圖片圖層，以便當接收到用戶在交互圖層輸入的圖片數(shù)據(jù)后，可以將該圖片數(shù)據(jù)傳遞到該圖片圖層。