[发明专利]基于WebGL的大容量图像缓存方法

说明书

本发明公开了一种基于WebGL的大容量图像缓存方法，包括如下步骤：通过canvas对象将需要缓存的大量image对象转换为WebGL的texture对象，并缓存至WebGL context中；当要获取大量image对象的其中一个对象时，利用WebGL的shader程序将其中一对象对应的texture对象，通过canvas对象展示出来；该方法适用于支持WebGL标准的浏览器的图像缓存。由于WebGL缓存的图像的总面积非常大，一般在PC浏览器上能缓存几个G大小的图像，是浏览器支持的最大图像的几到几十倍。同样的操作环境下，缓存图像获取快，WebGL渲染获得目标的时间可以在1毫秒内完成。兼容性好，所有支持WebGL的浏览器都支持，兼容所有类型的图像，图像分辨率不受影响。

技术领域

本发明属于图像显示领域，涉及一种基于WebGL的大容量图像缓存方法。

背景技术

传统做法一般直接使用Image对象直接缓存图片。如下图像加载代码所示：

图像加载(JS)

var image＝new Image()；

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

但是每个浏览器能容纳的Image的对象的总大小是有限的，特别是移动设备的浏览器，一般浏览器限制内存里的image对象的总面积大小不能大于10000*10000(100M，估计值)大小。这个容量还是比较小的。当需要在浏览器中查看大量网页时，由于浏览器的容量较小，导致大量图像缓存很慢，严重影响浏览器端大量图像的获取和查看速率。

发明内容

本发明的一个目的是解决至少上述问题和/或缺陷，并提供至少后面将说明的优点。

本发明还有一个目的是提供一种基于WebGL的大容量图像缓存方法。

为此，本发明提供的技术方案为：

一种基于WebGL的大容量图像缓存方法，包括如下步骤：

通过canvas对象将需要缓存的大量image对象转换为WebGL的texture对象，并缓存至WebGL context中；

当要获取所述大量image对象的其中一个对象时，利用WebGL的shader程序将该其中一对象对应的texture对象通过canvas对象展示出来；

该方法适用于支持WebGL标准的浏览器的图像缓存。

优选的是，所述的基于WebGL的大容量图像缓存方法中，所述通过canvas对象将需要缓存的大量image对象转换为WebGL的texture对象，并缓存至WebGL context中的具体方法包括如下步骤：

1.1)构建一个canvas对象，并从其取得WebGL context；

1.2)从WebGL context中取出当前设备支持的texture个数的最大值和texture大小的最大值；

1.3)根据texture大小的最大值生成Canvas对象大小的最大值，并将需要缓存的图像使用canvas的drawimage方法按顺序绘制到指定的区域，当该canvas绘制满后，将该canvas转换成WebGL的texture对象，并缓存至WebGL context中；

1.4)依次循环重复2)和3)，直至所有image对象缓存完或者创建的texture对象数目达到了所述texture个数的最大值。

优选的是，所述的基于WebGL的大容量图像缓存方法中，在步骤1.4)之后，还包括如下步骤：

1.5)删除掉用于拼接大图片的canvas对象。