[發(fā)明專利]基于WebGL的大容量圖像緩存方法

有效

• 申請?zhí)枺?/td>: 201611125042.3
• 申請日: 2016-12-08
• 公開（公告）號: CN106709864B
• 公開（公告）日: 2019-03-12
• 發(fā)明（設計）人: 彭志勇
• 申請（專利權）人: 彭志勇
• 主分類號: G06T1/60
• 分類號: G06T1/60;G06F16/957
• 代理公司: 北京遠大卓悅知識產權代理事務所(普通合伙) 11369
• 代理人: 史霞

本發(fā)明公開了一種基于WebGL的大容量圖像緩存方法，包括如下步驟：通過canvas對象將需要緩存的大量image對象轉換為WebGL的texture對象，并緩存至WebGL context中；當要獲取大量image對象的其中一個對象時，利用WebGL的shader程序將其中一對象對應的texture對象，通過canvas對象展示出來；該方法適用于支持WebGL標準的瀏覽器的圖像緩存。由于WebGL緩存的圖像的總面積非常大，一般在PC瀏覽器上能緩存幾個G大小的圖像，是瀏覽器支持的最大圖像的幾到幾十倍。同樣的操作環(huán)境下，緩存圖像獲取快，WebGL渲染獲得目標的時間可以在1毫秒內完成。兼容性好，所有支持WebGL的瀏覽器都支持，兼容所有類型的圖像，圖像分辨率不受影響。

技術領域

本發(fā)明屬于圖像顯示領域，涉及一種基于WebGL的大容量圖像緩存方法。

背景技術

傳統(tǒng)做法一般直接使用Image對象直接緩存圖片。如下圖像加載代碼所示：

圖像加載(JS)

var image＝new Image()；

image.src＝“http://XXX.xx/image.image”；

但是每個瀏覽器能容納的Image的對象的總大小是有限的，特別是移動設備的瀏覽器，一般瀏覽器限制內存里的image對象的總面積大小不能大于10000*10000(100M，估計值)大小。這個容量還是比較小的。當需要在瀏覽器中查看大量網頁時，由于瀏覽器的容量較小，導致大量圖像緩存很慢，嚴重影響瀏覽器端大量圖像的獲取和查看速率。

發(fā)明內容

本發(fā)明的一個目的是解決至少上述問題和/或缺陷，并提供至少后面將說明的優(yōu)點。

本發(fā)明還有一個目的是提供一種基于WebGL的大容量圖像緩存方法。

為此，本發(fā)明提供的技術方案為：

一種基于WebGL的大容量圖像緩存方法，包括如下步驟：

通過canvas對象將需要緩存的大量image對象轉換為WebGL的texture對象，并緩存至WebGL context中；

當要獲取所述大量image對象的其中一個對象時，利用WebGL的shader程序將該其中一對象對應的texture對象通過canvas對象展示出來；

該方法適用于支持WebGL標準的瀏覽器的圖像緩存。

優(yōu)選的是，所述的基于WebGL的大容量圖像緩存方法中，所述通過canvas對象將需要緩存的大量image對象轉換為WebGL的texture對象，并緩存至WebGL context中的具體方法包括如下步驟：

1.1)構建一個canvas對象，并從其取得WebGL context；

1.2)從WebGL context中取出當前設備支持的texture個數(shù)的最大值和texture大小的最大值；

1.3)根據(jù)texture大小的最大值生成Canvas對象大小的最大值，并將需要緩存的圖像使用canvas的drawimage方法按順序繪制到指定的區(qū)域，當該canvas繪制滿后，將該canvas轉換成WebGL的texture對象，并緩存至WebGL context中；

1.4)依次循環(huán)重復2)和3)，直至所有image對象緩存完或者創(chuàng)建的texture對象數(shù)目達到了所述texture個數(shù)的最大值。

優(yōu)選的是，所述的基于WebGL的大容量圖像緩存方法中，在步驟1.4)之后，還包括如下步驟：

1.5)刪除掉用于拼接大圖片的canvas對象。