CN106709864B - Large capacity image buffer storage method based on WebGL - Google Patents

Large capacity image buffer storage method based on WebGL Download PDF

Info

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
Application number
CN201611125042.3A
Other languages
Chinese (zh)
Other versions
CN106709864A (en
Inventor
彭志勇
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Individual
Original Assignee
Individual
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Individual filed Critical Individual
Priority to CN201611125042.3A priority Critical patent/CN106709864B/en
Publication of CN106709864A publication Critical patent/CN106709864A/en
Application granted granted Critical
Publication of CN106709864B publication Critical patent/CN106709864B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T1/00General purpose image data processing
    • G06T1/60Memory management
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing 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

Large capacity image buffer storage method based on WebGL
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.
CN201611125042.3A 2016-12-08 2016-12-08 Large capacity image buffer storage method based on WebGL Active CN106709864B (en)

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)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
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

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