createObjectURL

Create an object URL from Blob, ArrayBuffer, or Response.

API

createObjectURL

Return

Argument	Description	Type
`Promise<string>`	Promise that resolves to object URL	`Promise`

Parameters

Parameter	Description	Type	Default
`src`	Data source	`Blob \| ArrayBuffer \| Response \| string`	Required

Example

Basic Usage (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/...'

Create from ArrayBuffer

import { createObjectURL } from 'ranuts';

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

Create from 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/...'

Handle String

import { createObjectURL } from 'ranuts';

// If string is passed, returns directly
const url = await createObjectURL('https://example.com/image.jpg');
console.log(url); // 'https://example.com/image.jpg'

Image Preview

import { createObjectURL } from 'ranuts';

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

Notes

Async operation: Returns Promise, needs to be handled with await or .then().
Type support: Supports Blob, ArrayBuffer, Response, and string types.
Memory management: Created URLs need to manually call URL.revokeObjectURL() to free memory.
Use case: Commonly used for file preview, temporary URL generation, image processing, etc.

Fetch a URL as raw bytes over XMLHttpRequest. Those bytes typically feed into createObjectURL above, when you need to inspect or transform them (checking a magic number, decoding audio) before turning them into a displayable URL.

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;
}

Parameters

Parameter	Description	Type	Default
`src`	URL to fetch	`string`	Required
`options`	`method` (default `'GET'`) and `responseType` (default `'arraybuffer'`)	`Partial<RequestUrlToArraybufferOption>`	Required

Return

Promise resolving to { success: true, data, message: '' } on an HTTP 200, or rejecting with { success: false, data: status, message } otherwise. A failed request is a rejection, not a resolved success: false, so a bare .then() without .catch() will surface it as an unhandled rejection.