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
`ArrayBuffer`and views are a part of ECMA standard, a part of JavaScript.
3
+
Los `ArrayBuffer`y las vistas son parte del estándar ECMA, una parte de JavaScript.
4
4
5
-
In the browser, there are additional higher-level objects, described in [File API](https://www.w3.org/TR/FileAPI/), in particular `Blob`.
5
+
En el navegador, hay objetos de alto nivel adicionales, descritas en la [API de Archivo](https://www.w3.org/TR/FileAPI/), en particular `Blob`.
6
6
7
-
`Blob`consists of an optional string `type` (a MIME-type usually), plus `blobParts` -- a sequence of other `Blob` objects, strings and`BufferSource`.
7
+
`Blob`consta de un tipo especial de cadena (usualmente de tipo MIME), más partes Blob: una secuencia de otros objetos `Blob`, cadenas y`BufferSource`.
8
8
9
9
10
10
11
-
The constructor syntax is:
11
+
La sintaxis del constructor es:
12
12
13
13
```js
14
-
newBlob(blobParts, options);
14
+
newBlob(blobParts, opciones);
15
15
```
16
16
17
-
-**`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`**es un array de valores `Blob`/`BufferSource`/`String`.
18
+
-**`opciones`**objeto opcional:
19
+
-**`tipo`** -- `Blob`, usualmente un tipo MIME, por ej. `image/png`,
20
+
-**`endings`** -- para transformar los finales de línea para hacer que el `Blob`coincida con los carácteres de nueva línea del Sistema Operativo actual (`\r\n` or `\n`). Por omisión es `"transparent"` (no hacer nada), pero también puede ser`"native"` (transformar).
21
21
22
-
For example:
22
+
Por ejemplo:
23
23
24
24
```js
25
-
//create Blob from a string
25
+
//crear un Blob a partir de una cadena
26
26
let blob =newBlob(["<html>…</html>"], {type:'text/html'});
27
-
//please note: the first argument must be an array [...]
27
+
//observación: el primer argumento debe ser un array [...]
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
+
//crear un Blob a partir de un array tipado y cadenas
32
+
let hello =newUint8Array([72, 101, 108, 108, 111]); // "Hello" en formato binario
33
33
34
34
let blob =newBlob([hello, '', 'world'], {type:'text/plain'});
No podemos cambiar datos directamente en un`Blob`, pero podemos obtener partes de un `Blob`, crear nuevos objetos `Blob`a partir de ellos, mezclarlos en un nuevo `Blob`y así por el estilo.
52
52
53
-
This behavior is similar to JavaScript strings: we can't change a character in a string, but we can make a new corrected string.
53
+
Este comportamiento es similar a las cadenas de JavaScript: no podemos cambiar un caractér en una cadena, pero podemos hacer una nueva, corregida.
54
54
```
55
55
56
-
## Blob as URL
56
+
## Blob como URL
57
57
58
-
A Blob can be easily used as an URL for `<a>`, `<img>` or other tags, to show its contents.
58
+
Un Blob puede ser utilizado fácilmente como una URL para `<a>`, `<img>` u otras etiquetas, para mostrar su contenido.
59
59
60
-
Thanks to `type`, we can also download/upload `Blob` objects, and the `type` naturally becomes `Content-Type` in network requests.
60
+
Gracias al `tipo`, también podemos descargar/cargar objetos `Blob`, y el `tipo` se convierte naturalmente en `Content-Type` en solicitudes de red.
61
61
62
-
Let's start with a simple example. By clicking on a link you download a dynamically-generated `Blob` with `hello world` contents as a file:
62
+
Empecemos con un ejemplo simple. Al hacer click en un link, descargas un `Blob` dinámicamente generado con contenido `hello world` en forma de archivo:
63
63
64
64
```html run
65
-
<!-- download attribute forces the browser to download instead of navigating -->
The browser for each URL generated by`URL.createObjectURL`stores an the URL -> `Blob`mapping internally. So such URLs are short, but allow to access the`Blob`.
100
+
Por cada URL generada por`URL.createObjectURL`el navegador almacena un `Blob`en la URL mapeado internamente. Así que las URLs son cortas, pero permiten acceder al`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
+
Una URL generada (y su relación con ella) solo es válida en el documento actual, mientras está abierto. Y este permite referenciar al `Blob`en`<img>`, `<a>`, básicamente cualquier otro objeto que espera un URL.
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
+
También hay efectos secundarios. Mientras haya un mapeado para un`Blob`, el`Blob`en sí mismo se guarda en la memoria. El navegador no puede liberarlo.
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
+
El mapeado se limpia automáticamente al vaciar un documento, así los objetos `Blob`son liberados. Pero si una applicación es de larga vida, entonces eso no va a pasar pronto.
107
107
108
-
**So if we create a URL, that`Blob`will hang in memory, even if not needed any more.**
108
+
**Entonces, si creamos una URL, este`Blob`se mantendrá en la memoria, incluso si ya no se necesita.**
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)`elimina la referencia el mapeo interno, además de permitir que el `Blob`sea borrado (si ya no hay otras referencias), y que la memoria sea liberada.
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
+
En el último ejemplo, intentamos que el`Blob`sea utilizado una sola vez, para descargas instantáneas, así llamamos `URL.revokeObjectURL(link.href)`inmediatamente.
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
+
En el ejemplo anterior con el link HTML clickeable, no llamamos `URL.revokeObjectURL(link.href)`, porque eso puede hacer la URL del `Blob`inválido. Después de la revocación, como el mapeo es eliminado, la URL ya no volverá a funcionar.
115
115
116
-
## Blob to base64
116
+
## Blob a base64
117
117
118
-
An alternative to`URL.createObjectURL`is to convert a `Blob`into a base64-encoded string.
118
+
Una alternativa a`URL.createObjectURL`es convertir un `Blob`en una cadena codificada en 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
+
Esa codificación representa datos binarios como una cadena ultra segura de caractéres "legibles" con códigos ASCII desde el 0 al 64. Y lo que es más importante, podemos utilizar codificación en las "URLs de datos".
121
121
122
-
A [data url](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)has the form`data:[<mediatype>][;base64],<data>`. We can use such urls everywhere, on par with "regular" urls.
122
+
Un [URL de datos](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)tiene la forma`data:[<mediatype>][;base64],<data>`. Podemos usar suficientes URLs por doquier, junto a URLs "regulares".
The browser will decode the string and show the image: <imgsrc="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7">
130
+
El navegador decodificará la cadena y mostrará la imagen: <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
+
Para transformar un`Blob`a base64, usaremos el objeto nativo`FileReader`. Puede leer datos de Blobs en múltiples formatos. En el [siguiente capítulo](info:file)lo cubriremos en profundidad.
134
134
135
-
Here's the demo of downloading a blob, now via base-64:
135
+
Aquí está el demo de descarga de un blob, ahora con base-64:
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); //convierte el blob a base64 y llama a onload
146
146
*/!*
147
147
148
148
reader.onload=function() {
149
-
link.href=reader.result; //data url
149
+
link.href=reader.result; //URL de datos
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
+
Se pueden utilizar ambas maneras para hacer una URL de un`Blob`. Pero usualmente`URL.createObjectURL(blob)`es más simple y rápido.
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 a URL de datos"
157
+
+ Necesitamos revocarlos para cuidar la memoria.
158
+
+ Acceso directo al blob, sin "condificación/decodificación"
159
+
- No necesitamos revocar nada.
160
+
- Se pierde rendimiento y memoria en grandes objetos `Blob` al codificar.
161
161
```
162
162
163
-
## Image to blob
163
+
## imagen a 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
+
Podemos crear un `Blob`de una imagen, una parte de una imagen, o incluso hacer una captura de la página. Es práctico para subirlo a algún lugar.
166
166
167
-
Image operations are done via `<canvas>` element:
167
+
Las operaciones de imágenes se hacen a través del elemento `<canvas>`:
168
168
169
-
1.Draw an image (or its part) on canvas using[canvas.drawImage](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage).
170
-
2.Call canvas method [.toBlob(callback, format, quality)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob)that creates a`Blob`and runs `callback`with it when done.
169
+
1.Dibuja una imagen (o una parte) en el canvas utilizando[canvas.drawImage](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage).
170
+
2.Llama el método de canvas [.toBlob(callback, format, quality)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob)que crea un`Blob`y llama el `callback`cuando termina.
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
+
En el ejemplo siguiente, un imagen se copia, pero no podemos cortarla o transformarla en el canvas hasta convertirla en blob:
173
173
174
174
```js run
175
-
//take any image
175
+
//tomar cualquier imagen
176
176
let img =document.querySelector('img');
177
177
178
-
//make <canvas> of the same size
178
+
//hacer el <canvas> del mismo tamaño
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
+
//copiar la imagen en él (este método permite cortar la imagen)
186
186
context.drawImage(img, 0, 0);
187
-
//we can context.rotate(), and do many other things on canvas
187
+
//podemos hacer un context.rotate(), y muchas otras cosas en canvas
188
188
189
-
// toBlob is async opereation, callback is called when done
189
+
// toBlob es una operación sincrónica, callback es llamada al terminar
190
190
canvas.toBlob(function(blob) {
191
-
// blob ready, download it
191
+
// blob listo, descárgalo
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
+
//borrar la referencia interna del blob, para permitir al navegador eliminarlo de la memoria
199
199
URL.revokeObjectURL(link.href);
200
200
}, 'image/png');
201
201
```
202
202
203
-
If we prefer `async/await`instead of callbacks:
203
+
Si preferimos `async/await`en lugar de callbacks:
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
+
Para capturar la página, podemos utilizar una librería como <https://github.com/niklasvh/html2canvas>. Que lo que hace es escanear toda la página y dibujarla en el `<canvas>`. Entonces podemos obtener un `Blob`de la misma manera que arriba.
209
209
210
-
## From Blob to ArrayBuffer
210
+
## De Blob a ArrayBuffer
211
211
212
-
The `Blob`constructor allows to create a blob from almost anything, including any`BufferSource`.
212
+
El constructor de `Blob`permite crear un blob de casi cualquier cosa, incluyendo cualquier`BufferSource`.
213
213
214
-
But if we need to perform low-level processing, we can get the lowest-level `ArrayBuffer`from it using`FileReader`:
214
+
Pero si queremos ejecutar un procesamiento de bajo nivel, podemos obtener el nivel más bajo de un `ArrayBuffer`utilizando`FileReader`:
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
+
Mientras`ArrayBuffer`, `Uint8Array`y otros`BufferSource`son "datos binarios", un[Blob](https://www.w3.org/TR/FileAPI/#dfn-Blob)representa "datos binarios con tipo".
233
233
234
-
That makes Blobs convenient for upload/download operations, that are so common in the browser.
234
+
Esto hace a los Blobs convenientes para operaciones de carga/descarga, estos son muy comunes en el navegador.
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
+
Los métodos que ejecutan solicitudes web, como [XMLHttpRequest](info:xmlhttprequest), [fetch](info:fetch)y otros, pueden trabajar nativamente con `Blob`, como con otros tipos binarios.
237
237
238
-
We can easily convert betweeen `Blob`and low-level binary data types:
238
+
Podemos convertir fácilmente entre `Blob`y tipos de datos binarios de bajo nivel:
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
+
-Podemos convertir a Blob desde un array tipado usando el constructor `new Blob(...)`.
241
+
-Podemos obtener un `ArrayBuffer`de un Blob usando`FileReader`, y entonces crear una vista sobre él para procesamiento binario de bajo nivel.
0 commit comments