This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob | |
var rhinoStorage = localStorage.getItem("rhino"), | |
rhino = document.getElementById("rhino"); | |
if (rhinoStorage) { | |
// Reuse existing Data URL from localStorage | |
rhino.setAttribute("src", rhinoStorage); | |
} | |
else { | |
// Create XHR and FileReader objects | |
var xhr = new XMLHttpRequest(), |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob | |
var rhinoStorage = localStorage.getItem("rhino"), | |
rhino = document.getElementById("rhino"); | |
if (rhinoStorage) { | |
// Reuse existing Data URL from localStorage | |
rhino.setAttribute("src", rhinoStorage); | |
} | |
else { | |
// Create XHR, Blob and FileReader objects | |
var xhr = new XMLHttpRequest(), |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function () { | |
// IndexedDB | |
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, | |
IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction, | |
dbVersion = 1.0; | |
// Create/open database | |
var request = indexedDB.open("elephantFiles", dbVersion), | |
db, | |
createObjectStore = function (dataBase) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Get a reference to the image element | |
var elephant = document.getElementById("elephant"); | |
// Take action when the image has loaded | |
elephant.addEventListener("load", function () { | |
var imgCanvas = document.createElement("canvas"), | |
imgContext = imgCanvas.getContext("2d"); | |
// Make sure canvas is as big as the picture | |
imgCanvas.width = elephant.width; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// IndexedDB | |
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, | |
IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction, | |
dbVersion = 1; | |
/* | |
Note: The recommended way to do this is assigning it to window.indexedDB, | |
to avoid potential issues in the global scope when web browsers start | |
removing prefixes in their implementations. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function () { | |
// IndexedDB | |
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, | |
IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction, | |
dbVersion = 1.0; | |
// Create/open database | |
var request = indexedDB.open("elephantFiles", dbVersion), | |
db, | |
createObjectStore = function (dataBase) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function () { | |
var matchMediaSupported = document.querySelector("#matchmedia-supported"), | |
width600 = document.querySelector("#width-600"), | |
height500 = document.querySelector("#height-500"), | |
portraitOrientation = document.querySelector("#portrait-orientation"), | |
width600Check, | |
height500Check, | |
portraitOrientationCheck; | |
if (window.matchMedia) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html:-moz-full-screen { | |
background: red; | |
} | |
html:-webkit-full-screen { | |
background: red; | |
} | |
html:-ms-fullscreen { | |
background: red; |
NewerOlder