You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-**`blobParts`**is an array of `Blob`/`BufferSource`/`String`values.
18
-
-**`options`**optional object:
19
-
-**`type`** -- `Blob` type, usually MIME-type, e.g. `image/png`,
20
-
-**`endings`** -- whether to transform end-of-line to make the `Blob` correspond to current OS newlines (`\r\n`or`\n`). By default `"transparent"` (do nothing), but also can be `"native"` (transform).
17
+
-**`blobParts`**-- `Blob`·`BufferSource`·`String`값을 담은 배열입니다.
18
+
-**`options`**-- 옵션 객체입니다.
19
+
-**`type`** -- `Blob`의 타입으로 주로 `image/png` 같은 MIME 타입이 들어갑니다.
20
+
-**`endings`** -- 줄 바꿈 문자를 현재 OS의 새 줄 문자(`\r\n`또는`\n`)에 맞게 변환할지 결정합니다. 기본값은 아무 처리도 하지 않는 `"transparent"`이고 변환을 수행하는 `"native"`로 지정할 수도 있습니다.
21
21
22
-
For example:
22
+
예시를 살펴봅시다.
23
23
24
24
```js
25
-
//create Blob from a string
25
+
//문자열로 Blob을 만듭니다.
26
26
let blob =newBlob(["<html>…</html>"], {type:'text/html'});
27
-
//please note: the first argument must be an array [...]
27
+
//첫 번째 인수는 반드시 배열 [...] 형태여야 한다는 점에 유의하세요.
28
28
```
29
29
30
30
```js
31
-
//create Blob from a typed array and strings
32
-
let hello =newUint8Array([72, 101, 108, 108, 111]); // "Hello" in binary form
31
+
//TypedArray와 문자열을 조합해 Blob을 만듭니다.
32
+
let hello =newUint8Array([72, 101, 108, 108, 111]); //이진 형태의 "Hello"
33
33
34
34
let blob =newBlob([hello, '', 'world'], {type:'text/plain'});
For each URL generated by `URL.createObjectURL` the browser stores a URL ->`Blob`mapping internally. So such URLs are short, but allow to access the `Blob`.
100
+
브라우저는 `URL.createObjectURL`로 생성한 URL마다 URL →`Blob`매핑을 내부에 저장합니다. 그래서 URL이 짧아도 이 URL로 `Blob`에 접근할 수 있습니다.
101
101
102
-
A generated URL (and hence the link with it) is only valid within the current document, while it's open. And it allows to reference the `Blob` in `<img>`, `<a>`, basically any other object that expects an url.
102
+
생성된 URL(과 그 URL을 쓰는 링크)은 현재 문서가 열려 있는 동안 그 문서 안에서만 유효합니다. 이 URL은 `<img>`·`<a>`를 비롯해 URL을 기대하는 모든 객체에서 `Blob`을 참조하는 데 쓸 수 있습니다.
103
103
104
-
There's a side-effect though. While there's a mapping for a `Blob`, the `Blob`itself resides in the memory. The browser can't free it.
104
+
다만 부작용이 하나 있습니다. `Blob` 매핑이 존재하는 동안엔 `Blob`자체가 메모리에 상주합니다. 브라우저가 이를 해제할 수 없습니다.
105
105
106
-
The mapping is automatically cleared on document unload, so `Blob`objects are freed then. But if an app is long-living, then that doesn't happen soon.
106
+
매핑은 문서가 언로드될 때 자동으로 정리되고 그때 `Blob`객체도 함께 해제됩니다. 하지만 앱이 오래 살아 있다면 해제 시점은 금방 오지 않습니다.
107
107
108
-
**So if we create a URL, that `Blob` will hang in memory, even if not needed any more.**
108
+
**따라서 URL을 만들어 두면 그 `Blob`은 더는 필요 없어져도 메모리에 남아 있게 됩니다.**
109
109
110
-
`URL.revokeObjectURL(url)` removes the reference from the internal mapping, thus allowing the `Blob` to be deleted (if there are no other references), and the memory to be freed.
110
+
`URL.revokeObjectURL(url)`은 내부 매핑에서 참조를 제거합니다. 그 덕분에(다른 참조가 없다면) `Blob`이 삭제될 수 있고 메모리도 해제됩니다.
111
111
112
-
In the last example, we intend the `Blob` to be used only once, for instant downloading, so we call `URL.revokeObjectURL(link.href)` immediately.
112
+
마지막 예시에선 `Blob`을 즉시 다운로드에 한 번만 쓸 생각이므로 `URL.revokeObjectURL(link.href)`를 바로 호출했습니다.
113
113
114
-
In the previous example with the clickable HTML-link, we don't call `URL.revokeObjectURL(link.href)`, because that would make the `Blob`url invalid. After the revocation, as the mapping is removed, the URL doesn't work any more.
114
+
클릭 가능한 HTML 링크를 쓴 이전 예시에선 `URL.revokeObjectURL(link.href)`를 호출하지 않습니다. 호출하면 `Blob`URL이 무효가 되기 때문입니다. 취소 후엔 매핑이 제거되어 URL이 더는 동작하지 않습니다.
115
115
116
-
## Blob to base64
116
+
## Blob을 base64로 변환하기
117
117
118
-
An alternative to `URL.createObjectURL` is to convert a `Blob` into a base64-encoded string.
118
+
`URL.createObjectURL`의 대안으로 `Blob`을 base64 인코딩 문자열로 변환하는 방법이 있습니다.
119
119
120
-
That encoding represents binary data as a string of ultra-safe "readable" characters with ASCII-codes from 0 to 64. And what's more important -- we can use this encoding in "data-urls".
120
+
base64 인코딩은 이진 데이터를 0부터 64까지의 ASCII 코드로 이루어진 아주 안전한 '읽을 수 있는' 문자열로 표현합니다. 더 중요한 점은 이 인코딩을 '데이터 URL(data url)'에 쓸 수 있다는 사실입니다.
121
121
122
-
A [data url](mdn:/http/Data_URIs) has the form `data:[<mediatype>][;base64],<data>`. We can use such urls everywhere, on par with "regular" urls.
122
+
[데이터 URL](mdn:/http/Data_URIs)은 `data:[<mediatype>][;base64],<data>` 형태입니다. 이런 URL은 '일반' URL과 동등하게 어디에서나 사용할 수 있습니다.
The browser will decode the string and show the image: <imgsrc="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7">
130
+
브라우저가 문자열을 디코딩해 이미지를 표시합니다. <imgsrc="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7">
131
131
132
132
133
-
To transform a `Blob` into base64, we'll use the built-in `FileReader` object. It can read data from Blobs in multiple formats. In the [next chapter](info:file) we'll cover it more in-depth.
133
+
`Blob`을 base64로 변환할 땐 내장 객체 `FileReader`를 사용합니다. `FileReader`는 Blob의 데이터를 여러 형식으로 읽을 수 있습니다. [다음 챕터](info:file)에서 더 자세히 다루겠습니다.
134
134
135
-
Here's the demo of downloading a blob, now via base-64:
135
+
이번엔 base64를 이용해 blob을 다운로드하는 데모입니다.
136
136
137
137
```js run
138
138
let link =document.createElement('a');
@@ -142,79 +142,79 @@ let blob = new Blob(['Hello, world!'], {type: 'text/plain'});
142
142
143
143
*!*
144
144
let reader =newFileReader();
145
-
reader.readAsDataURL(blob); //converts the blob to base64 and calls onload
145
+
reader.readAsDataURL(blob); //blob을 base64로 변환하고 변환이 끝나면 onload를 호출합니다.
146
146
*/!*
147
147
148
148
reader.onload=function() {
149
-
link.href=reader.result; //data url
149
+
link.href=reader.result; //데이터 URL
150
150
link.click();
151
151
};
152
152
```
153
153
154
-
Both ways of making an URL of a `Blob` are usable. But usually`URL.createObjectURL(blob)` is simpler and faster.
154
+
`Blob`으로 URL을 만드는 두 방법 모두 사용할 수 있습니다. 하지만 보통은`URL.createObjectURL(blob)`이 더 간단하고 빠릅니다.
155
155
156
-
```compare title-plus="URL.createObjectURL(blob)" title-minus="Blob to data url"
157
-
+ We need to revoke them if care about memory.
158
-
+ Direct access to blob, no "encoding/decoding"
159
-
- No need to revoke anything.
160
-
- Performance and memory losses on big `Blob` objects for encoding.
156
+
```compare title-plus="URL.createObjectURL(blob)" title-minus="Blob을 데이터 URL로 변환"
157
+
+ 메모리를 신경 쓴다면 URL을 취소해야 합니다.
158
+
+ blob에 바로 접근하므로 '인코딩·디코딩'이 없습니다.
159
+
- 아무것도 취소할 필요가 없습니다.
160
+
- 큰 `Blob` 객체를 인코딩할 때 성능과 메모리 손실이 있습니다.
161
161
```
162
162
163
-
## Image to blob
163
+
## 이미지를 Blob으로 변환하기
164
164
165
-
We can create a `Blob` of an image, an image part, or even make a page screenshot. That's handy to upload it somewhere.
165
+
이미지 전체나 일부, 심지어 페이지 스크린샷으로도 `Blob`을 만들 수 있습니다. 만든 `Blob`은 어딘가에 업로드할 때 유용합니다.
166
166
167
-
Image operations are done via `<canvas>`element:
167
+
이미지 연산은 `<canvas>`요소에서 이뤄집니다.
168
168
169
-
1.Draw an image (or its part) on canvas using [canvas.drawImage](mdn:/api/CanvasRenderingContext2D/drawImage).
170
-
2.Call canvas method [.toBlob(callback, format, quality)](mdn:/api/HTMLCanvasElement/toBlob) that creates a `Blob` and runs `callback` with it when done.
169
+
1.[canvas.drawImage](mdn:/api/CanvasRenderingContext2D/drawImage)를 사용해 캔버스에 이미지(또는 이미지 일부)를 그립니다.
170
+
2.캔버스 메서드 [.toBlob(callback, format, quality)](mdn:/api/HTMLCanvasElement/toBlob)를 호출하면 `Blob`이 만들어지고 완성되는 시점에 `callback`이 호출됩니다.
171
171
172
-
In the example below, an image is just copied, but we could cut from it, or transform it on canvas prior to making a blob:
172
+
아래 예시에선 이미지를 복사하기만 하지만 blob으로 만들기 전에 캔버스에서 이미지를 잘라내거나 변형할 수도 있습니다.
173
173
174
174
```js run
175
-
//take any image
175
+
//아무 이미지나 가져옵니다.
176
176
let img =document.querySelector('img');
177
177
178
-
//make <canvas> of the same size
178
+
//이미지와 같은 크기로 <canvas>를 만듭니다.
179
179
let canvas =document.createElement('canvas');
180
180
canvas.width=img.clientWidth;
181
181
canvas.height=img.clientHeight;
182
182
183
183
let context =canvas.getContext('2d');
184
184
185
-
//copy image to it (this method allows to cut image)
185
+
//캔버스에 이미지를 복사합니다(drawImage로는 이미지를 잘라낼 수도 있습니다).
186
186
context.drawImage(img, 0, 0);
187
-
//we can context.rotate(), and do many other things on canvas
187
+
// context.rotate()를 비롯해 캔버스에서 다양한 작업을 할 수 있습니다.
188
188
189
-
//toBlob is async opereation, callback is called when done
189
+
//toBlob은 비동기 연산이라 작업이 끝나면 콜백이 호출됩니다.
190
190
canvas.toBlob(function(blob) {
191
-
//blob ready, download it
191
+
//blob이 준비되었으니 다운로드합니다.
192
192
let link =document.createElement('a');
193
193
link.download='example.png';
194
194
195
195
link.href=URL.createObjectURL(blob);
196
196
link.click();
197
197
198
-
//delete the internal blob reference, to let the browser clear memory from it
198
+
//내부 blob 참조를 삭제해 브라우저가 메모리를 해제할 수 있게 합니다.
199
199
URL.revokeObjectURL(link.href);
200
200
}, 'image/png');
201
201
```
202
202
203
-
If we prefer `async/await` instead of callbacks:
203
+
콜백 대신 `async/await`를 선호한다면 다음처럼 쓸 수 있습니다.
204
204
```js
205
205
let blob =awaitnewPromise(resolve=>canvasElem.toBlob(resolve, 'image/png'));
206
206
```
207
207
208
-
For screenshotting a page, we can use a library such as <https://github.com/niklasvh/html2canvas>. What it does is just walks the page and draws it on `<canvas>`. Then we can get a `Blob` of it the same way as above.
208
+
페이지 스크린샷엔 <https://github.com/niklasvh/html2canvas> 같은 라이브러리를 사용할 수 있습니다. 이 라이브러리는 페이지를 훑으며 `<canvas>`에 그대로 그려줄 뿐입니다. 그다음은 위와 같은 방법으로 `Blob`을 얻으면 됩니다.
209
209
210
-
## From Blob to ArrayBuffer
210
+
## Blob에서 ArrayBuffer 추출하기
211
211
212
-
The `Blob`constructor allows to create a blob from almost anything, including any `BufferSource`.
212
+
`Blob`생성자를 사용하면 `BufferSource`를 포함해 거의 모든 것으로 blob을 만들 수 있습니다.
213
213
214
-
But if we need to perform low-level processing, we can get the lowest-level `ArrayBuffer` from it using `FileReader`:
214
+
반대로 저수준 처리가 필요하다면 `FileReader`를 사용해 blob에서 가장 저수준 형태인 `ArrayBuffer`를 얻을 수 있습니다.
While `ArrayBuffer`, `Uint8Array`and other `BufferSource` are "binary data", a [Blob](https://www.w3.org/TR/FileAPI/#dfn-Blob) represents "binary data with type".
232
+
`ArrayBuffer`·`Uint8Array`등의 `BufferSource`가 '이진 데이터'라면 [Blob](https://www.w3.org/TR/FileAPI/#dfn-Blob)은 '타입이 있는 이진 데이터'를 나타냅니다.
233
233
234
-
That makes Blobs convenient for upload/download operations, that are so common in the browser.
234
+
그 덕분에 Blob은 브라우저에서 아주 흔한 업로드·다운로드 작업에 편리하게 쓰입니다.
235
235
236
-
Methods that perform web-requests, such as [XMLHttpRequest](info:xmlhttprequest), [fetch](info:fetch)and so on, can work with `Blob` natively, as well as with other binary types.
236
+
[XMLHttpRequest](info:xmlhttprequest)·[fetch](info:fetch)등 웹 요청을 수행하는 메서드는 다른 이진 타입과 마찬가지로 `Blob`도 기본으로 다룰 수 있습니다.
237
237
238
-
We can easily convert betweeen `Blob` and low-level binary data types:
238
+
`Blob`과 저수준 이진 데이터 타입 사이의 변환도 간단합니다.
239
239
240
-
-We can make a Blob from a typed array using `new Blob(...)`constructor.
241
-
-We can get back `ArrayBuffer` from a Blob using `FileReader`, and then create a view over it for low-level binary processing.
240
+
-`new Blob(...)`생성자를 사용하면 TypedArray로 Blob을 만들 수 있습니다.
241
+
-`FileReader`를 사용하면 Blob에서 `ArrayBuffer`를 다시 얻을 수 있고 그 위에 뷰를 만들어 저수준 이진 처리를 할 수 있습니다.
0 commit comments