CN106709864B - Large capacity image buffer storage method based on WebGL - Google Patents
Large capacity image buffer storage method based on WebGL Download PDFInfo
- Publication number
- CN106709864B CN106709864B CN201611125042.3A CN201611125042A CN106709864B CN 106709864 B CN106709864 B CN 106709864B CN 201611125042 A CN201611125042 A CN 201611125042A CN 106709864 B CN106709864 B CN 106709864B
- Authority
- CN
- China
- Prior art keywords
- webgl
- image
- canvas
- texture
- buffer storage
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T1/00—General purpose image data processing
- G06T1/60—Memory management
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- General Engineering & Computer Science (AREA)
- Information Transfer Between Computers (AREA)
- Image Generation (AREA)
Abstract
The large capacity image buffer storage method based on WebGL that the invention discloses a kind of includes the following steps: the texture object that a large amount of image objects cached will be needed to be converted to WebGL by canvas object, and caches into WebGL context；When to obtain one of object of a large amount of image objects, one pair of them are shown as corresponding texture object by canvas object using the shader program of WebGL；This method is suitable for supporting the image buffer storage of the browser of WebGL standard.Since the gross area of the image of WebGL caching is very big, the image of several G sizes can be cached generally on PC browser, be a few to tens of times for the maximum image that browser is supported.Under same operating environment, cache image is obtained fastly, and the time that WebGL rendering obtains target can complete in 1 millisecond.Good compatibility, all browsers for supporting WebGL are all supported, all types of images are compatible with, and image resolution ratio is unaffected.
Description
Technical field
The invention belongs to image display arts, are related to a kind of large capacity image buffer storage method based on WebGL.
Background technique
Traditional method generally directly directly caches picture using Image object.Shown in following image loading code:
Image loads (JS)
Var image=new Image ()；
Image.src=" http://XXX.xx/image.image "；
But the total size of the object of Image that each browser can accommodate is limited, especially mobile device is clear
Look at device, the gross area size of the image object in general browser limitation memory cannot be greater than 10000*10000 (100M, estimation
Value) size.This capacity or smaller.When needing to check a large amount of webpages in a browser, due to the capacity of browser
It is smaller, cause great amount of images caching very slow, seriously affects the acquisition of browser end great amount of images and check rate.
Summary of the invention
It is excellent it is an object of the invention to solve at least the above problems and/or defect, and provide at least to will be described later
Point.
The large capacity image buffer storage method based on WebGL that it is a still further object of the present invention to provide a kind of.
For this purpose, technical solution provided by the invention are as follows:
A kind of large capacity image buffer storage method based on WebGL, includes the following steps:
The a large amount of image objects cached will be needed to be converted to the texture object of WebGL by canvas object, and delayed
It deposits into WebGL context；
When to obtain one of object of a large amount of image objects, using the shader program of WebGL by this its
The corresponding texture object of middle an object is shown by canvas object；
This method is suitable for supporting the image buffer storage of the browser of WebGL standard.
Preferably, in the large capacity image buffer storage method based on WebGL, it is described need to by canvas object
The a large amount of image objects to be cached are converted to the texture object of WebGL, and cache the specific side into WebGL context
Method includes the following steps:
1.1) a canvas object is constructed, and obtains WebGL context from it；
1.2) maximum value and the texture that the texture number that current device is supported is taken out from WebGL context are big
Small maximum value；
1.3) maximum value of Canvas object size is generated according to the maximum value of texture size, and needs are cached
Image is plotted to specified region using the drawimage method of canvas in order, after the canvas is drawn completely, by this
Canvas is converted into the texture object of WebGL, and caches into WebGL context；
1.4) repetition 2 is circuited sequentially) and 3), up to all image target caches are complete or the texture number of objects of creation
Mesh has reached the maximum value of the texture number.
Preferably, in the large capacity image buffer storage method based on WebGL, after step 1.4), further include
Following steps:
1.5) the canvas object for splicing big picture is deleted.
Preferably, in the large capacity image buffer storage method based on WebGL, the shader using WebGL
The corresponding texture object of the object is converted image object, and the specific method shown by canvas object by program
Include the following steps:
2.1) region where one of corresponding texture object of object and the texture object is calculated；
2.2) value of the canvas size where WebGL context is set to image pairs of one of object
As the value of size；
It 2.3) the use of the shader program of WebGL is image pairs by the objects draw in the region where the texture object
As, and shown by the canvas in step 2.2).
Preferably, in the large capacity image buffer storage method based on WebGL, after step 2.3), further include
Following steps:
2.4) a new canvas object is created, using drawimage method, by image shown in step 2.3)
Object is copied on the new canvas object and is stored to equipment.
Preferably, described to support the clear of WebGL standard in the large capacity image buffer storage method based on WebGL
Device of looking at includes Google Chrome 9+, Mozilla Firefox 4+, Safari 5.1+, 12 alpha or more of Opera
Version and IE11+ browser version.
The present invention is include at least the following beneficial effects:
1, the gross area of the image of WebGL caching is very big, and the figure of several G sizes can be cached generally on PC browser
Picture is the ten of maximum image a few to tens of times.
2, under same operating environment, cache image is obtained fastly, and the time that WebGL rendering obtains target can be at 1 millisecond
Interior completion.
3, good compatibility, all browsers for supporting WebGL are all supported, are compatible with all types of images, image resolution ratio
It is unaffected.
The present invention requires device hardware without everybody, ingenious in design, and thinking is novel, and browser rs cache capacity has been solved perfectly
The small and slow problem of rate.
Further advantage, target and feature of the invention will be partially reflected by the following instructions, and part will also be by this
The research and practice of invention and be understood by the person skilled in the art.
Specific embodiment
The present invention will be further described in detail below with reference to the embodiments, to enable those skilled in the art referring to specification
Text can be implemented accordingly.
It should be appreciated that such as " having ", "comprising" and " comprising " term used herein do not allot one or more
The presence or addition of a other elements or combinations thereof.
The present invention provides a kind of large capacity image buffer storage method based on WebGL, includes the following steps:
The a large amount of image objects cached will be needed to be converted to the texture object of WebGL by canvas object, and delayed
It deposits into WebGL context；
When to obtain one of object of a large amount of image objects, using the shader program of WebGL by this its
The corresponding texture object of middle an object is shown by canvas object；
This method is suitable for supporting the image buffer storage of the browser of WebGL standard.Since WebGL is the Protocol Standard of more bottom
Standard runs and caches speed faster, and the capacity cached is significantly larger than browser rs cache capacity.Therefore, the present invention passes through benefit
It has been solved perfectly that browser rs cache capacity is smaller, slow problem with WebGL and canvas.
It is of the invention in one embodiment, preferably, it is described by canvas object will need cache it is big
Amount image object is converted to the texture object of WebGL, and the specific method cached into WebGL context includes as follows
Step:
1.1) a canvas object is constructed, and obtains WebGL context from it；
1.2) maximum value and the texture that the texture number that current device is supported is taken out from WebGL context are big
Small maximum value；
1.3) maximum value of Canvas object size is generated according to the maximum value of texture size, and needs are cached
Image is plotted to specified region using the drawimage method of canvas in order, after the canvas is drawn completely, by this
Canvas is converted into the texture object of WebGL, and caches into WebGL context；
1.4) repetition 2 is circuited sequentially) and 3), up to all image target caches are complete or the texture number of objects of creation
Mesh has reached the maximum value of the texture number.
In the above scheme, further include following steps preferably, after step 1.4):
1.5) the canvas object for splicing big picture is deleted.
It is of the invention in one embodiment, preferably, the shader program using WebGL is by the object
Corresponding texture object converts image object, and includes following step by the specific method that canvas object is shown
It is rapid:
2.1) region where one of corresponding texture object of object and the texture object is calculated；
2.2) value of the canvas size where WebGL context is set to image pairs of one of object
As the value of size；
It 2.3) the use of the shader program of WebGL is image pairs by the objects draw in the region where the texture object
As, and shown by the canvas in step 2.2).
In the above scheme, further include following steps preferably, after step 2.3):
2.4) a new canvas object is created, using drawimage method, by image shown in step 2.3)
Object is copied on the new canvas object and is stored to equipment.This step can be by the image buffer storage checked to local.
If handled for WebGL, Webgl directly can be directly used in using canvas object after third step and handled.
In the above scheme, preferably, it is described support WebGL standard browser include Google Chrome 9+,
Mozilla Firefox 4+, Safari 5.1+, Opera 12alpha and the above version and IE11+ browser version.But no
It is confined to this.
It is of the invention in one embodiment, when showing the CT examination of medical image in webpage when (STUDY), one
A STUDY may include the picture of a up to several thousand sheets, it is necessary to by image buffer storage in browser end, by using side of the invention
Method checks that the rate of CT result greatly increases in browser end, checking for CT result can be rapidly completed, and the switching between picture
Quickly, it is convenient for horizontal and vertical comparison, judges the state of an illness in time conducive to doctor.
Module number and treatment scale described herein are for simplifying explanation of the invention.To it is of the invention based on
The application of the large capacity image buffer storage method of WebGL, modifications and variations will be readily apparent to persons skilled in the art.
Since WebGL is the consensus standard of more bottom, runs and cache speed faster, and the capacity cached is significantly larger than
Browser rs cache capacity.Therefore, browser rs cache capacity has been solved perfectly by the combination using WebGL and canvas in the present invention
Smaller, slow problem.
Although the embodiments of the present invention have been disclosed as above, but its is not only in the description and the implementation listed
With it can be fully applied to various fields suitable for the present invention, for those skilled in the art, can be easily
Realize other modification, therefore without departing from the general concept defined in the claims and the equivalent scope, the present invention is simultaneously unlimited
In specific details and embodiment shown and described herein.
Claims (5)
1. a kind of large capacity image buffer storage method based on WebGL, which comprises the steps of:
The texture object that a large amount of image objects cached will be needed to be converted to WebGL by canvas object, and cache extremely
In WebGL context；
When to obtain one of object of a large amount of image objects, using WebGL shader program by this wherein one
The corresponding texture object of object is shown by canvas object；
This method is suitable for supporting the image buffer storage of the browser of WebGL standard；
It is described a large amount of image objects cached to be needed to be converted to the texture object of WebGL by canvas object, and delay
The specific method deposited into WebGL context includes the following steps:
1.1) a canvas object is constructed, and obtains WebGL context from it；
1.2) maximum value and texture size of texture number of taking-up current device support from WebGL context
Maximum value；
1.3) maximum value of canvas object size, and the image that needs are cached are generated according to the maximum value of texture size
It is plotted to specified region in order using the drawimage method of canvas, after the canvas is drawn completely, by the canvas
It is converted into the texture object of WebGL, and is cached into WebGL context；
1.4) repetition 1.2 is circuited sequentially) and 1.3), up to all image target caches are complete or the texture number of objects of creation
Mesh has reached the maximum value of the texture number.
2. the large capacity image buffer storage method based on WebGL as described in claim 1, which is characterized in that step 1.4) it
Afterwards, further include following steps:
1.5) the canvas object for splicing big picture is deleted.
3. the large capacity image buffer storage method based on WebGL as described in claim 1, which is characterized in that described to utilize WebGL
Shader program the corresponding texture object of the object converted into image object, and shown by canvas object
Specific method includes the following steps:
2.1) region where one of corresponding texture object of object and the texture object is calculated；
2.2) the image object for setting one of object for the value of the canvas size where WebGL context is big
Small value；
It 2.3) the use of the shader program of WebGL is image object by the objects draw in the region where the texture object,
And it is shown by the canvas in step 2.2).
4. the large capacity image buffer storage method based on WebGL as claimed in claim 3, which is characterized in that step 2.3) it
Afterwards, further include following steps:
2.4) a new canvas object is created, using drawimage method, by image object shown in step 2.3)
It copies on the new canvas object and stores to equipment.
5. the large capacity image buffer storage method based on WebGL as described in claim 1, which is characterized in that the support WebGL
The browser of standard includes Google Chrome 9+, Mozilla Firefox 4+, Safari 5.1+, Opera 12
Alpha and the above version and IE11+ browser version.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611125042.3A CN106709864B (en) | 2016-12-08 | 2016-12-08 | Large capacity image buffer storage method based on WebGL |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611125042.3A CN106709864B (en) | 2016-12-08 | 2016-12-08 | Large capacity image buffer storage method based on WebGL |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106709864A CN106709864A (en) | 2017-05-24 |
| CN106709864B true CN106709864B (en) | 2019-03-12 |
Family
ID=58936007
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201611125042.3A Active CN106709864B (en) | 2016-12-08 | 2016-12-08 | Large capacity image buffer storage method based on WebGL |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106709864B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107424211B (en) * | 2017-06-15 | 2021-01-05 | 彭志勇 | WebGL volume reconstruction method |
| CN107590194A (en) * | 2017-08-14 | 2018-01-16 | 彭志勇 | The cutting loading display method of super large image |
Family Cites Families (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102012906B (en) * | 2010-10-27 | 2012-01-25 | 南京聚社数字科技有限公司 | Three-dimensional scene management platform based on SaaS architecture and editing and browsing method |
| JP2013041500A (en) * | 2011-08-18 | 2013-02-28 | Wing Keung Cheung | 3d engine operating with only html5 2d-drawing specification |
| CN102323882B (en) * | 2011-08-31 | 2014-03-12 | 北京华电万通科技有限公司 | Data processing device and method applied to Web3D |
| KR101955978B1 (en) * | 2012-05-23 | 2019-03-08 | 엘지전자 주식회사 | Image display device and memory management method of the same |
| CN105095280B (en) * | 2014-05-13 | 2020-02-14 | 腾讯科技（深圳）有限公司 | Browser caching method and device |
| CN105303506B (en) * | 2014-06-19 | 2018-10-26 | Tcl集团股份有限公司 | A kind of data parallel processing method and system based on HTML5 |
| AU2014100798A4 (en) * | 2014-07-10 | 2014-08-21 | Visualsys Pty Ltd | A visual role and transition based method and system for developing complex web applications |
-
2016
- 2016-12-08 CN CN201611125042.3A patent/CN106709864B/en active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN106709864A (en) | 2017-05-24 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106709240B (en) | Medicine DICOM image display method | |
| US20180007417A1 (en) | Method and system for improving application sharing by dynamic partitioning | |
| CN104134214B (en) | A kind of storage of digital slices image and display methods based on image pyramid layering | |
| CN106204498B (en) | Image correction method and device | |
| CN106709864B (en) | Large capacity image buffer storage method based on WebGL | |
| EP3001340A1 (en) | Medical imaging viewer caching techniques | |
| CN107621932B (en) | Local amplification method and device for display image | |
| CN109998578B (en) | Method and apparatus for predicting an air correction table for computed tomography | |
| CN108600782A (en) | Video super-resolution method, device and computer readable storage medium | |
| Huang et al. | Real-time reference A-line subtraction and saturation artifact removal using graphics processing unit for high-frame-rate Fourier-domain optical coherence tomography video imaging | |
| CN111325675A (en) | Image processing method, device, equipment and storage medium | |
| GB2524047A (en) | Improvements in and relating to rendering of graphics on a display device | |
| CN108198125B (en) | Image processing method and device | |
| CN107291506A (en) | A kind of method and apparatus at renewal APP interfaces | |
| US10521918B2 (en) | Method and device for filtering texture, using patch shift | |
| CN111767490A (en) | Method, device, equipment and storage medium for displaying image | |
| US20200202479A1 (en) | Method and Apparatus for Processing a Video Frame | |
| CN106558021A (en) | Video enhancement method based on super-resolution technique | |
| CN104135666A (en) | Interpolation storage method and system for screen image as well as replay method | |
| CN107590194A (en) | The cutting loading display method of super large image | |
| CN103268619B (en) | The method of image data batch compression in swf file and device | |
| CN113268307A (en) | Page component display method, device, equipment and storage medium | |
| JP2016116775A (en) | Image reconstruction device, image reconstruction method, and program | |
| US9649562B2 (en) | Information processing assistance device that caches image data, information processing device, and non-transitory computer-readable storage medium storing information processing assistance program | |
| CN116112561B (en) | Visual management method and system for 3d Internet of vehicles based on web browser cache |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |