🟢معمولا تو طراحی فرانت اند نیاز میشه که بخواید از یسری Blob استفاده کنید توی بک گراند کار، که معمولا هم به شکل های مختلفی هستن و پیدا کردنشون ممکنه سخت باشه.
با استفاده از این سایت میتونید Blob های منحصر به فرد و یونیک بسازید طبق چیزی که خودتون نیاز دارید و برای پروژه هاتون استفاده کنید.
خروجی رو هم میتونید به شکل SVG و یا کد بگیرید.

🔗https://www.blobmaker.app/

#frontend #blob
☕️ @CodeExplore

🔥‏Blob چیه و به چه دردی می‌خوره؟

‏Blob یه چیزی تو جاوااسکریپته که بهت اجازه می‌ده داده‌های باینری رو توی مرورگر مدیریت کنی. حالا این داده‌ها چی می‌تونن باشن؟ هر چیزی! مثلاً یه عکس، یه فایل صوتی، یه متن یا حتی یه ویدئو. خلاصه، Blob وقتی به درد می‌خوره که می‌خوای با این جور فایل‌ها سر و کله بزنی.

⚡️‏ چطوری Blob می‌سازیم؟

مثلاً می‌خوای یه فایل متنی کوچیک بسازی:

let blob = new Blob(["سلام دنیا!"], { type: 'text/plain' });

اینجا یه Blob ساختیم که توش یه رشته (متن) هست و نوعش رو هم گفتیم متنه. این نوع خیلی مهمه چون به مرورگر می‌فهمونه که با چه جور داده‌ای طرفه.

✔️‏ Blob چه خاصیت‌هایی داره؟

‏- `size`: اندازه Blob رو به بایت (مثلاً چند کیلوبایته) نشون می‌ده.
‏- `type`: نوع Blob رو نشون می‌ده که مثلاً این یه متن ساده‌ست، یه عکس یا هر چیز دیگه.

console.log(blob.size); // اندازه داده‌ها
console.log(blob.type); // نوع داده

چطور از Blob یه تیکه بگیریم؟

اگه بخوای از یه Blob فقط یه تیکه کوچیک بگیری، می‌تونی از متد slice استفاده کنی:

let part = blob.slice(0, 5, 'text/plain');
console.log(part.size); // 5 بایت اول از Blob اصلی رو گرفتیم

💎 ساختن Blob از داده‌های مختلف

می‌تونی از هر جور داده‌ای مثل آرایه، رشته و غیره Blob بسازی:

let arrayOfData = new Uint8Array([72, 101, 108, 108, 111]);
let blobFromData = new Blob([arrayOfData], { type: 'text/plain' });

لینک دانلود بسازیم!

یه مثال باحال دیگه اینه که از Blob یه لینک دانلود بسازی:

let blob = new Blob(["سلام دنیا!"], { type: 'text/plain' });
let url = URL.createObjectURL(blob);

let a = document.createElement('a');
a.href = url;
a.download = 'hello.txt';
document.body.appendChild(a);
a.click();

URL.revokeObjectURL(url); // یادت نره URL رو بعد از استفاده آزاد کنی

⭐️‏ خوندن داده‌های Blob

اگه بخوای بدونی داخل Blob چیه، می‌تونی از FileReader استفاده کنی:

let reader = new FileReader();

reader.onload = function(event) {
  console.log(event.target.result); // محتوای Blob رو به عنوان متن نشون می‌ده
};

reader.readAsText(blob);

💎 ترکیب Blob با آپلود فایل

فرض کن می‌خوای یه فایل رو آپلود کنی. می‌تونی Blob رو داخل FormData بذاری و ارسالش کنی:

let formData = new FormData();
formData.append('file', blob, 'hello.txt');

fetch('/upload', {
  method: 'POST',
  body: formData
});

خلاصه‌اش چیه؟

💥‏Blob تو جاوااسکریپت خیلی بدرد بخوره اگه بخوای با فایل‌های مختلف کار کنی. می‌تونی راحت ازش برای ساختن، خوندن و آپلود کردن فایل‌ها استفاده کنی.

#js #blob #api
☕️ @CodeExplore