Blob

Blob (Binary Large Object — ikkilik katta obyekt) — brauzerdagi ikkilik ma'lumotni tasvirlash uchun mo'ljallangan obyekt. ArrayBufferdan farqi shundaki, Blob nafaqat baytlarni, balki ularning turini (MIME type, masalan image/png) ham saqlaydi. Aynan shu tur Blobni fayl sifatida yuklab olish yoki rasm sifatida ko'rsatishga imkon beradi. Blob — brauzer obyekti, shuning uchun quyidagi misollar brauzer muhitiga oid.

Blob konstruktori

Blob ikkita argument bilan yaratiladi: bo'laklar (blobParts) massivi va sozlamalar obyekti:

let blob = new Blob(blobParts, options);

• blobParts — massiv bo'lib, uning elementlari String, ArrayBuffer, TypedArray, DataView yoki boshqa Blob bo'lishi mumkin — barchasi ketma-ket birlashtiriladi;
• options — ixtiyoriy obyekt; asosiy xususiyati type — Blob ma'lumotining MIME turi (masalan text/plain, image/png).

Matndan Blob yaratamiz:

// matnli bo'laklardan Blob yasaymiz
let blob = new Blob(["Salom, ", "dunyo!"], { type: "text/plain" });

console.log(blob.size); // 13  (baytlar soni)
console.log(blob.type); // text/plain

size — Blobdagi baytlar soni, type — uning MIME turi. E'tibor bering: bo'laklar avtomatik birlashtiriladi, xuddi bitta uzluksiz ma'lumotdek.

ArrayBufferdan Blob

Blobni faqat matndan emas, ikkilik ma'lumotdan ham yasash mumkin. Masalan, TypedArray yordamida:

// ikkilik baytlardan Blob
let bytes = new Uint8Array([72, 101, 108, 108, 111]); // Hello
let blob = new Blob([bytes], { type: "application/octet-stream" });

console.log(blob.size); // 5

Bu usul rasm, audio yoki boshqa ikkilik ma'lumotni fayl formatida qadoqlashda ishlatiladi.

slice bilan bo'laklash

blob.slice(start, end, contentType) — Blobning bir qismidan yangi Blob qaytaradi. Xuddi massiv sliceiga o'xshaydi:

• start — boshlang'ich bayt indeksi (standarti 0);
• end — tugash bayti (kirmaydi, standarti oxirigacha);
• contentType — yangi Blobning MIME turi (standarti bo'sh).

let blob = new Blob(["Hello world"], { type: "text/plain" });

let qism = blob.slice(0, 5); // dastlabki 5 bayt
console.log(qism.size);      // 5
// qism ichida "Hello" saqlanadi

URL.createObjectURL: Blobga havola

Blobni brauzerda ko'rsatish yoki yuklab olish uchun unga URL kerak. URL.createObjectURL(blob) Blobga ishoruvchi maxsus qisqa havola yaratadi (blob: bilan boshlanadi):

let blob = new Blob(["Fayl mazmuni"], { type: "text/plain" });

let url = URL.createObjectURL(blob);
console.log(url);
// blob:https://example.com/1e8b4a2c-...

// bu URLni <a href> yoki <img src>da ishlatish mumkin

let url = URL.createObjectURL(blob);

// ... url ishlatildi ...

URL.revokeObjectURL(url); // xotirani bo'shatamiz

Faylni yuklab olish

Blob va object URL yordamida foydalanuvchiga faylni yuklab olishni taklif qilish mumkin. Buning uchun <a> elementiga download atributini qo'yamiz va uni dasturiy bosamiz:

function faylniYuklab(matn, faylNomi) {
  let blob = new Blob([matn], { type: "text/plain" });
  let url = URL.createObjectURL(blob);

  let a = document.createElement("a");
  a.href = url;
  a.download = faylNomi; // yuklab olinadigan fayl nomi

  document.body.appendChild(a);
  a.click();               // dasturiy bosamiz
  document.body.removeChild(a);

  URL.revokeObjectURL(url); // tozalaymiz
}

faylniYuklab("Salom, dunyo!", "salom.txt");

Blobni rasmga aylantirish

Blobning katta ustunligi — undan bevosita rasm ko'rsatish mumkin. Object URLni <img>ga bersangiz kifoya:

// masalan, fetch orqali kelgan rasm Blob'i
let response = await fetch("rasm.png");
let blob = await response.blob();

let img = document.createElement("img");
img.src = URL.createObjectURL(blob);
document.body.appendChild(img);

// rasm yuklangach URLni tozalash
img.onload = () => URL.revokeObjectURL(img.src);

Teskari yo'nalish ham mumkin: <canvas> tarkibini canvas.toBlob(callback, type) orqali Blobga aylantirib, so'ng yuklab olish yoki serverga jo'natish mumkin:

canvas.toBlob(function(blob) {
  let url = URL.createObjectURL(blob);

  let a = document.createElement("a");
  a.href = url;
  a.download = "rasm.png";
  a.click();

  URL.revokeObjectURL(url);
}, "image/png");

Blob va ArrayBuffer o'zaro

Blob va past darajali ArrayBuffer o'rtasida oson o'tish mumkin. Blobdan baytlarni olish uchun uning metodlari ishlatiladi:

• await blob.arrayBuffer() — Blob mazmunini ArrayBuffer ko'rinishida qaytaradi;
• await blob.text() — Blob mazmunini matn (UTF-8) sifatida qaytaradi;
• blob.stream() — Blobni o'qish oqimi (ReadableStream) sifatida beradi.

let blob = new Blob(["Hello"], { type: "text/plain" });

let buffer = await blob.arrayBuffer();
let bytes = new Uint8Array(buffer);
console.log(bytes[0]); // 72 (H)

let matn = await blob.text();
console.log(matn); // Hello

Xulosa

• Blob — ikkilik ma'lumot + MIME turini saqlovchi brauzer obyekti;
• new Blob(parts, {type}) — satr, ArrayBuffer, TypedArray yoki boshqa Bloblardan yasaladi;
• blob.size va blob.type — asosiy xususiyatlar; Blob o'zgarmas;
• blob.slice(...) — bo'laklash (masalan chunked upload uchun);
• URL.createObjectURL(blob) — Blobga blob: havola; revokeObjectURL bilan tozalash shart;
• download atributi bilan fayl yuklab olish, <img>ga URL berib rasm ko'rsatish mumkin;
• blob.arrayBuffer(), blob.text() — Blobdan past darajali ma'lumotga o'tish.