createObjectURL

Crea una URL de objeto a partir de un Blob, un ArrayBuffer o una Response.

API

createObjectURL

Devuelve

Argumento	Descripción	Tipo
`Promise<string>`	Promesa que se resuelve con la URL de objeto	`Promise`

Parámetros

Parámetro	Descripción	Tipo	Por defecto
`src`	El origen de los datos	`Blob \| ArrayBuffer \| Response \| string`	Obligatorio

Ejemplo

Uso básico (Blob)

import { createObjectURL } from 'ranuts';

const blob = new Blob(['Hello World'], { type: 'text/plain' });
const url = await createObjectURL(blob);
console.log(url); // 'blob:http://example.com/...'

Crear a partir de un ArrayBuffer

import { createObjectURL } from 'ranuts';

const buffer = new ArrayBuffer(8);
const url = await createObjectURL(buffer);
console.log(url); // 'blob:http://example.com/...'

Crear a partir de una Response

import { createObjectURL } from 'ranuts';

const response = await fetch('https://example.com/image.jpg');
const url = await createObjectURL(response);
console.log(url); // 'blob:http://example.com/...'

Cuando se pasa una cadena

import { createObjectURL } from 'ranuts';

// Si se le pasa una cadena, la devuelve tal cual
const url = await createObjectURL('https://example.com/image.jpg');
console.log(url); // 'https://example.com/image.jpg'

Vista previa de una imagen

import { createObjectURL } from 'ranuts';

async function previewImage(file) {
  const url = await createObjectURL(file);
  document.getElementById('preview').src = url;
}

Notas

Es asíncrono: devuelve una promesa, así que hay que usar await o .then().
Tipos admitidos: Blob, ArrayBuffer, Response y cadena.
Memoria: las URL creadas hay que liberarlas llamando tú a URL.revokeObjectURL().
Cuándo usarlo: es habitual para previsualizar archivos, generar URL temporales y procesar imágenes.

Trae el contenido de una URL como bytes en bruto mediante XMLHttpRequest. Esos bytes suelen ir a parar al createObjectURL de arriba, cuando necesitas inspeccionarlos o transformarlos (comprobar un número mágico, descodificar audio) antes de convertirlos en una URL que se pueda mostrar.

import { requestUrlToBuffer, createObjectURL } from 'ranuts/utils';

const result = await requestUrlToBuffer('/assets/clip.webm', {});
if (result.success) {
  const url = await createObjectURL(new Blob([result.data]));
  video.src = url;
}

Parámetros

Parámetro	Descripción	Tipo	Por defecto
`src`	La URL que se descarga	`string`	Obligatorio
`options`	`method` (por defecto `'GET'`) y `responseType` (por defecto `'arraybuffer'`)	`Partial<RequestUrlToArraybufferOption>`	Obligatorio

Devuelve

Una Promise que se resuelve con { success: true, data, message: '' } ante un HTTP 200, y que se rechaza con { success: false, data: status, message } en cualquier otro caso. Una petición fallida es un rechazo, no una promesa resuelta con success: false, así que un .then() a secas sin .catch() lo sacará a la luz como un rechazo sin gestionar.