[كود] Base64 في JavaScript
أمثلة JavaScript عملية لترميز وفك ترميز Base64 مع APIs المتصفح الحديثة.
// الترميز وفك الترميز الأساسي
JavaScript يوفر وظائف مدمجة لعمليات Base64. وظائف btoa() و atob() تتعامل مع الترميز وفك الترميز الأساسي:
هذه الوظائف تعمل بشكل رائع مع نص ASCII، لكنها تتطلب معالجة خاصة لأحرف Unicode.
// ترميز Base64 أساسي
const text = 'Hello World';
const encoded = btoa(text);
console.log(encoded); // SGVsbG8gV29ybGQ=
// فك ترميز Base64 أساسي
const decoded = atob(encoded);
console.log(decoded); // Hello World
// التحقق من صحة Base64
function isValidBase64(str) {
try {
return btoa(atob(str)) === str;
} catch (err) {
return false;
}
}
// دعم UNICODE
لسلاسل Unicode، نحتاج لتحويل إلى بايتات UTF-8 أولاً. المتصفحات الحديثة توفر TextEncoder و TextDecoder APIs:
هذا النهج يتعامل بشكل صحيح مع الرموز التعبيرية والأحرف الدولية ومحتوى Unicode الآخر.
// ترميز Base64 آمن لـ Unicode
function encodeBase64(str) {
const encoder = new TextEncoder();
const bytes = encoder.encode(str);
const binary = String.fromCharCode(...bytes);
return btoa(binary);
}
// فك ترميز Base64 آمن لـ Unicode
function decodeBase64(base64) {
const binary = atob(base64);
const bytes = new Uint8Array(binary.length);
for (let i = 0; i < binary.length; i++) {
bytes[i] = binary.charCodeAt(i);
}
const decoder = new TextDecoder();
return decoder.decode(bytes);
}
// مثال مع الرموز التعبيرية
const emoji = 'Hello 👋 World 🌍';
const encoded = encodeBase64(emoji);
const decoded = decodeBase64(encoded);
console.log(decoded); // Hello 👋 World 🌍
// معالجة الملفات
تحويل الملفات إلى Base64 شائع للرفع و data URIs. استخدم FileReader API لمعالجة الملفات من جانب العميل:
هذا ينشئ data URIs يمكن تضمينها مباشرة في HTML أو إرسالها إلى APIs.
// تحويل الملف إلى Base64 data URI
function fileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
reader.readAsDataURL(file);
});
}
// الاستخدام مع مدخل الملف
document.getElementById('fileInput').addEventListener('change', async (e) => {
const file = e.target.files[0];
if (file) {
try {
const base64 = await fileToBase64(file);
console.log(base64);
// النتيجة: data:image/png;base64,iVBORw0KGgoAAAA...
} catch (error) {
console.error('خطأ:', error);
}
}
});
// BASE64 الآمن للـ URL
Base64 القياسي يستخدم أحرف + و / التي تحتاج ترميز URL. Base64 الآمن للـ URL يستبدل هذه بـ - و _:
هذا أساسي للرموز والـ IDs والبيانات الأخرى المنقولة عبر URLs.
// التحويل إلى Base64 آمن للـ URL
function toUrlSafeBase64(base64) {
return base64
.replace(/\+/g, '-')
.replace(/\//g, '_')
.replace(/=/g, '');
}
// التحويل من Base64 آمن للـ URL
function fromUrlSafeBase64(urlSafeBase64) {
let base64 = urlSafeBase64
.replace(/-/g, '+')
.replace(/_/g, '/');
// إضافة حشو إذا لزم
const padding = 4 - (base64.length % 4);
if (padding !== 4) {
base64 += '='.repeat(padding);
}
return base64;
}
// مثال
const text = 'URL-safe encoding test';
const encoded = btoa(text);
const urlSafe = toUrlSafeBase64(encoded);
console.log(urlSafe); // VVJMLXNhZmUgZW5jb2RpbmcgdGVzdA
// تدفق البيانات الكبيرة
للملفات الكبيرة أو تدفقات البيانات، اعمل في قطع لتجنب مشاكل الذاكرة:
هذا النهج يمنع تجمد المتصفح ويتعامل مع مجموعات البيانات الكبيرة بكفاءة.
// ترميز Base64 مبني على التدفق
class Base64Encoder {
constructor() {
this.buffer = '';
}
encode(chunk) {
this.buffer += chunk;
const completeBytes = Math.floor(this.buffer.length / 3) * 3;
const toEncode = this.buffer.slice(0, completeBytes);
this.buffer = this.buffer.slice(completeBytes);
return btoa(toEncode);
}
flush() {
if (this.buffer.length > 0) {
const result = btoa(this.buffer);
this.buffer = '';
return result;
}
return '';
}
}
// الاستخدام
const encoder = new Base64Encoder();
let result = '';
result += encoder.encode('First chunk');
result += encoder.encode(' Second chunk');
result += encoder.flush();
console.log(result);
// معالجة الأخطاء
نفذ دائماً معالجة أخطاء مناسبة لعمليات Base64:
معالجة الأخطاء القوية تمنع تعطل التطبيق وتوفر تجربة مستخدم أفضل.
// عمليات Base64 آمنة مع معالجة الأخطاء
function safeEncode(input) {
try {
if (typeof input !== 'string') {
throw new Error('المدخل يجب أن يكون نصاً');
}
return btoa(input);
} catch (error) {
console.error('خطأ في الترميز:', error.message);
return null;
}
}
function safeDecode(base64) {
try {
// التحقق من تنسيق Base64
if (!/^[A-Za-z0-9+/]*={0,2}$/.test(base64)) {
throw new Error('تنسيق Base64 غير صالح');
}
return atob(base64);
} catch (error) {
console.error('خطأ في فك الترميز:', error.message);
return null;
}
}
// الاستخدام
const encoded = safeEncode('Hello World');
const decoded = safeDecode(encoded);
if (encoded && decoded) {
console.log('نجح:', decoded);
}