CN114996609B - 一种基于浏览器数据库的离线图像缓存方法及系统 - Google Patents
一种基于浏览器数据库的离线图像缓存方法及系统 Download PDFInfo
- Publication number
- CN114996609B CN114996609B CN202210929584.5A CN202210929584A CN114996609B CN 114996609 B CN114996609 B CN 114996609B CN 202210929584 A CN202210929584 A CN 202210929584A CN 114996609 B CN114996609 B CN 114996609B
- Authority
- CN
- China
- Prior art keywords
- data
- blob
- picture
- cached
- format
- 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
Images
Classifications
-
- 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/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
- G06F16/9566—URL specific, e.g. using aliases, detecting broken or misspelled links
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
- G06F16/54—Browsing; Visualisation therefor
-
- 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)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明涉及一种基于浏览器数据库的离线图像缓存方法及系统，特别涉及图片缓存技术领域。所述方法包括从数据库中获取待缓存图片的路径；将待缓存图片的路径转换成Blob格式的数据；将Blob格式的数据和待缓存图片的路径进行合并得到合并后的数据；将合并后的数据保存到indexedDB中；根据图片路径将indexedDB中的合并后的数据中的Blob格式的数据输出为Blob数据对象集合中的Blob格式的数据；将Blob数据对象转换成URL；根据URL得到待缓存图片。本发明可以最大程度上利用磁盘空间来存储文件，使用户在浏览大量图片或者高清图片时也能进行效率优化，提升访问速度。
Description
技术领域
本发明涉及图片缓存技术领域，特别是涉及一种基于浏览器数据库的离线图像缓存方法及系统。
背景技术
现有的图片加载一般是从联网的文件服务器拉取文件数据再展示出来，这种情况受网速限制和服务器条件影响较大，多次的加载也会消耗用户的流量或网速。如果将图片在首次加载时缓存到本地浏览器，就可以极大程度的提升用户的后续访问效率并且降低云端服务器的使用率。
目前web程序图片资源的缓存会随着加载自动存储到浏览器的临时文件夹，退出浏览器就会失效。而通过代码缓存到localStorage（浏览器的一个存储对象，可以长期保存一定的数据）中，虽然没有时间限制，但是只有5M的存储空间，大量图片根本不能存储。
发明内容
本发明的目的是提供一种基于浏览器数据库的离线图像缓存方法及系统，可以最大程度上利用磁盘空间来存储文件，使用户在浏览大量图片或者高清图片时也能进行效率优化，提升访问速度。
为实现上述目的，本发明提供了如下方案：
一种基于浏览器数据库的离线图像缓存方法，包括：
从数据库中获取待缓存图片的路径；
将所述待缓存图片的路径转换成Blob格式的数据；
将所述Blob格式的数据和所述待缓存图片的路径进行合并得到合并后的数据；
将所述合并后的数据保存到indexedDB中；
根据所述图片路径将所述indexedDB中的所述合并后的数据中的Blob格式的数据输出为Blob数据对象集合；
将所述Blob数据对象集合中的Blob格式的数据转换成URL；
根据所述URL得到所述待缓存图片。
可选的，所述从数据库中获取待缓存图片的路径，具体包括：
通过数据接口，从所述数据库中获取数据源中待缓存图片的路径。
可选的，所述将所述待缓存图片的路径转换成Blob格式的数据，具体包括：
使用fetch接口提供的转换Blob的方法将所述待缓存图片的路径转换为Blob格式的数据。
可选的，所述将所述合并后的数据保存到indexedDB中，具体包括：
将所述合并后的数据通过dexie提供的put方法添加到所述indexedDB的数据表中。
可选的，所述将所述Blob数据对象集合中的Blob格式的数据转换成URL，具体包括：
采用JavaScript脚本语言提供的URL.createObjectUrl方法，将所述Blob数据对象集合中的Blob格式的数据转换为表示所述Blob格式的数据的URL。
可选的，所述根据所述URL得到所述待缓存图片，具体包括：
将所述URL使用到img标签的src属性上得到所述待缓存图片。
一种基于浏览器数据库的离线图像缓存系统，包括：
获取模块，用于从数据库中获取待缓存图片的路径；
第一格式转换模块，用于将所述待缓存图片的路径转换成Blob格式的数据；
合并模块，用于将所述Blob格式的数据和所述待缓存图片的路径进行合并得到合并后的数据；
保存模块，用于将所述合并后的数据保存到indexedDB中；
第二格式转换模块，用于根据所述图片路径将所述indexedDB中的所述合并后的数据中的Blob格式的数据输出为Blob数据对象集合；
URL转换模块，用于将所述Blob数据对象集合中的Blob格式的数据转换成URL；
缓存图片确定模块，用于根据所述URL得到所述待缓存图片。
可选的，所述获取模块，具体包括：
获取单元，用于通过数据接口，从所述数据库中获取数据源中待缓存图片的路径。
可选的，所述第一格式转换模块，具体包括：
第一格式转换单元，用于使用fetch接口提供的转换Blob的方法将所述待缓存图片的路径转换为Blob格式的数据。
可选的，所述保存模块，具体包括：
保存单元，用于将所述合并后的数据通过dexie提供的put方法添加到所述indexedDB的数据表中。
根据本发明提供的具体实施例，本发明公开了以下技术效果：本发明从数据库中获取待缓存图片的路径；将待缓存图片的路径转换成Blob格式的数据；将Blob格式的数据和待缓存图片的路径进行合并得到合并后的数据；将合并后的数据保存到indexedDB中；根据图片路径将indexedDB中的合并后的数据中的Blob格式的数据输出为Blob数据对象集合；将Blob数据对象集合中的Blob格式的数据转换成URL；根据URL得到待缓存图片，可以最大程度上利用磁盘空间来存储文件，使用户在浏览大量图片或者高清图片时也能进行效率优化，提升访问速度。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的一种基于浏览器数据库的离线图像缓存方法的流程图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。
本发明实施例提供的基于浏览器数据库的离线图像缓存方法具体为一种web端离线图片缓存的方法，基于浏览器数据库（indexedDB），通过js语言代码进行实现。其内容包含：在线状态下从通过调用后台接口，从数据库（MySql、Oracle等关系型数据库）获取到数据源中的各种图片数据（图片路径），通过JavaScript脚本语言提供的fetch接口，将在线的图片数据转换为Blob（不可变的、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成ReadableStream来用于数据操作）数据对象，并使用dexie.js（对浏览器indexedDB的包装库）的方法将Blob数据对象存储到浏览器数据库（indexedDB）中，在离线的情况下，可以从浏览器数据库中读取已存储的Blob数据对象，通过JavaScript脚本语言提供的URL.createObjectUrl静态方法转换为一个表示数据对象的URL并作用在图片标签上，使图片可以展示出来，如图1所示，所述基于浏览器数据库的离线图像缓存方法具体包括：
在在线状态下：
步骤101：从数据库中获取待缓存图片的路径。
步骤102：将所述待缓存图片的路径转换成Blob格式的数据。
步骤103：将所述Blob格式的数据和所述待缓存图片的路径进行合并得到合并后的数据。
步骤104：将所述合并后的数据保存到indexedDB中。
在离线状态下：
步骤105：根据所述图片路径将所述indexedDB中的所述合并后的数据中的Blob格式的数据输出为Blob数据对象集合。
步骤106：将所述Blob数据对象集合中的Blob格式的数据转换成URL。
步骤107：根据所述URL得到所述待缓存图片。
在实际应用中，所述从数据库中获取待缓存图片的路径，具体包括：
通过数据接口，从所述数据库中获取数据源中待缓存图片的路径。
在实际应用中，所述将所述待缓存图片的路径转换成Blob格式的数据，具体包括：
使用fetch接口提供的转换Blob的方法将所述待缓存图片的路径转换为Blob格式的数据。
在实际应用中，所述将所述合并后的数据保存到indexedDB中，具体包括：
将所述合并后的数据通过dexie提供的put方法添加到所述indexedDB的数据表中。
在实际应用中，所述将所述Blob数据对象集合中的Blob格式的数据转换成URL，具体包括：
采用JavaScript脚本语言提供的URL.createObjectUrl方法，将所述Blob数据对象集合中的Blob格式的数据转换为表示所述Blob格式的数据的URL。
在实际应用中，所述根据所述URL得到所述待缓存图片，具体包括：
将所述URL使用到img标签的src属性上得到所述待缓存图片。
针对上述方法，本发明实施例还提供了一种基于浏览器数据库的离线图像缓存系统，包括：
获取模块，用于从数据库中获取待缓存图片的路径。
第一格式转换模块，用于将所述待缓存图片的路径转换成Blob格式的数据。
合并模块，用于将所述Blob格式的数据和所述待缓存图片的路径进行合并得到合并后的数据。
保存模块，用于将所述合并后的数据保存到indexedDB中。
第二格式转换模块，用于根据所述图片路径将所述indexedDB中的所述合并后的数据中的Blob格式的数据输出为Blob数据对象集合。
URL转换模块，用于将所述Blob数据对象集合中的Blob格式的数据转换成URL。
缓存图片确定模块，用于根据所述URL得到所述待缓存图片。
作为一种可选的实施方式，所述获取模块，具体包括：
获取单元，用于通过数据接口，从所述数据库中获取数据源中待缓存图片的路径。
作为一种可选的实施方式，所述第一格式转换模块，具体包括：
第一格式转换单元，用于使用fetch接口提供的转换Blob的方法将所述待缓存图片的路径转换为Blob格式的数据。
作为一种可选的实施方式，所述保存模块，具体包括：
保存单元，用于将所述合并后的数据通过dexie提供的put方法添加到所述indexedDB的数据表中。
本发明还提供了一种采用上述方法对多张图片进行缓存的实施例，具体内容如下：
在线存储部分：
使用dexie来构建浏览器数据库（indexedDB）中的数据表用以存储图片数据（图片路径）。
在线状态下通过数据接口，从数据库中读取相对应的图片数据。
遍历图片数据并同步执行JavaScript脚本语言提供的fetch接口。
使用fetch接口提供的转换Blob的方法将图片路径批量转换为Blob数据对象。
将Blob数据对象与对应的图片数据（图片路径）合并得到合并后的数据。
将合并后的数据通过dexie提供的put方法添加到创建出来的浏览器数据库（indexedDB）的数据表之中。
离线解析部分：
离线状态下，通过调用dexie的toArray方法，根据图片路径对数据表中的合并后的数据全部查询或通过dexie的where方法将其中的Blob数据进行筛选查询，并输出为Blob数据对象集合，具体为将同一图片路径对应的所有Blob数据筛选出来得到Blob数据对象集合。
遍历输出的数据对象集合，对其中的Blob数据对象使用JavaScript脚本语言提供的URL.createObjectUrl方法，将Blob对象转换为表示数据对象的URL。
将URL使用到img标签的src属性上，该img就可以显示为数据库表中已存储的图片数据。
本发明可以在运行于浏览器载体的web页面中，将大量的在线图片数据集转换为浏览器数据库中的数据，通过使用这种方式，可以极大提升用户第二次加载图片的性能，减小对文件服务器的访问压力，也可以在离线运行的载体中展示出来预先存入的图片达到离线存储的效果。相对于传统的缓存机制，使用了indexedDB的形式，可以占用全硬盘空间的50%的存储空间，所以存储量非常大，大幅提升了图片的加载效率，提供了离线加载的能力。
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的系统而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本发明的限制。
Claims (10)
1.一种基于浏览器数据库的离线图像缓存方法，其特征在于，包括：
从数据库中获取待缓存图片的路径；
将所述待缓存图片的路径转换成Blob格式的数据；
将所述Blob格式的数据和所述待缓存图片的路径进行合并得到合并后的数据；
将所述合并后的数据保存到indexedDB中；
根据所述图片路径将所述indexedDB中的所述合并后的数据中的Blob格式的数据输出为Blob数据对象集合；
将所述Blob数据对象集合中的Blob格式的数据转换成URL；
根据所述URL得到所述待缓存图片。
2.根据权利要求1所述的一种基于浏览器数据库的离线图像缓存方法，其特征在于，所述从数据库中获取待缓存图片的路径，具体包括：
通过数据接口，从所述数据库中获取数据源中待缓存图片的路径。
3.根据权利要求1所述的一种基于浏览器数据库的离线图像缓存方法，其特征在于，所述将所述待缓存图片的路径转换成Blob格式的数据，具体包括：
使用fetch接口提供的转换Blob的方法将所述待缓存图片的路径转换为Blob格式的数据。
4.根据权利要求1所述的一种基于浏览器数据库的离线图像缓存方法，其特征在于，所述将所述合并后的数据保存到indexedDB中，具体包括：
将所述合并后的数据通过dexie提供的put方法添加到所述indexedDB的数据表中。
5.根据权利要求1所述的一种基于浏览器数据库的离线图像缓存方法，其特征在于，所述将所述Blob数据对象集合中的Blob格式的数据转换成URL，具体包括：
采用JavaScript脚本语言提供的URL.createObjectUrl方法，将所述Blob数据对象集合中的Blob格式的数据转换为表示所述Blob格式的数据的URL。
6.根据权利要求1所述的一种基于浏览器数据库的离线图像缓存方法，其特征在于，所述根据所述URL得到所述待缓存图片，具体包括：
将所述URL使用到img标签的src属性上得到所述待缓存图片。
7.一种基于浏览器数据库的离线图像缓存系统，其特征在于，包括：
获取模块，用于从数据库中获取待缓存图片的路径；
第一格式转换模块，用于将所述待缓存图片的路径转换成Blob格式的数据；
合并模块，用于将所述Blob格式的数据和所述待缓存图片的路径进行合并得到合并后的数据；
保存模块，用于将所述合并后的数据保存到indexedDB中；
第二格式转换模块，用于根据所述图片路径将所述indexedDB中的所述合并后的数据中的Blob格式的数据输出为Blob数据对象集合；
URL转换模块，用于将所述Blob数据对象集合中的Blob格式的数据转换成URL；
缓存图片确定模块，用于根据所述URL得到所述待缓存图片。
8.根据权利要求7所述的一种基于浏览器数据库的离线图像缓存系统，其特征在于，所述获取模块，具体包括：
获取单元，用于通过数据接口，从所述数据库中获取数据源中待缓存图片的路径。
9.根据权利要求7所述的一种基于浏览器数据库的离线图像缓存系统，其特征在于，所述第一格式转换模块，具体包括：
第一格式转换单元，用于使用fetch接口提供的转换Blob的方法将所述待缓存图片的路径转换为Blob格式的数据。
10.根据权利要求7所述的一种基于浏览器数据库的离线图像缓存系统，其特征在于，所述保存模块，具体包括：
保存单元，用于将所述合并后的数据通过dexie提供的put方法添加到所述indexedDB的数据表中。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210929584.5A CN114996609B (zh) | 2022-08-04 | 2022-08-04 | 一种基于浏览器数据库的离线图像缓存方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210929584.5A CN114996609B (zh) | 2022-08-04 | 2022-08-04 | 一种基于浏览器数据库的离线图像缓存方法及系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114996609A CN114996609A (zh) | 2022-09-02 |
| CN114996609B true CN114996609B (zh) | 2022-11-18 |
Family
ID=83021916
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210929584.5A Active CN114996609B (zh) | 2022-08-04 | 2022-08-04 | 一种基于浏览器数据库的离线图像缓存方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114996609B (zh) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110929197A (zh) * | 2019-11-27 | 2020-03-27 | 杭州安恒信息技术股份有限公司 | 一种网页图片的预览加载方法和装置 |
| CA3073712A1 (en) * | 2020-02-26 | 2021-08-26 | The Toronto-Dominion Bank | Browser-based processing of data |
| CN113452733A (zh) * | 2020-03-25 | 2021-09-28 | 北京沃东天骏信息技术有限公司 | 文件下载方法和装置 |
| WO2022048141A1 (zh) * | 2020-09-01 | 2022-03-10 | 北京沃东天骏信息技术有限公司 | 一种图像处理方法及装置、计算机可读存储介质 |
| CN114647411A (zh) * | 2022-04-02 | 2022-06-21 | 北京思明启创科技有限公司 | 编程界面加载方法、装置、电子设备及存储介质 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20160050292A1 (en) * | 2014-08-13 | 2016-02-18 | Xiaomi Inc. | Local web resource access |
-
2022
- 2022-08-04 CN CN202210929584.5A patent/CN114996609B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110929197A (zh) * | 2019-11-27 | 2020-03-27 | 杭州安恒信息技术股份有限公司 | 一种网页图片的预览加载方法和装置 |
| CA3073712A1 (en) * | 2020-02-26 | 2021-08-26 | The Toronto-Dominion Bank | Browser-based processing of data |
| CN113452733A (zh) * | 2020-03-25 | 2021-09-28 | 北京沃东天骏信息技术有限公司 | 文件下载方法和装置 |
| WO2022048141A1 (zh) * | 2020-09-01 | 2022-03-10 | 北京沃东天骏信息技术有限公司 | 一种图像处理方法及装置、计算机可读存储介质 |
| CN114647411A (zh) * | 2022-04-02 | 2022-06-21 | 北京思明启创科技有限公司 | 编程界面加载方法、装置、电子设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114996609A (zh) | 2022-09-02 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9773069B2 (en) | Pre-fetching of network page content in a browser application | |
| KR101824222B1 (ko) | 동적 컨텐츠 및 스테일 컨텐츠를 포함하는 웹사이트들의 고속 렌더링 | |
| CN103051684B (zh) | 将网站转化为Web App进行展示的方法、系统和装置 | |
| US20130326333A1 (en) | Mobile Content Management System | |
| CN100565524C (zh) | 一种保存网页内容的系统、方法及浏览器 | |
| US20150135061A1 (en) | Systems and methods for parallel traversal of document object model tree | |
| CN103488732A (zh) | 一种静态页面生成方法及装置 | |
| CN103699674A (zh) | 网页保存、网页打开方法及装置和网页浏览系统 | |
| US20120030562A1 (en) | Device and method for generating customized webpages | |
| US20180260389A1 (en) | Electronic document segmentation and relation discovery between elements for natural language processing | |
| CN112256990B (zh) | 一种图像处理方法及装置、计算机可读存储介质 | |
| CN112487763A (zh) | 基于svg的ofd文件在线显示方法、服务器端及系统 | |
| CN104254849A (zh) | 支持网络文档的高速网络滚动的用户终端装置和方法 | |
| US9535881B1 (en) | Dynamic file concatenation | |
| CN111324836A (zh) | 一种页面的处理方法、装置、计算机设备和存储介质 | |
| CN101751408A (zh) | 一种互联网文内广告的系统与方法 | |
| CN102693237B (zh) | 一种网页内容适配封装系统及方法 | |
| CN110020343B (zh) | 网页编码格式的确定方法和装置 | |
| US20120259974A1 (en) | System and method for dynamic modification of web page content to ensure consistent response time | |
| CN114996609B (zh) | 一种基于浏览器数据库的离线图像缓存方法及系统 | |
| CN113448649B (zh) | 一种基于Redis的首页数据加载的服务器及方法 | |
| CN115202756A (zh) | 基于Vue的组件加载方法、系统和电子设备 | |
| CN102694802A (zh) | 网络访问信息记录方法和装置 | |
| US20160127496A1 (en) | Method and system of content caching and transmission | |
| CN113254819A (zh) | 一种页面渲染方法、系统、设备和存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Address after: No.102, Aucma street, Laishan District, Yantai City, Shandong Province Applicant after: SHANDONG JEREI DIGITAL TECHNOLOGY Co.,Ltd. Applicant after: Shandong Jierui Information Technology Industry Research Institute Co.,Ltd. Address before: 264003 No. 26, Tonghe Road, Laishan District, Yantai City, Shandong Province Applicant before: SHANDONG JEREI DIGITAL TECHNOLOGY Co.,Ltd. Applicant before: Shandong Jierui Information Technology Industry Research Institute Co.,Ltd. |
|
| CB02 | Change of applicant information | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |