基于WebGL的大容量图像缓存方法技术

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

Large capacity image caching method based on WebGL

The invention discloses a large capacity image caching method based on WebGL, which comprises the following steps: converting a large number of image objects through the canvas object will need to cache for WebGL texture objects, and WebGL cache to context; when the image object to get a lot of like one, using the WebGL shader program one texture object corresponding to the object, displayed on the canvas image cache object; this method is applicable to support the WebGL standard browser. Since the total area of the WebGL cache image is very large, it is generally possible to cache several G sized images on PC browsers, several to several times the maximum number of images supported by browsers. In the same operating environment, the cached image is fast, and the time it takes for the WebGL render to get the target can be completed within 1 milliseconds. Compatibility is good. All browsers that support WebGL support and are compatible with all types of images, and the resolution of the image is not affected.

【技术实现步骤摘要】
基于WebGL的大容量图像缓存方法
本专利技术属于图像显示领域，涉及一种基于WebGL的大容量图像缓存方法。
技术介绍
传统做法一般直接使用Image对象直接缓存图片。如下图像加载代码所示：图像加载(JS)varimage＝newImage()；image.src＝“http://XXX.xx/image.image”；但是每个浏览器能容纳的Image的对象的总大小是有限的，特别是移动设备的浏览器，一般浏览器限制内存里的image对象的总面积大小不能大于10000*10000(100M，估计值)大小。这个容量还是比较小的。当需要在浏览器中查看大量网页时，由于浏览器的容量较小，导致大量图像缓存很慢，严重影响浏览器端大量图像的获取和查看速率。
技术实现思路
本专利技术的一个目的是解决至少上述问题和/或缺陷，并提供至少后面将说明的优点。本专利技术还有一个目的是提供一种基于WebGL的大容量图像缓存方法。为此，本专利技术提供的技术方案为：一种基于WebGL的大容量图像缓存方法，包括如下步骤：通过canvas对象将需要缓存的大量image对象转换为WebGL的texture对象，并缓存至WebGLcontext中；当要获取所述大量image对象的其中一个对象时，利用WebGL的shader程序将该其中一对象对应的texture对象通过canvas对象展示出来；该方法适用于支持WebGL标准的浏览器的图像缓存。优选的是，所述的基于WebGL的大容量图像缓存方法中，所述通过canvas对象将需要缓存的大量image对象转换为WebGL的texture对象，并缓存至WebGLcontext中的具体方法包括如下步骤：1.1)构建一个canvas对象，并从其取得WebGLcontext；1.2)从WebGLcontext中取出当前设备支持的texture个数的最大值和texture大小的最大值；1.3)根据texture大小的最大值生成Canvas对象大小的最大值，并将需要缓存的图像使用canvas的drawimage方法按顺序绘制到指定的区域，当该canvas绘制满后，将该canvas转换成WebGL的texture对象，并缓存至WebGLcontext中；1.4)依次循环重复2)和3)，直至所有image对象缓存完或者创建的texture对象数目达到了所述texture个数的最大值。优选的是，所述的基于WebGL的大容量图像缓存方法中，在步骤1.4)之后，还包括如下步骤：1.5)删除掉用于拼接大图片的canvas对象。优选的是，所述的基于WebGL的大容量图像缓存方法中，所述利用WebGL的shader程序将该对象对应的texture对象转换image对象，并通过canvas对象展示出来的具体方法包括如下步骤：2.1)计算得到该其中一个对象对应的texture对象和该texture对象所在的区域；2.2)将WebGLcontext所在的canvas大小的值设置为该其中一个对象的image对象大小的值；2.3)使用WebGL的shader程序将该texture对象所在的区域的对象绘制为image对象，并通过步骤2.2)中的canvas展示出来。优选的是，所述的基于WebGL的大容量图像缓存方法中，在步骤2.3)之后，还包括如下步骤：2.4)创建一个新的canvas对象，使用drawimage办法，将步骤2.3)中展示的image对象复制到该新的canvas对象上并存储至设备。优选的是，所述的基于WebGL的大容量图像缓存方法中，所述支持WebGL标准的浏览器包括GoogleChrome9+、MozillaFirefox4+、Safari5.1+、Opera12alpha及以上版本和IE11+浏览器版本。本专利技术至少包括以下有益效果：1、WebGL缓存的图像的总面积非常大，一般在PC浏览器上能缓存几个G大小的图像，是最大图像的十几到几十倍。2、同样的操作环境下，缓存图像获取快，WebGL渲染获得目标的时间可以在1毫秒内完成。3、兼容性好，所有支持WebGL的浏览器都支持，兼容所有类型的图像，图像分辨率不受影响。本专利技术对设备硬件无各位要求，设计巧妙，思路新颖，完美解决了浏览器缓存容量小和速率慢的问题。本专利技术的其它优点、目标和特征将部分通过下面的说明体现，部分还将通过对本专利技术的研究和实践而为本领域的技术人员所理解。具体实施方式下面结合实施例对本专利技术做进一步的详细说明，以令本领域技术人员参照说明书文字能够据以实施。应当理解，本文所使用的诸如“具有”、“包含”以及“包括”术语并不配出一个或多个其它元件或其组合的存在或添加。本专利技术提供一种基于WebGL的大容量图像缓存方法，包括如下步骤：通过canvas对象将需要缓存的大量image对象转换为WebGL的texture对象，并缓存至WebGLcontext中；当要获取所述大量image对象的其中一个对象时，利用WebGL的shader程序将该其中一对象对应的texture对象通过canvas对象展示出来；该方法适用于支持WebGL标准的浏览器的图像缓存。由于WebGL是更底层的协议标准，其运行和缓存速度更快，且缓存的容量远远高于浏览器缓存容量。因此，本专利技术通过利用WebGL和canvas完美解决了浏览器缓存容量较小、速度较慢的问题。在本专利技术的其中一个实施例中，作为优选，所述通过canvas对象将需要缓存的大量image对象转换为WebGL的texture对象，并缓存至WebGLcontext中的具体方法包括如下步骤：1.1)构建一个canvas对象，并从其取得WebGLcontext；1.2)从WebGLcontext中取出当前设备支持的texture个数的最大值和texture大小的最大值；1.3)根据texture大小的最大值生成Canvas对象大小的最大值，并将需要缓存的图像使用canvas的drawimage方法按顺序绘制到指定的区域，当该canvas绘制满后，将该canvas转换成WebGL的texture对象，并缓存至WebGLcontext中；1.4)依次循环重复2)和3)，直至所有image对象缓存完或者创建的texture对象数目达到了所述texture个数的最大值。在上述方案中，作为优选，在步骤1.4)之后，还包括如下步骤：1.5)删除掉用于拼接大图片的canvas对象。在本专利技术的其中一个实施例中，作为优选，所述利用WebGL的shader程序将该对象对应的texture对象转换image对象，并通过canvas对象展示出来的具体方法包括如下步骤：2.1)计算得到该其中一个对象对应的texture对象和该texture对象所在的区域；2.2)将WebGLcontext所在的canvas大小的值设置为该其中一个对象的image对象大小的值；2.3)使用WebGL的shader程序将该texture对象所在的区域的对象绘制为image对象，并通过步骤2.2)中的canvas展示出来。在上述方案中，作为优选，在步骤2.3)之后，还包括如下步骤：2.4)创建一个新的canvas对象，使用drawimage办法，将步骤2.3)中展示的image对象复制到该新的canvas对象上并本文档来自技高网...

