فك تشفير الصور Base64
فك تشفير data URI من Base64 إلى صور مرئية
ما هو فك تشفير الصور Base64؟
فك تشفير الصور Base64 هو عكس التشفير: يأخذ سلسلة Base64 أو data URI تمثل صورة ويحولها مرة أخرى إلى بيانات بكسل ثنائية مرئية. عند استلام سلسلة مثل data:image/png;base64,iVBORw0KGgo...، يزيل فك التشفير بادئة data URI، يعكس تشفير Base64 المحدد في RFC 4648، ويعيد بناء بايتات الصورة الأصلية. يمكن للمتصفح بعد ذلك تقديم البايتات المفك تشفيرها كصورة مرئية.
ربط data URIs (RFC 2397) نوع MIME والمحتوى المشفر Base64 في سلسلة واحدة. تظهر بشكل متكرر في استجابات API وكود بريد HTML وأوراق أنماط CSS وسجلات قاعدة البيانات حيث يتم تخزين الصور كنص بدلاً من ملفات ثنائية. يعتبر فك تشفير هذه السلاسل ضروريًا لمعاينة الصورة والتحقق من محتوياتها أو حفظها كملف مستقل. لأن Base64 يستخدم 4 أحرف ASCII لتمثيل كل 3 بايتات من البيانات الثنائية، فإن السلسلة المشفرة تكون دائمًا أكبر بحوالي 33% من الصورة الأصلية.
تحلل هذه الأداة كلاً من data URIs الكاملة (data:image/png;base64,...) وسلاسل Base64 الخام بدون بادئة data:. بالنسبة للسلاسل الخام، يتم الكشف عن تنسيق الصورة تلقائيًا عن طريق فحص أول عدد قليل من أحرف Base64، التي تتوافق مع بايتات magic الخاصة بالملف — على سبيل المثال، يشير iVBORw0KGgo دائمًا إلى ملف PNG. يتم تقديم الصورة المفك تشفيرها مباشرة في المتصفح ويمكن تنزيلها كملف.
السيناريو الشائع هو العمل مع REST API يُرجع صورة ملف شخصي أو صورة مصغرة للمستند كسلسلة Base64 داخل حقل JSON — على سبيل المثال، {"avatar": "data:image/png;base64,iVBORw0KGgo..."}. لاستخدام الصورة، تقوم باستخراج قيمة الحقل وإزالة بادئة data URI حتى الفاصلة بما في ذلك الفاصلة، ثم توجيه الأحرف المتبقية من Base64 عبر فاك تشفير مثل atob() في JavaScript أو base64.b64decode() في Python لاستعادة البايتات الخام. لصق القيمة الكاملة في هذه الأداة يتجاوز جميع هذه الخطوات اليدوية ويقدم الصورة فورًا.
لماذا استخدام فاك تشفير الصور Base64 هذا؟
تحول هذه الأداة بيانات الصور Base64 بالكامل في متصفحك إلى صورة قابلة للعرض والتنزيل — بدون تحميل، بدون معالجة الخادم، بدون حساب مطلوب.
حالات الاستخدام لفك تشفير الصور Base64
هيكل data URI للصور
يجمع data URI نوع الصورة والمحتوى المشفر في سلسلة واحدة. كل مكون ضروري للفك تشفير الصحيح: يشير المخطط (data:) إلى أن عنوان URL مستقل بذاته بدلاً من أن يكون مرجعًا لمورد خارجي؛ يخبر نوع MIME (على سبيل المثال ، image/png) محرك التقديم بأي تنسيق يجب استخدامه عند تفسير البايتات الخام؛ يميز علامة ;base64، المحتوى المشفر بـ Base64 عن data URIs التي تستخدم ترميز النسبة المئوية لتنسيقات النص العادي. قد ينتهي حمل Base64 نفسه برمز أو رمزي ملء = — هذه مطلوبة عندما لا يكون عدد البايتات المدخلة من مضاعفات ثلاثة، مما يضمن أن الطول المشفر يكون دائمًا من مضاعفات أربعة. يؤدي حذف أو قطع أي من هذه المكونات إلى فشل فك التشفير أو إنتاج صورة تالفة.
| المكون | الوصف |
|---|---|
| data: | URI scheme identifier |
| image/png | MIME type declaring the image format |
| ;base64, | Encoding declaration (always base64 for binary) |
| iVBORw0KGgo... | Base64-encoded pixel data |
الكشف عن تنسيق الصورة من Base64
عندما تفتقد سلسلة Base64 بادئة data:، يمكن تحديد تنسيق الصورة بفحص الأحرف الأولى. تتوافق هذه الأحرف مع بايتات magic الخاصة بالملف — تسلسلات بايت ثابتة في بداية كل ملف صورة تحدد التنسيق:
| التنسيق | بادئة Base64 | توقيع سادس عشر | نوع MIME |
|---|---|---|---|
| PNG | iVBORw0KGgo | 89 50 4E 47 | image/png |
| JPEG | /9j/ | FF D8 FF | image/jpeg |
| GIF | R0lGOD | 47 49 46 38 | image/gif |
| WebP | UklGR | 52 49 46 46 | image/webp |
| SVG | PHN2Zy | 3C 73 76 67 (text) | image/svg+xml |
| BMP | Qk | 42 4D | image/bmp |
| ICO | AAABAA | 00 00 01 00 | image/x-icon |
أمثلة الكود
كيفية فك تشفير سلاسل الصور Base64 بالكامل إلى ملفات الصور في اللغات والبيئات الشهيرة:
// Decode a Base64 data URI to a Blob and create a download link
const dataUri = 'data:image/png;base64,iVBORw0KGgo...'
// Method 1: fetch API (simplest)
const res = await fetch(dataUri)
const blob = await res.blob()
// blob.type → "image/png", blob.size → 2048
// Method 2: manual decode for older environments
const [header, b64] = dataUri.split(',')
const mime = header.match(/:(.*?);/)[1] // → "image/png"
const binary = atob(b64)
const bytes = Uint8Array.from(binary, c => c.charCodeAt(0))
const blob2 = new Blob([bytes], { type: mime })
// Create a download link
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'decoded.png'
a.click()
URL.revokeObjectURL(url)import base64
import re
data_uri = 'data:image/png;base64,iVBORw0KGgo...'
# Parse the data URI
match = re.match(r'data:(image/[\w+.-]+);base64,(.+)', data_uri)
mime_type = match.group(1) # → "image/png"
b64_data = match.group(2)
# Decode and write to file
image_bytes = base64.b64decode(b64_data)
ext = mime_type.split('/')[1].replace('jpeg', 'jpg').replace('svg+xml', 'svg')
with open(f'output.{ext}', 'wb') as f:
f.write(image_bytes)
# → writes output.png (byte-for-byte identical to the original)
# Decode raw Base64 (no data: prefix)
raw_b64 = 'iVBORw0KGgo...'
image_bytes = base64.b64decode(raw_b64)import { writeFileSync } from 'fs'
const dataUri = 'data:image/png;base64,iVBORw0KGgo...'
// Extract MIME type and Base64 payload
const [meta, b64] = dataUri.split(',')
const mime = meta.match(/:(.*?);/)[1] // → "image/png"
// Decode to Buffer and save
const buffer = Buffer.from(b64, 'base64')
writeFileSync('output.png', buffer)
// → output.png (identical to the original file)
// Validate by checking magic bytes
console.log(buffer.subarray(0, 4))
// PNG → <Buffer 89 50 4e 47> (\x89PNG)
// JPEG → <Buffer ff d8 ff e0># Decode a raw Base64 string to an image file (Linux) echo 'iVBORw0KGgo...' | base64 -d > output.png # Decode a raw Base64 string to an image file (macOS) echo 'iVBORw0KGgo...' | base64 -D > output.png # Extract Base64 from a data URI and decode echo 'data:image/png;base64,iVBORw0KGgo...' | \ sed 's/^data:.*base64,//' | base64 -d > output.png # Identify the image format from the decoded file file output.png # → output.png: PNG image data, 64 x 64, 8-bit/color RGBA