[發(fā)明專利]用于網(wǎng)頁的圖片合成方法以及裝置

在審

• 申請?zhí)枺?/td>: 201910679387.0
• 申請日: 2019-07-24
• 公開（公告）號: CN110442820A
• 公開（公告）日: 2019-11-12
• 發(fā)明（設(shè)計）人: 周晶;吳峰;郭偉
• 申請（專利權(quán)）人: 上海易點時空網(wǎng)絡(luò)有限公司
• 主分類號: G06F16/958
• 分類號: G06F16/958;G06F16/957;G06T11/00
• 代理公司: 北京卓唐知識產(chǎn)權(quán)代理有限公司 11541
• 代理人: 唐海力;李志剛

本申請公開了一種用于網(wǎng)頁的圖片合成方法以及裝置。該方法包括建立以根節(jié)點為背景節(jié)點的DOM樹狀結(jié)構(gòu)，其中所述DOM樹結(jié)構(gòu)的高度與調(diào)用通過繪圖應(yīng)用程序接口進(jìn)行圖片合成時的抽象數(shù)據(jù)結(jié)構(gòu)相似；遍歷所述DOM樹狀結(jié)構(gòu)，其中所述DOM樹狀結(jié)構(gòu)中至少包括：帶內(nèi)容顯示節(jié)點和非顯示節(jié)點；根據(jù)所述DOM樹狀結(jié)構(gòu)遍歷結(jié)果，進(jìn)行節(jié)點繪制后完成圖片合成。本申請解決了圖片合成重復(fù)性高且容易出錯的技術(shù)問題。通過本申請實現(xiàn)了簡單的javascript轉(zhuǎn)化庫，可以將圖片合成的任務(wù)抽象到操作DOM樹上，最后將DOM樹轉(zhuǎn)換為圖片。

技術(shù)領(lǐng)域

本申請涉及WEB前端開發(fā)領(lǐng)域，具體而言，涉及一種用于網(wǎng)頁的圖片合成方法以及裝置。

背景技術(shù)

圖片合成，是指根據(jù)用戶交互結(jié)果生成一張可以分享微信朋友圈的海報功能和需求。

發(fā)明人發(fā)現(xiàn)，在進(jìn)行圖片合成時，一些方法中采用逐個節(jié)點調(diào)用API需要的操作繁瑣重復(fù)且耗時，容易出錯。此外，另一些方法中由于需要需要引入一個額外的庫，增加了網(wǎng)絡(luò)加載成本。

針對相關(guān)技術(shù)中圖片合成重復(fù)性高且容易出錯的問題，目前尚未提出有效的解決方案。

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

本申請的主要目的在于提供一種用于網(wǎng)頁的圖片合成方法以及裝置，以解決圖片合成重復(fù)性高且容易出錯的問題。

為了實現(xiàn)上述目的，根據(jù)本申請的一個方面，提供了一種用于網(wǎng)頁的圖片合成方法以及裝置。

根據(jù)本申請的用于網(wǎng)頁的圖片合成方法包括：建立以根節(jié)點為背景節(jié)點的DOM樹狀結(jié)構(gòu)，其中所述DOM樹結(jié)構(gòu)的高度與調(diào)用通過繪圖應(yīng)用程序接口進(jìn)行圖片合成時的抽象數(shù)據(jù)結(jié)構(gòu)相似；遍歷所述DOM樹狀結(jié)構(gòu)，其中所述DOM樹狀結(jié)構(gòu)中至少包括：帶內(nèi)容顯示節(jié)點和非顯示節(jié)點；根據(jù)所述DOM樹狀結(jié)構(gòu)遍歷結(jié)果，進(jìn)行節(jié)點繪制后完成圖片合成。

進(jìn)一步地，建立以根節(jié)點為背景節(jié)點的DOM樹狀結(jié)構(gòu)包括：通過HTML樹和CSS樣式表構(gòu)造所述DOM樹狀結(jié)構(gòu)。

進(jìn)一步地，遍歷所述DOM樹狀結(jié)構(gòu)包括：如果遍歷時遇到有帶內(nèi)容顯示節(jié)點，則繪制到底層canvas中；如果遍歷時遇到非顯示節(jié)點，則忽略；其中，后遍歷到的節(jié)點出現(xiàn)在先遍歷到的節(jié)點上方。

進(jìn)一步地，根據(jù)所述DOM樹狀結(jié)構(gòu)遍歷結(jié)果，進(jìn)行節(jié)點繪制后完成圖片合成包括：獲取根節(jié)點的尺寸，并創(chuàng)建一個與根節(jié)點尺寸相同的canvas畫布；根據(jù)DOM應(yīng)用程序接口獲取當(dāng)前遍歷到的顯示節(jié)點尺寸和相對于根節(jié)點的坐標(biāo)；如果節(jié)點是圖片內(nèi)容顯示節(jié)點，則利用canvas的drawImage繪制到canvas中；如果節(jié)點是文字內(nèi)容顯示節(jié)點，則利用canvas的drawImage繪制到canvas中時還獲取預(yù)設(shè)顯示因素。

進(jìn)一步地，根據(jù)所述DOM樹狀結(jié)構(gòu)遍歷結(jié)果，進(jìn)行節(jié)點繪制后完成圖片合成，還包括：根據(jù)當(dāng)前遍歷到的顯示節(jié)點尺寸和相對于根節(jié)點的坐標(biāo)，逐字循環(huán)檢測文本串；在每一輪循環(huán)迭代中，判斷當(dāng)前長度的文本是否進(jìn)行換行；在循環(huán)結(jié)束后，根據(jù)換行結(jié)果得到文本被拆分成多少行和每行的文字結(jié)果，將所述文字結(jié)果采用逐行繪制到canvas中。

為了實現(xiàn)上述目的，根據(jù)本申請的另一方面，提供了一種用于網(wǎng)頁的圖片合成裝置。

根據(jù)本申請的用于網(wǎng)頁的圖片合成裝置包括：建立模塊，用于建立以根節(jié)點為背景節(jié)點的DOM樹狀結(jié)構(gòu)，其中所述DOM樹結(jié)構(gòu)的高度與調(diào)用通過繪圖應(yīng)用程序接口進(jìn)行圖片合成時的抽象數(shù)據(jù)結(jié)構(gòu)相似；遍歷模塊，用于遍歷所述DOM樹狀結(jié)構(gòu)，其中所述DOM樹狀結(jié)構(gòu)中至少包括：帶內(nèi)容顯示節(jié)點和非顯示節(jié)點；繪制模塊，用于根據(jù)所述DOM樹狀結(jié)構(gòu)遍歷結(jié)果，進(jìn)行節(jié)點繪制后完成圖片合成。

進(jìn)一步地，所述建立模塊，用于通過HTML樹和CSS樣式表構(gòu)造所述DOM樹狀結(jié)構(gòu)。