Skip to content

Commit a8c64e1

Browse files
author
Vladimir Troyanenko
authored
обновлено на базе кодревью
1 parent 0d9eb3a commit a8c64e1

1 file changed

Lines changed: 29 additions & 29 deletions

File tree

‎4-binary/03-blob/article.md‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
# Blob
22

3-
`ArrayBuffer` и низко-уровневый интерфейс для работы с ним являются частью ECMA стандарта, и соответственно частью Javascript.
3+
`ArrayBuffer` и бинарные массивы являются частью ECMA стандарта, и соответственно частью Javascript.
44

55
Кроме того, в браузере, имеются дополнительные высокоуровневые объекты, описанные в [File API](https://www.w3.org/TR/FileAPI/).
66

7-
`Blob` объект состоит из необязательного признака `type` (a MIME-type usually), и `blobParts` -- цепочки других `Blob` объектов, строк и `BufferSources`.
7+
`Blob` объект состоит из необязательной строки `type` (обычно MIME-type), и `blobParts` -- цепочки других `Blob` объектов, строк и `BufferSources`.
88

99
![](blob.png)
1010

11-
Благодаря `type`, мы можем пересылать blobs объекты, где `type` естественно становится `Content-Type` в сетевых запросах.
11+
Благодаря `type`, мы можем загружать и скачивать blob объекты, где `type` естественно становится `Content-Type` в сетевых запросах.
1212

1313
Конструктор имеет следующий синтаксис:
1414

@@ -17,9 +17,9 @@ new Blob(blobParts, options);
1717
```
1818

1919
- **`blobParts`** -- массив `Blob`/`BufferSource`/`String` значений.
20-
- **`options`** -- объект с дополнительными настройками:
20+
- **`options`** -- необязательный объект с дополнительными настройками:
2121
- **`type`** -- тип объекта, обычно MIME-тип, например. `image/png`,
22-
- **`endings`** -- если указан то строк создаваемого blob будет изменено в соответствии с текущей операционной системой (`\r\n` или `\n`). По умолчанию `"transparent"` (ничего не делать), но так же может быть `"native"` (изменять).
22+
- **`endings`** -- если указан то окончания строк создаваемого blob будут изменены в соответствии с текущей операционной системой (`\r\n` или `\n`). По умолчанию `"transparent"` (ничего не делать), но так же может быть `"native"` (изменять).
2323

2424
Например:
2525

@@ -37,22 +37,22 @@ let blob = new Blob([hello, ' ', 'world'], {type: 'text/plain'});
3737
```
3838

3939

40-
Мы можем получить срез blob массива используя:
40+
Мы можем получить срез blob массива, используя:
4141

4242
```js
4343
blob.slice([byteStart], [byteEnd], [contentType]);
4444
```
4545

46-
- **`byteStart`** -- стартовый байт, по умолчанию 0.
46+
- **`byteStart`** -- стартовая позиция байта, по умолчанию 0.
4747
- **`byteEnd`** -- последний байт, по умолчанию до конца.
4848
- **`contentType`** -- тип `type` создаваемого blob объекта, по умолчанию такой же как и исходный.
4949

50-
Аргументы подобные `array.slice`, негативные числа так же разрешены.
50+
Аргументы подобные `array.slice`, отрицательные числа так же разрешены.
5151

5252
```smart header="Blob не изменяем (immutable)"
53-
Мы не можем изменять данные прямо в blob, но мы можем создать его срез, создать новый на базе существующего, сделать объединение нескольких объектов в новый и так далее.
53+
Мы не можем изменять данные напрямую в blob, но мы можем делать срезы и создавать новый blob на их основе, сделать объединение нескольких объектов в новый и так далее.
5454
55-
Это поведение аналогично Javascript строке: мы не можем изменить символы в строке, но мы можем создать новую корректную строку на базе имеющийся.
55+
Это поведение аналогично Javascript строке: мы не можем изменить символы в строке, но мы можем создать новую исправленную строку на базе имеющийся.
5656
```
5757

5858
## Blob как URL
@@ -72,7 +72,7 @@ link.href = URL.createObjectURL(blob);
7272
</script>
7373
```
7474

75-
Мы так же можем создать ссылку динамически, используя только Javascript и эмулировать на ней клик используя `link.click()`, тогда загрузка начнется автоматически.
75+
Мы так же можем создать ссылку динамически, используя только JavaScript и эмулировать на ней клик, используя `link.click()`, тогда загрузка начнется автоматически.
7676

7777
Далее простой пример создания "на лету" и загрузки blob объекта, без использования HTML:
7878

@@ -99,21 +99,21 @@ blob:https://javascript.info/1e67e00e-860d-40a5-89ae-6ab0cbee6273
9999

100100
Браузер для каждого url сгенерированного через `URL.createObjectURL` сохраняет внутреннее соответствие url -> blob. Таким образом url содержит короткий код, но это дает доступ к большому blob объекту.
101101

102-
Сгенерированный url действителен только пока текущий документ открыт. И это позволяет ссылаться на сгенерированный в нем blob в `<img>`, `<a>` или любом другом объекте ожидающим url.
102+
Сгенерированный url действителен только пока текущий документ открыт. И это позволяет ссылаться на сгенерированный в нем blob в `<img>`, `<a>` или любом другом объекте, ожидающим url.
103103

104-
В данном случае возможен побочный эффект. Пока карте соответствия (mapping) существует ссылка на blob, он находится в памяти. Браузер не может освободить память занятую blob объектом.
104+
В данном случае возможен побочный эффект. Пока в карте соответствия существует ссылка на blob, он находится в памяти. Браузер не может освободить память занятую blob объектом.
105105

106-
Ссылка в карте соответствия автоматически удаляется при выгрузке документа, после этого так же освобождается память. Но если приложение имеет длительный жизненный цикл, это может произойти не скоро. Таким образом если мы создадим подобный URL, blob будет висеть в памяти, даже если в нем нет больше необходимости.
106+
Ссылка в карте соответствия автоматически удаляется при выгрузке документа, после этого также освобождается память. Но если приложение имеет длительный жизненный цикл, это может произойти не скоро. Таким образом, если мы создадим URL для blob, он будет висеть в памяти, даже если в нем нет больше необходимости.
107107

108-
**`URL.revokeObjectURL(url)` удаляет внутреннюю ссылку на объект, что позволят удалить его (если нет другой ссылки) сборщику мусора, и память будет освобождена.**
108+
**`URL.revokeObjectURL(url)` удаляет внутреннюю ссылку на объект, что позволит удалить его (если нет другой ссылки) сборщику мусора, и память будет освобождена.**
109109

110-
В последнем примере, мы использовали blob только единожды, для мгновенной загрузки, после мы сразу же вызвали `URL.revokeObjectURL(link.href)`.
110+
В последнем примере мы использовали blob только единожды, для мгновенной загрузки, после мы сразу же вызвали `URL.revokeObjectURL(link.href)`.
111111

112-
Хоты в предыдущем примере, с кликабельной HTML ссылкой, мы не вызывали `URL.revokeObjectURL(link.href)`, потому что это сделало бы ссылку недействительной. После отзыва, и удаления ссылки на blob, url больше не будет работать.
112+
Хотя в предыдущем примере, с кликабельной HTML ссылкой, мы не вызывали `URL.revokeObjectURL(link.href)`, потому что это сделало бы ссылку недействительной. После отзыва, и удаления ссылки на blob, url больше не будет работать.
113113

114114
## Blob to base64
115115

116-
Альтернативой для `URL.createObjectURL` это конверсия blob в base64-encoded строку.
116+
Альтернативой `URL.createObjectURL` является возможность перевода blob объекта в строку с кодировкой base64.
117117

118118
Эта кодировка представляет двоичные данные в виде строки с безопасными для чтения символами в ASCII-кодах от 0 до 64. И что более важно -- мы можем использовать эту кодировку для "data-urls".
119119

@@ -128,7 +128,7 @@ blob:https://javascript.info/1e67e00e-860d-40a5-89ae-6ab0cbee6273
128128
Браузер декодирует строку и покажет смайлик: <img src="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7">
129129

130130

131-
Для трансформации blob в base64, мы будет использовать встроенный в браузер `FileReader` объект. Он может читать данные из Blobs в множестве форматов. В [следующей главе](info:file) мы рассмотрим это более глубоко.
131+
Для трансформации blob в base64, мы будет использовать встроенный в браузер `FileReader` объект. Он может читать данные из Blob в множестве форматов. В [следующей главе](info:file) мы рассмотрим это более глубоко.
132132

133133
Вот пример загрузки blob, при помощи base-64:
134134

@@ -170,7 +170,7 @@ reader.onload = function() {
170170
В примере ниже, изображение просто копируется, но мы можем взять его часть, или трансформировать его на canvas перед созданием blob:
171171

172172
```js run
173-
// берем какое либо изображение
173+
// берем любое изображение
174174
let img = document.querySelector('img');
175175

176176
// создаем <canvas> того же размера
@@ -182,34 +182,34 @@ let context = canvas.getContext('2d');
182182

183183
// копируем изображение в canvas (метод позволяет вырезать часть изображения)
184184
context.drawImage(img, 0, 0);
185-
// мы может вращать изображение при помощи context.rotate(), и делать множество других преобразований
185+
// мы можем вращать изображение при помощи context.rotate(), и делать множество других преобразований
186186

187-
// toBlob является асинхронной операцией, для которой callback функция вызывается при завершении
187+
// toBlob является асинхронной операцией, для которой callback-функция вызывается при завершении
188188
canvas.toBlob(function(blob) {
189-
// после того как blob создан, загружаем его
189+
// после того, как blob создан, загружаем его
190190
let link = document.createElement('a');
191191
link.download = 'example.png';
192192

193193
link.href = URL.createObjectURL(blob);
194194
link.click();
195195

196-
// удаляем внутреннюю ссылку на blob, что позволяет браузеру очистить память
196+
// удаляем внутреннюю ссылку на blob, что позволит браузеру очистить память
197197
URL.revokeObjectURL(link.href);
198198
}, 'image/png');
199199
```
200200

201-
Или если вы предпочитает `async/await` вместо callback функции:
201+
Или если вы предпочитаете `async/await` вместо callback функции:
202202
```js
203203
let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
204204
```
205205

206-
Для создания скриншота страницы, мы может использовать библиотеку <https://github.com/niklasvh/html2canvas>. Это кодирует HTML страницу в `<canvas>`. После этого мы может создать blob одним из вышеуказанных способов.
206+
Для создания скриншота страницы мы можем использовать такую библиотеку, как <https://github.com/niklasvh/html2canvas>. То, что она делает, это просто проходит страницу и отрисовывает её `<canvas>`. После этого мы может получить blob одним из вышеуказанных способов.
207207

208208
## Из Blob в ArrayBuffer
209209

210-
`Blob` конструктор позволят создать blob практически из чего угодно, включая `BufferSource`.
210+
`Blob` конструктор позволяет создать blob практически из чего угодно, включая `BufferSource`.
211211

212-
Но если нам нужен производительный низкоуровневый процесс, мы можем использовать `ArrayBuffer` из `FileReader`:
212+
Но если нам нужена производительная низкоуровневая обработка, мы можем использовать `ArrayBuffer` из `FileReader`:
213213

214214
```js
215215
// получаем arrayBuffer из blob
@@ -227,7 +227,7 @@ fileReader.onload = function(event) {
227227

228228
## Резюме
229229

230-
В то время как `ArrayBuffer`, `Uint8Array` и другие `BufferSource` являются "бинарными данными", a [Blob](https://www.w3.org/TR/FileAPI/#dfn-Blob) представляет "бинарные данные с типом".
230+
В то время как `ArrayBuffer`, `Uint8Array` и другие `BufferSource` являются "бинарными данными", [Blob](https://www.w3.org/TR/FileAPI/#dfn-Blob) представляет "бинарные данные с типом".
231231

232232
Это делает Blob удобным для операций загрузки/выгрузки данных, которые так часто используются в браузере.
233233

0 commit comments

Comments
 (0)