目标:
- 创建和大概数据库(省略)
- 创建对象存储(省略)
- 以BLOB形式获取图片文件
- 启动数据库事务(省略)
- 保存blob到数据库
- 读取保存文件,创建ObjectURL在页面展示
以blob形式获取图片文件:
// Create XHR
var xhr = new XMLHttpRequest(),
blob;
xhr.open("GET", "elephant.png", true);
// Set the responseType to blob
xhr.responseType = "blob";
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
console.log("Image retrieved");
// File as response
blob = xhr.response;
// Put the received blob into IndexedDB
putElephantInDb(blob);
}
}, false);
// Send XHR
xhr.send();
保存blob到数据库:
transaction.objectStore("elephants").put(blob, "image");
读取保存文件,创建ObjectURL在页面展示:
// Retrieve the file that was just stored
transaction.objectStore("elephants").get("image").onsuccess = function (event) {
var imgFile = event.target.result;
console.log("Got elephant!" + imgFile);
// Get window.URL object
var URL = window.URL || window.webkitURL;
// Create and revoke ObjectURL
var imgURL = URL.createObjectURL(imgFile);
// Set img src to ObjectURL
var imgElephant = document.getElementById("elephant");
imgElephant.setAttribute("src", imgURL);
// Revoking ObjectURL
URL.revokeObjectURL(imgURL);
};
分享到:
相关推荐
本地数据库的选择通常有几种,如IndexedDB、Web Storage(包括localStorage和sessionStorage)等。在本案例中,我们可能会重点学习如何使用这些技术来辅助Vue.js应用。 1. IndexedDB:这是一种非关系型的、基于键值...
这可能需要用到浏览器的本地存储(如localStorage或IndexedDB)来缓存离线消息,然后在条件允许时通过Ajax或WebSocket发送到服务器。消息提醒则可能依赖于浏览器的通知API,当有新消息时,向用户发送桌面通知。 ...
2. **Web Storage**或**IndexedDB**:用于在浏览器本地存储游戏数据,如玩家的进度、高分记录等。 3. **事件监听与处理**:如何响应用户的键盘输入、触摸操作来控制游戏角色。 4. **碰撞检测算法**:理解游戏中的...
本地存储的话,可以使用`localStorage`或`IndexedDB`,但需要注意它们的容量限制和兼容性问题。 6. **进度条展示**:如果支持大文件上传,实时显示上传进度是必要的。可以通过监听HTTP请求的`progress`事件来获取...
5. **Web Storage** 和 **IndexedDB**:用于在浏览器端存储数据,实现游戏进度的保存和加载。 6. **WebSocket**:提供双向通信,使游戏实现即时反馈,例如多人在线对战功能。 在部署游戏时,你需要考虑以下几点: ...
此外,Web Storage和IndexedDB提供了本地数据存储能力,用于游戏进度保存和用户数据管理。 其次,CSS3(Cascading Style Sheets 3)也对H5游戏起到了关键作用。它可以为游戏界面提供丰富的动画效果,如飞机移动、...
如果程序有保存功能,那么还需要处理数据持久化,可能利用localStorage或IndexedDB等浏览器存储机制。 总结来说,这个许愿墙程序是一个融合了前端技术的互动应用实例,对于学习和理解HTML5的拖放功能、前端开发流程...
8. 存储机制:可能使用HTML5的Web Storage或IndexedDB来保存用户进度或设置。 9.事件监听和处理:JavaScript的事件监听机制让游戏能够响应用户的输入操作。 10. 游戏设计原则:了解游戏规则、关卡设计、用户体验等,...
此外,HTML5还有Web Storage和IndexedDB,它们提供了本地数据存储的功能,使得游戏可以保存用户进度或者设置,即使页面关闭后也能恢复。 在HTML5游戏源码中,常常会看到如下的文件: 1. HTML文件:游戏的主页面,...
- **文件操作**: 学习如何读写本地文件系统,包括图片的保存和编辑。 - **图像来源**: 探讨图片来源的不同选择,如从相册选择或直接拍摄。 - **图像处理**: 介绍如何处理和保存原始图像数据。 #### 知识点九:读写...
5. 数据存储:如果游戏有进度保存或高分榜等功能,看看它是如何利用HTML5的localStorage或IndexedDB进行数据持久化的。 通过研究这个源码,你不仅可以学习HTML5游戏开发的基础知识,还能深入理解Web开发中的许多...
4. **本地存储**:如果`readmd`具有保存和加载功能,它可能会使用浏览器的`localStorage`或`IndexedDB`来存储用户的Markdown文件,以便在下次访问时恢复。 **四、项目结构分析** 根据压缩包文件名称`readmd-master...
- 学习如何保存和读取游戏进度,可能涉及到Web Storage或 IndexedDB。 总的来说,"七夕跳跳跳HTML5游戏源码"是一个宝贵的教育资源,它可以帮助开发者提升在HTML5游戏开发领域的技能,同时也能让非开发者体验到游戏...
Web Storage(包括localStorage和sessionStorage)和IndexedDB则提供了本地数据存储能力,对于游戏状态的保存和加载非常有用。 这个"EasyUpload-master"文件很可能包含了实现上述功能的源代码,包括上传逻辑、文件...
8. 数据持久化:使用cookies、localStorage或IndexedDB来保存用户的编辑状态和设置。 9. 预览功能:可能需要实时预览HTML代码更改的效果,这可能涉及Web Workers或者即时刷新的技术。 由于标签为空,我们无法得知更...
JavaScript也可以配合HTML5的`Web Storage`或`IndexedDB`来保存游戏进度,或者利用`Web Workers`进行复杂的计算,以提高游戏性能。 在提供的压缩包文件"oldj-html5-tower-defense-4a63cb7"中,我们可以看到一个具体...
7. 存档和加载:利用Web Storage或IndexedDB实现游戏进度的保存和读取,让玩家可以继续之前的关卡。 8. UI界面:源码会定义各种UI元素的样式和布局,如按钮、提示信息、计分板等,使用CSS3实现动态效果和过渡动画。...
利用浏览器的离线存储技术,如Service Worker和IndexedDB,可以在用户失去网络连接时暂时保存待上传的文件,当网络恢复时再自动尝试上传。DOMO可能包含如何设置Service Worker,以及如何在离线状态下保存和恢复上传...
与WebStorage不同,IndexedDB更适合存储结构化数据,例如文件、图片等,并且可以支持事务操作,提供了更为复杂的查询功能。IndexedDB的API较之WebStorage更为复杂,但功能也更加强大,对于需要高效处理大量数据的Web...
如果没有服务器,可能使用本地存储(localStorage或IndexedDB)来保存数据。 5. **images**: 图片资源文件,可能包含图标和其他视觉元素。 6. **README.md**: 项目介绍和使用指南,包括安装步骤、功能说明和许可证...