【技术保护点】
一种基于WebGL的大容量图像缓存方法，其特征在于，包括如下步骤：通过canvas对象将需要缓存的大量image对象转换为WebGL的texture对象，并缓存至WebGL context中；当要获取所述大量image对象的其中一个对象时，利用WebGL的shader程序将该其中一对象对应的texture对象通过canvas对象展示出来；该方法适用于支持WebGL标准的浏览器的图像缓存。

【技术特征摘要】
1.一种基于WebGL的大容量图像缓存方法，其特征在于，包括如下步骤：通过canvas对象将需要缓存的大量image对象转换为WebGL的texture对象，并缓存至WebGLcontext中；当要获取所述大量image对象的其中一个对象时，利用WebGL的shader程序将该其中一对象对应的texture对象通过canvas对象展示出来；该方法适用于支持WebGL标准的浏览器的图像缓存。2.如权利要求1所述的基于WebGL的大容量图像缓存方法，其特征在于，所述通过canvas对象将需要缓存的大量image对象转换为WebGL的texture对象，并缓存至WebGLcontext中的具体方法包括如下步骤：1.1)构建一个canvas对象，并从其取得WebGLcontext；1.2)从WebGLcontext中取出当前设备支持的texture个数的最大值和texture大小的最大值；1.3)根据texture大小的最大值生成Canvas对象大小的最大值，并将需要缓存的图像使用canvas的drawimage方法按顺序绘制到指定的区域，当该canvas绘制满后，将该canvas转换成WebGL的texture对象，并缓存至WebGLcontext中；1.4)依次循环重复2)和3)，直至所有image对象缓存完或者创建的texture对象数目达到了所述texture个数的最大值。3.如...

【专利技术属性】
技术研发人员：彭志勇，
申请(专利权)人：彭志勇，
类型：发明
国别省市：北京,11