-
Notifications
You must be signed in to change notification settings - Fork 38
Expand file tree
/
Copy pathBlob.html
More file actions
84 lines (73 loc) · 16 KB
/
Copy pathBlob.html
File metadata and controls
84 lines (73 loc) · 16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Blob JavaScript API</title><meta name="description" content="Interactive API reference for the JavaScript Blob Object. Blobs are immutable objects that represent raw data. File is a derivation of Blob that represents data from the file system. Use FileReade"><link rel="stylesheet" type="text/css" href="styles.css"><script type="text/javascript">var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23450559-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script></head><body><script>if (sessionStorage.collapsed === 'true') {
document.body.classList.add('members-collapsed');
}
if (localStorage.theme) {
document.body.parentElement.classList.add(localStorage.theme);
}</script><div class="topnav"><a href="/">JavaScripture</a><div class="bookmarks"><a class="bookmark contribute" href="https://github.com/nkronlage/JavaScripture">Contribute via GitHub</a> <a class="bookmark" href="/feedback">Feedback</a></div></div><div class="container"><nav class="leftnav"><div id="searchContainer"><input id="searchBox" type="text" placeholder="Search (Ctrl + S)" autocomplete="false"><div id="resultsBox" style="display:none;"></div></div><div id="apichooser"><a href="#" onclick="openApiChooser(); return false;"><div class="arrow"></div><span id="selectedsets"></span></a><div id="obscure"></div><div id="apisets"><ul></ul></div></div><div class="toc"><h2>Blob</h2><div class="navgroup"><div class="group"><a href="#Constructors">Constructors</a></div><div class="group collapsed"><a href="#InstanceProperties" onclick="expandoClicked(this.parentNode); return false;"><div class="arrow"></div>Instance Properties</a><div class="subgroup"><a href="#size">size</a><a href="#type">type</a></div></div><div class="group collapsed"><a href="#InstanceMethods" onclick="expandoClicked(this.parentNode); return false;"><div class="arrow"></div>Instance Methods</a><div class="subgroup"><a href="#arrayBuffer_">arrayBuffer</a><a href="#slice_Number_Number_String">slice</a><a href="#stream_">stream</a><a href="#text_">text</a></div></div></div><h2>FileAPI API</h2><div id="related-apis" class="navgroup"></div><h2>All API</h2><div id="rootObjs" class="navgroup"><span class="empty">No API set selected.</span></div></div></nav><div class="content"><h1 class="declaration"><span class="object">Blob</span> <span class="type">: <a href="/Object">Object</a></span></h1><div class="metadata"><span>constructor</span></div><div class="objectdescription">Blobs are immutable objects that represent raw data. <a href="/File">File</a> is a derivation of Blob that represents data from the file system. Use <a href="/FileReader">FileReader</a> to read data from a Blob or File. Blobs allow you to construct file like objects on the client that you can pass to apis that expect urls instead of requiring the server provides the file. For example, you can construct a blob containing the data for an image, use <a href="/URL#createObjectURL"><code>URL.createObjectURL()</code></a> to generate a url, and pass that url to <a href="/HTMLImageElement#src"><code>HTMLImageElement.src</code></a> to display the image you created without talking to a server.<div class="membermetadata"><a href="http://www.w3.org/TR/FileAPI/#blob" class="spec">Spec</a></div></div><div><a name="Constructors"></a><h2>Constructors</h2><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="Blob"></a> <a name="new_Blob"></a><div class="declaration">new <span class="membername primary">Blob</span>() : <a class="membertype" href="/Blob">Blob</a></div><div class="member-body"><p class="description">Creates a new <code>Blob</code> with <a href="#size"><code>size</code></a> set to <code>0</code>.</p><div class="example"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="12" cols="60" wrap="off">
var blob = new Blob();
console.log(blob.size);
console.log(blob.type);
</textarea><a onclick='executeExample(this.parentNode.parentNode, "Blob.Blob"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="errormessage" style="display: none"></div><pre class="results"> </pre></div></div></div><p></p></div></div><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="Blob"></a> <a name="new_Blob_Array_Object"></a><div class="declaration">new <span class="membername primary">Blob</span>(<span class="membername">blobParts</span> : <a class="membertype" href="/Array">Array</a>, <span class="optional">[<span class="membername">blobPropertyBag</span> : <a class="membertype" href="/Object">Object</a>]</span>) : <a class="membertype" href="/Blob">Blob</a><div class="subfunction"><span class="membername">blobPropertyBag</span> : {<table><tr><td><span class="membername">type</span> :</td><td><a class="membertype" href="/String">String</a></td><td>A valid mime type such as <code>'text/plain'</code></td></tr><tr><td><span class="membername">endings</span> :</td><td><a class="membertype" href="/String">String</a></td><td>Must be either <code>'transparent'</code> or <code>'native'</code></td></tr></table><span class="subfunctionclose">}</span></div></div><div class="member-body"><p class="description">Creates a new <code>Blob</code>. The elements of <code>blobParts</code> must be of the types <a href="/ArrayBuffer"><code>ArrayBuffer</code></a>, <a href="/ArrayBufferView"><code>ArrayBufferView</code></a>, <a href="/Blob"><code>Blob</code></a>, or <a href="/String"><code>String</code></a>. If <code>ending</code> is set to <code>'native'</code>, the line endings in the blob will be converted to the system line endings, such as <code>'\r\n'</code> for Windows or <code>'\n'</code> for Mac.</p><div class="example"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="12" cols="60" wrap="off">
var blob = new Blob(['foo', 'bar']);
console.log('size=' + blob.size);
console.log('type=' + blob.type);
var testEndings = function(string, endings) {
var blob = new Blob([string], { type: 'text/plain',
endings: endings });
var reader = new FileReader();
reader.onload = function(event){
console.log(endings + ' of ' + JSON.stringify(string) +
' => ' + JSON.stringify(reader.result));
};
reader.readAsText(blob);
};
testEndings('foo\nbar', 'native');
testEndings('foo\r\nbar', 'native');
testEndings('foo\nbar', 'transparent');
testEndings('foo\r\nbar', 'transparent');
</textarea><a onclick='executeExample(this.parentNode.parentNode, "Blob.Blob"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="errormessage" style="display: none"></div><pre class="results"> </pre></div></div></div><p></p></div></div></div><div><a name="InstanceProperties"></a><h2>Instance Properties</h2><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="size"></a><div class="declaration"><span class="membername primary">size</span> : <a class="membertype" href="/Number">Number</a> <span class="metadata">readonly</span></div><div class="member-body"><p class="description">The size of the blob in bytes.</p><div class="example"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="12" cols="60" wrap="off">
var blob = new Blob(['foo', 'bar'], { type: 'text/plain',
endings: 'native' });
console.log(blob.size);
</textarea><a onclick='executeExample(this.parentNode.parentNode, "Blob.size"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="errormessage" style="display: none"></div><pre class="results"> </pre></div></div></div><p></p><div class="membermetadata"><a href="http://www.w3.org/TR/FileAPI/#dfn-size" class="spec">Spec</a></div></div></div><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="type"></a><div class="declaration"><span class="membername primary">type</span> : <a class="membertype" href="/String">String</a> <span class="metadata">readonly</span></div><div class="member-body"><p class="description">The type of the blob.</p><div class="example"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="12" cols="60" wrap="off">
var blob = new Blob(['foo', 'bar'], { type: 'text/plain',
endings: 'native' });
console.log(blob.type);
</textarea><a onclick='executeExample(this.parentNode.parentNode, "Blob.type"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="errormessage" style="display: none"></div><pre class="results"> </pre></div></div></div><p></p><div class="membermetadata"><a href="http://www.w3.org/TR/FileAPI/#dfn-type" class="spec">Spec</a></div></div></div></div><div><a name="InstanceMethods"></a><h2>Instance Methods</h2><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="arrayBuffer"></a> <a name="arrayBuffer_"></a><div class="declaration"><span class="membername primary">arrayBuffer</span>() : <a class="membertype" href="/Promise">Promise</a><<a class="membertype" href="/ArrayBuffer">ArrayBuffer</a>></div><div class="member-body"><p class="description">Asynchronously returns an ArrayBuffer for the data in <code>this</code>. See also <a href="/FileReader#readAsArrayBuffer">FileReader.readAsArrayBuffer()</a>.</p><div class="example"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="12" cols="60" wrap="off">
const blob = new Blob(['foo']);
const arrayBuffer = await blob.arrayBuffer();
console.log(arrayBuffer.byteLength);
const chars = new Uint8Array(arrayBuffer);
console.log(chars);
// The bytes of the ArrayBuffer match the char codes of the string
console.log([...'foo'].map(c => c.charCodeAt(0)));
</textarea><a onclick='executeExample(this.parentNode.parentNode, "Blob.arrayBuffer"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="errormessage" style="display: none"></div><pre class="results"> </pre></div></div></div><p></p><div class="membermetadata"><a href="https://w3c.github.io/FileAPI/#dom-blob-arraybuffer" class="spec">Spec</a></div></div></div><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="slice"></a> <a name="slice_Number_Number_String"></a><div class="declaration"><span class="membername primary">slice</span>(<span class="optional">[<span class="membername">start</span><span class="defaultvalue"> = 0</span> : <a class="membertype" href="/Number">Number</a>, <span class="optional">[<span class="membername">end</span> : <a class="membertype" href="/Number">Number</a>, <span class="optional">[<span class="membername">contentType</span><span class="defaultvalue"> = ''</span> : <a class="membertype" href="/String">String</a>]</span>]</span>]</span>) : <a class="membertype" href="/Blob">Blob</a></div><div class="member-body"><p class="description">Returns a new blob that contains the bytes <code>start</code> to <code>end - 1</code> from <code>this</code>. If <code>start</code> or <code>end</code> is negative, the value is added to <a href="#size"><code>this.size</code></a> before performing the slice. If <code>end</code> is not specified, <code>this.size</code> is used. The returned blob's <a href="#type"><code>type</code></a> will be <code>contentType</code> if specified, otherwise it will be <code>''</code>.</p><div class="example"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="12" cols="60" wrap="off">
var blob = new Blob(['foo', 'bar'], { type: 'text/plain',
endings: 'native' });
console.log('blob size:', blob.size);
console.log('blob type:', blob.type);
var copy = blob.slice()
console.log('copy size:', copy.size);
console.log('copy type:', copy.type);
var slice = blob.slice(1, 4, 'foo-type')
console.log('slice size:', slice.size);
console.log('slice type:', slice.type);
</textarea><a onclick='executeExample(this.parentNode.parentNode, "Blob.slice"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="errormessage" style="display: none"></div><pre class="results"> </pre></div></div></div><p></p><div class="membermetadata"><a href="https://w3c.github.io/FileAPI/#dom-blob-slice" class="spec">Spec</a></div></div></div><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="stream"></a> <a name="stream_"></a><div class="declaration"><span class="membername primary">stream</span>() : <a class="membertype" href="/ReadableStream">ReadableStream</a></div><div class="member-body"><p class="description">Returns a stream of the data in <code>this</code>. The values of the stream will be <a href="/Uint8Array"><code>Uint8Array</code></a>s.</p><div class="example"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="12" cols="60" wrap="off">
const blob = new Blob(['foo']);
const stream = blob.stream();
const reader = stream.getReader();
let result;
while (!(result = await reader.read()).done) {
console.log(result.value);
}
</textarea><a onclick='executeExample(this.parentNode.parentNode, "Blob.stream"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="errormessage" style="display: none"></div><pre class="results"> </pre></div></div></div><p></p><div class="membermetadata"><a href="https://w3c.github.io/FileAPI/#dom-blob-text" class="spec">Spec</a></div></div></div><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="text"></a> <a name="text_"></a><div class="declaration"><span class="membername primary">text</span>() : <a class="membertype" href="/Promise">Promise</a><<a class="membertype" href="/String">String</a>></div><div class="member-body"><p class="description">Asynchronously returns a String for the data in <code>this</code>. See also <a href="/FileReader#readAsText">FileReader.readAsText()</a>.</p><div class="example"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="12" cols="60" wrap="off">
const blob = new Blob(['foo']);
console.log(await blob.text());
</textarea><a onclick='executeExample(this.parentNode.parentNode, "Blob.text"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="errormessage" style="display: none"></div><pre class="results"> </pre></div></div></div><p></p><div class="membermetadata"><a href="https://w3c.github.io/FileAPI/#dom-blob-text" class="spec">Spec</a></div></div></div></div><div class="bottomnav"><a href="/">home</a> <a href="/license">license</a> <a href="https://github.com/nkronlage/JavaScripture">contribute</a> <a href="/feedback">feedback</a> <a id="toggle-theme" href="#">toggle light/dark mode</a></div><div class="copyright">Copyright © JavaScripture Contributors</div></div></div></body><script src="javascripture.js"></script></html>