Blob en JavaScript
- Blob en JavaScript
- Ventajas de Blob en JavaScript
- Blob a Base64
- Blob a imagen
- Blob a búfer de matriz
En este artículo, aprenderemos sobre el objeto Blob y veremos cómo funciona en el código fuente de JavaScript. Usando un ejemplo, veremos cómo un Blob contiene los datos del archivo en JavaScript.
Blob en JavaScript
En JavaScript, usamos Blob para mantener los datos como un objeto almacenado en un archivo. Simplemente contiene los datos en un grupo de bytes y tiene su propio tamaño como un archivo simple.
Según el tamaño del blob y las características del navegador, los datos del blob se almacenan en la memoria y el sistema de archivos. Podemos leer fácilmente el contenido de Blob como un búfer de matriz, lo que hace que Blob sea más apropiado para almacenar los datos en forma binaria.
Para mostrar el contenido de un Blob, podemos usar Blob fácilmente como una URL para <a>, <img> u otras etiquetas de elementos en HTML.
Aquí está la sintaxis básica del objeto Blob en JavaScript:
var myBlob = new Blob(['Content of Blob'], {type: 'text/plain'});
Código de ejemplo:
Se puede obtener un Blob utilizando el objeto createObjectURL(), al que apunta la URL del Blob.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Blob
</title>
</head>
<body>
<script>
let blobContent = new Blob(["DelftStack is a best website to learn programming!"],
{ type: 'text/plain' }); //blob file content and type
link.href = URL.createObjectURL(blobContent);
</script>
<h1 style="color:blueviolet">DelftStack Learning</h1>
<h3>JavaScript Create Blob Object and Download File</h3>
<p>Click on link to to download the file</p>
<a download="dummyFile.txt" href='#' id="link">Download File</a> //file name
</body>
</html>
Producción:
Como se muestra arriba en la fuente HTML, hemos creado el objeto Blob blobContent en las etiquetas <script></script>. Hemos definido el contenido y el tipo de contenido de nuestro archivo.
Utilizando createObjectURL() hemos obtenido un blobContent como URL y enlace con href. Usamos etiquetas ancla con #href='#' e id=link para descargar el archivo dummy.txt.
Puede guardar la fuente anterior con la extensión de HTML y abrirla en el navegador, luego hacer clic en el enlace del archivo de descarga y ver las descargas. Habrá un archivo de texto, dummyFile.txt.
Ventajas de Blob en JavaScript
A continuación se presentan algunas ventajas de usar un objeto Blob en JavaScript:
- Se puede hacer referencia fácilmente a los blobs.
- Para agregar archivos de datos binarios más grandes a una base de datos, los blobs son la mejor opción para agregar archivos de datos binarios grandes.
- Podemos configurar fácilmente los derechos de acceso mientras usamos Blobs.
- La copia de seguridad de las bases de datos contiene todos los datos mientras usa Blobs.
Blob a Base64
Es útil convertir objetos de archivo JavaScript o blobs en cadenas Base64 mientras se cargan datos basados en cadenas al servidor. Podemos usar JavaScript para convertir una cadena Base64 y un DataURL de un objeto de archivo.
Podemos convertir Blob a una cadena codificada en Base64, y esa codificación representa datos binarios como una cadena. Y podemos usar esta codificación en data-urls.
Sintaxis básica:
const convertBlobToBase64 = async (blob) => { // blob data
const reader = new FileReader();
let result = reader.readAsDataURL(blob);
}
Blob a imagen
Usando JavaScript, podemos crear un Blob de una imagen o una parte de la imagen. Usamos el elemento canvas para hacer operaciones de imagen como crear una imagen o sus partes.
Sintaxis básica:
let myblob =
await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
Blob a búfer de matriz
Incluyendo cualquier fuente de búfer, el constructor Blob permite generar un Blob a partir de cualquier cosa. Podemos generar el búfer de matriz de nivel más bajo desde Blob usando blob.arrayBuffer().
Sintaxis básica:
const mybufferPromise = await myblob.arrayBuffer();