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

在審

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

1.一種用于網(wǎng)頁(yè)的圖片合成方法，其特征在于，包括：

建立以根節(jié)點(diǎn)為背景節(jié)點(diǎn)的DOM樹(shù)狀結(jié)構(gòu)，其中所述DOM樹(shù)結(jié)構(gòu)的高度與調(diào)用通過(guò)繪圖應(yīng)用程序接口進(jìn)行圖片合成時(shí)的抽象數(shù)據(jù)結(jié)構(gòu)相似；

遍歷所述DOM樹(shù)狀結(jié)構(gòu)，其中所述DOM樹(shù)狀結(jié)構(gòu)中至少包括：帶內(nèi)容顯示節(jié)點(diǎn)和非顯示節(jié)點(diǎn)；

根據(jù)所述DOM樹(shù)狀結(jié)構(gòu)遍歷結(jié)果，進(jìn)行節(jié)點(diǎn)繪制后完成圖片合成。

2.根據(jù)權(quán)利要求1所述的用于網(wǎng)頁(yè)的圖片合成方法，其特征在于，建立以根節(jié)點(diǎn)為背景節(jié)點(diǎn)的DOM樹(shù)狀結(jié)構(gòu)包括：

通過(guò)HTML樹(shù)和CSS樣式表構(gòu)造所述DOM樹(shù)狀結(jié)構(gòu)。

3.根據(jù)權(quán)利要求1所述的用于網(wǎng)頁(yè)的圖片合成方法，其特征在于，遍歷所述DOM樹(shù)狀結(jié)構(gòu)包括：

如果遍歷時(shí)遇到有帶內(nèi)容顯示節(jié)點(diǎn)，則繪制到底層canvas中；

如果遍歷時(shí)遇到非顯示節(jié)點(diǎn)，則忽略；

其中，后遍歷到的節(jié)點(diǎn)出現(xiàn)在先遍歷到的節(jié)點(diǎn)上方。

4.根據(jù)權(quán)利要求1所述的用于網(wǎng)頁(yè)的圖片合成方法，其特征在于，根據(jù)所述DOM樹(shù)狀結(jié)構(gòu)遍歷結(jié)果，進(jìn)行節(jié)點(diǎn)繪制后完成圖片合成包括：

獲取根節(jié)點(diǎn)的尺寸，并創(chuàng)建一個(gè)與根節(jié)點(diǎn)尺寸相同的canvas畫布；

根據(jù)DOM應(yīng)用程序接口獲取當(dāng)前遍歷到的顯示節(jié)點(diǎn)尺寸和相對(duì)于根節(jié)點(diǎn)的坐標(biāo)；

如果節(jié)點(diǎn)是圖片內(nèi)容顯示節(jié)點(diǎn)，則利用canvas的drawImage繪制到canvas中；

如果節(jié)點(diǎn)是文字內(nèi)容顯示節(jié)點(diǎn)，則利用canvas的drawImage繪制到canvas中時(shí)還獲取預(yù)設(shè)顯示因素。

5.根據(jù)權(quán)利要求1所述的用于網(wǎng)頁(yè)的圖片合成方法，其特征在于，根據(jù)所述DOM樹(shù)狀結(jié)構(gòu)遍歷結(jié)果，進(jìn)行節(jié)點(diǎn)繪制后完成圖片合成，還包括：

根據(jù)當(dāng)前遍歷到的顯示節(jié)點(diǎn)尺寸和相對(duì)于根節(jié)點(diǎn)的坐標(biāo)，逐字循環(huán)檢測(cè)文本串；

在每一輪循環(huán)迭代中，判斷當(dāng)前長(zhǎng)度的文本是否進(jìn)行換行；

在循環(huán)結(jié)束后，根據(jù)換行結(jié)果得到文本被拆分成多少行和每行的文字結(jié)果，將所述文字結(jié)果采用逐行繪制到canvas中。

6.一種用于網(wǎng)頁(yè)的圖片合成裝置，其特征在于，包括：

建立模塊，用于建立以根節(jié)點(diǎn)為背景節(jié)點(diǎn)的DOM樹(shù)狀結(jié)構(gòu)，其中所述DOM樹(shù)結(jié)構(gòu)的高度與調(diào)用通過(guò)繪圖應(yīng)用程序接口進(jìn)行圖片合成時(shí)的抽象數(shù)據(jù)結(jié)構(gòu)相似；

遍歷模塊，用于遍歷所述DOM樹(shù)狀結(jié)構(gòu)，其中所述DOM樹(shù)狀結(jié)構(gòu)中至少包括：帶內(nèi)容顯示節(jié)點(diǎn)和非顯示節(jié)點(diǎn)；

繪制模塊，用于根據(jù)所述DOM樹(shù)狀結(jié)構(gòu)遍歷結(jié)果，進(jìn)行節(jié)點(diǎn)繪制后完成圖片合成。

7.根據(jù)權(quán)利要求6所述的用于網(wǎng)頁(yè)的圖片合成裝置，其特征在于，所述建立模塊，用于

通過(guò)HTML樹(shù)和CSS樣式表構(gòu)造所述DOM樹(shù)狀結(jié)構(gòu)。

8.根據(jù)權(quán)利要求6所述的用于網(wǎng)頁(yè)的圖片合成裝置，其特征在于，所述遍歷模塊，用于在

如果遍歷時(shí)遇到有帶內(nèi)容顯示節(jié)點(diǎn)，則繪制到底層canvas中；

如果遍歷時(shí)遇到非顯示節(jié)點(diǎn)，則忽略；

其中，后遍歷到的節(jié)點(diǎn)出現(xiàn)在先遍歷到的節(jié)點(diǎn)上方。

9.根據(jù)權(quán)利要求6所述的用于網(wǎng)頁(yè)的圖片合成裝置，其特征在于，所述繪制模塊，用于

獲取根節(jié)點(diǎn)的尺寸，并創(chuàng)建一個(gè)與根節(jié)點(diǎn)尺寸相同的canvas畫布；

根據(jù)DOM應(yīng)用程序接口獲取當(dāng)前遍歷到的顯示節(jié)點(diǎn)尺寸和相對(duì)于根節(jié)點(diǎn)的坐標(biāo)；

如果節(jié)點(diǎn)是圖片內(nèi)容顯示節(jié)點(diǎn)，則利用canvas的drawImage繪制到canvas中；

如果節(jié)點(diǎn)是文字內(nèi)容顯示節(jié)點(diǎn)，則利用canvas的drawImage繪制到canvas中時(shí)還獲取預(yù)設(shè)顯示因素。

10.根據(jù)權(quán)利要求6所述的用于網(wǎng)頁(yè)的圖片合成裝置，其特征在于，還包括：排版模塊，用于

根據(jù)當(dāng)前遍歷到的顯示節(jié)點(diǎn)尺寸和相對(duì)于根節(jié)點(diǎn)的坐標(biāo)，逐字循環(huán)檢測(cè)文本串；

在每一輪循環(huán)迭代中，判斷當(dāng)前長(zhǎng)度的文本是否進(jìn)行換行；

在循環(huán)結(jié)束后，根據(jù)換行結(jié)果得到文本被拆分成多少行和每行的文字結(jié)果，將所述文字結(jié)果采用逐行繪制到canvas中。