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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: Blob
slug: Web/API/Blob
tags:
- API
- Blob
- File
- File API
- Interface
- Reference
- 파일
translation_of: Web/API/Blob
---
<div>{{APIRef("File API")}}</div>
<p><span class="seoSummary"><code>Blob</code> 객체는 파일류의 불변하는 미가공 데이터를 나타냅니다.</span> 텍스트와 이진 데이터의 형태로 읽을 수 있으며, {{domxref("ReadableStream")}}으로 변환한 후 그 메서드를 사용해 데이터를 처리할 수도 있습니다.</p>
<p><code>Blob</code>은 JavaScript 네이티브 형태가 아닌 데이터도 표현할 수 있습니다. {{domxref("File")}} 인터페이스는 사용자 시스템의 파일을 지원하기 위해 <code>Blob</code> 인터페이스를 확장한 것이므로, 모든 블롭 기능을 상속합니다.</p>
<h2 id="Blob_사용하기"><code>Blob</code> 사용하기</h2>
<p>블롭이 아닌 객체와 데이터에서 <code>Blob</code>을 생성하려면 {{domxref("Blob.Blob", "Blob()")}} 생성자를 사용하세요. 다른 블롭의 일부에서 새로운 블롭을 생성할 땐 {{domxref("Blob.slice", "slice()")}} 메서드를 사용할 수 있습니다. 사용자의 파일 시스템 내 파일을 <code>Blob</code>으로 얻는 방법은 {{domxref("File")}} 문서를 참고하세요.</p>
<p><code>Blob</code> 객체를 허용하는 API의 목록은 <code>File</code> 문서에도 있습니다.</p>
<dl>
</dl>
<h2 id="생성자">생성자</h2>
<dl>
<dt>{{domxref("Blob.Blob", "Blob()")}}</dt>
<dd>매개변수로 제공한 배열의 모든 데이터를 합친 데이터를 담은 새로운 <code>Blob</code> 객체를 반환합니다.</dd>
</dl>
<h2 id="속성">속성</h2>
<dl>
<dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
<dd><code>Blob</code> 객체가 담은 데이터의 바이트 단위의 사이즈입니다.</dd>
<dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
<dd><code>Blob</code> 객체가 담은 데이터의 MIME 유형을 나타내는 문자열입니다. 유형을 알 수 없는 경우 빈 문자열을 반환합니다.</dd>
</dl>
<h2 id="메서드">메서드</h2>
<dl>
<dt>{{DOMxRef("Blob.arrayBuffer()")}}</dt>
<dd><code>Blob</code>의 전체 내용을 이진 데이터로 담은 {{domxref("ArrayBuffer")}}로 이행하는 {{jsxref("Promise")}}를 반환합니다</dd>
<dt>{{domxref("Blob.slice()")}}</dt>
<dd>메서드를 호출한 블롭의 바이트를 주어진 시작 바이트와 끝 바이트 범위에서 복제해 새로운 <code>Blob</code> 객체를 생성하고 반환합니다.</dd>
<dt>{{domxref("Blob.stream()")}}</dt>
<dd><code>Blob</code>의 콘텐츠를 읽을 수 있는 {{domxref("ReadableStream")}}을 반환합니다.</dd>
<dt>{{domxref("Blob.text()")}}</dt>
<dd><code>Blob</code>의 전체 내용을 UTF-8 텍스트로 담은 {{domxref("USVString")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</dd>
</dl>
<h2 id="예제">예제 </h2>
<h3 id="블롭_생성하기">블롭 생성하기</h3>
<p>{{DOMxRef("Blob.Blob", "Blob()")}} 생성자를 사용해 다른 객체에서 블롭을 생성하세요. 예를 들어, 아래 코드는 문자열에서 블롭을 생성합니다.</p>
<pre class="brush: js">const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});</pre>
<h3 id="형식_배열의_콘텐츠를_나타내는_URL_생성하기">형식 배열의 콘텐츠를 나타내는 URL 생성하기</h3>
<p>다음 코드는 JavaScript {{jsxref("TypedArray")}}를 생성한 후, 그 데이터를 담은 <code>Blob</code> 객체도 만듭니다. 그 후, {{domxref("URL.createObjectURL()")}}을 호출해 블롭을 {{glossary("URL")}}로 변환합니다.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p>This example creates a typed array containing the ASCII codes
for the space character through the letter Z, then converts it
to an object URL. A link to open that object URL is created.
Click the link to see the decoded object URL.</p></pre>
<h4 id="JavaScript">JavaScript</h4>
<p>이 코드의 주제는 <code>typedArrayToURL()</code> 함수로, 주어진 <code>TypedArray</code>에서 <code>Blob</code>을 생성하고, 블롭의 객체 URL을 반환합니다. 데이터를 객체 URL로 변환한 후에는 {{HTMLElement("img")}} 요소의 {{htmlattrxref("src", "img")}} 특성에 지정하는 등 다양하게 사용할 수 있습니다. (물론 해당 객체가 이미지여야 합니다)</p>
<pre class="brush: js">function typedArrayToURL(typedArray, mimeType) {
return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
}
const bytes = new Uint8Array(59);
for(let i = 0; i < 59; i++) {
bytes[i] = 32 + i;
}
const url = typedArrayToURL(bytes, 'text/plain');
const link = document.createElement('a');
link.href = url;
link.innerText = 'Open the array URL';
document.body.appendChild(link);</pre>
<h4 id="결과">결과</h4>
<p>{{EmbedLiveSample("형식_배열의_콘텐츠를_나타내는_URL_생성하기", 600, 200)}}</p>
<h3 id="블롭에서_데이터_추출하기">블롭에서 데이터 추출하기</h3>
<p>블롭에서 데이터를 읽는 방법 하나는 {{domxref("FileReader")}}를 사용하는 것입니다. 다음 코드는 <code>Blob</code>의 콘텐츠를 형식 배열로서 읽어 들입니다.</p>
<pre class="brush: js">const reader = new FileReader();
reader.addEventListener('loadend', () => {
// reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);</pre>
<p>또 다른 방법은 블롭을 {{domxref("Response")}}로 사용하는 것입니다. 다음 코드는 <code>Blob</code>의 내용을 텍스트로 읽어옵니다.</p>
<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> text <span class="operator token">=</span> <span class="keyword token">await</span> <span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">Response</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">text</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
<p><code>FileReader</code>의 다른 메서드를 사용하면 블롭의 데이터를 문자열이나 데이터 URL로도 읽어올 수 있습니다.</p>
<h2 id="명세">명세</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">명세</th>
<th scope="col">상태</th>
<th scope="col">비고</th>
</tr>
<tr>
<td>{{SpecName('File API', '#blob-section', 'The <code>Blob</code> interface')}}</td>
<td>{{Spec2('File API')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("api.Blob")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{domxref("BlobBuilder")}}</li>
<li>{{domxref("FileReader")}}</li>
<li>{{domxref("File")}}</li>
<li>{{domxref("URL.createObjectURL")}}</li>
<li><a href="/ko/docs/Web/API/File/Using_files_from_web_applications">웹 애플리케이션에서 파일 사용하기</a></li>
</ul>
|
