محول الصور إلى Base64 والعكس Base64 converter

محول الصور و Base64

صورة إلى Base64

Base64 إلى صورة

اسحب وأفلت الصورة هنا أو انقر للاختيار

الصيغ المدعومة: PNG, JPG, GIF, WEBP, SVG

معاينة الصورة المدخلة:

تضمين بادئة البيانات (data:image/...;base64,)

نص Base64 الناتج:

أدخل نص Base64 هنا:

معاينة الصورة الناتجة:

تحميل الصورة

اختر وضع التحويل وقم برفع صورة أو لصق نص Base64.

محول الصور و Base64: شرح وأهمية

ما هو ترميز Base64 للصور؟

Base64 هو نظام ترميز يسمح بتحويل البيانات الثنائية (مثل بيانات ملف الصورة) إلى تمثيل نصي يتكون فقط من الأحرف اللاتينية الكبيرة والصغيرة والأرقام وعلامتي "+" و "/". عند تطبيقه على الصور، يتم تحويل بيانات البكسل الثنائية للصورة إلى سلسلة نصية طويلة.

عادةً ما تبدأ سلسلة Base64 الخاصة بالصورة ببادئة تسمى "Data URI scheme"، مثل data:image/png;base64, أو data:image/jpeg;base64,، والتي تخبر المتصفح بنوع الصورة وكيفية تفسير البيانات التالية.

لماذا تحتاج إلى تحويل الصور إلى Base64 أو العكس؟

• تضمين الصور مباشرة في الكود (Image to Base64): يمكنك تضمين الصورة مباشرة داخل كود HTML أو CSS باستخدام سلسلة Base64 (Data URI). هذا يلغي الحاجة إلى طلب HTTP منفصل لتحميل الصورة، مما قد يسرع تحميل الصفحات التي تحتوي على عدد قليل من الصور الصغيرة (مثل الأيقونات).
• نقل الصور كنص (Image to Base64): في بعض الحالات، قد تحتاج إلى نقل بيانات صورة عبر نظام لا يقبل سوى النصوص (مثل بعض حقول JSON أو قواعد البيانات).
• عرض صورة من نص Base64 (Base64 to Image): إذا كان لديك سلسلة Base64 تمثل صورة (ربما حصلت عليها من واجهة برمجة تطبيقات API أو مصدر آخر)، يمكنك استخدام هذه الأداة لعرض الصورة الفعلية ومعاينتها.
• تنزيل صورة من Base64 (Base64 to Image): بعد عرض الصورة من سلسلة Base64، يمكنك تنزيلها كملف صورة عادي (مثل PNG) إلى جهازك.

كيف تعمل هذه الأداة؟

1. تحويل صورة إلى Base64:

1. اختيار الصورة: عند رفع ملف صورة، تقرأ الأداة محتواه الثنائي باستخدام `FileReader`.
2. توليد Data URI: يقوم `FileReader.readAsDataURL()` بتحويل البيانات الثنائية إلى سلسلة Base64 مع البادئة المناسبة (مثل `data:image/png;base64,...`).
3. عرض النص: يتم عرض سلسلة Base64 الناتجة في منطقة الإخراج النصية. يمكنك اختيار تضمين البادئة أو إزالتها.

2. تحويل Base64 إلى صورة:

1. إدخال النص: تقوم بلصق سلسلة Base64 (مع البادئة `data:image...`) في حقل الإدخال.
2. العرض المباشر: يقوم المتصفح تلقائيا بتفسير سلسلة Base64 (إذا كانت صالحة وتحتوي على البادئة) وعرض الصورة المقابلة في منطقة المعاينة (`` tag).
3. التنزيل (اختياري): إذا أردت تنزيل الصورة المعروضة، يقوم زر التنزيل برسم الصورة على عنصر `` مخفي ثم يحول محتوى الـ canvas إلى ملف PNG قابل للتنزيل.

كيفية استخدام الأداة

1. اختر وضع التحويل: حدد "صورة إلى Base64" أو "Base64 إلى صورة" باستخدام أزرار الراديو في الأعلى.
2. إذا اخترت "صورة إلى Base64":
   • ارفع ملف صورة باستخدام منطقة الرفع.
   • ستظهر معاينة للصورة.
   • سيظهر نص Base64 تلقائيا في مربع الإخراج.
   • استخدم مربع الاختيار لتحديد ما إذا كنت تريد تضمين البادئة (`data:image...`) أم لا.
   • اضغط على زر "نسخ الناتج" لنسخ نص Base64.
3. إذا اخترت "Base64 إلى صورة":
   • الصق نص Base64 الكامل (مع البادئة) في حقل الإدخال.
   • ستظهر الصورة تلقائيا في منطقة المعاينة إذا كان النص صالحا.
   • اضغط على زر "نسخ الناتج" لنسخ نص Base64 المدخل (إذا أردت).
   • اضغط على زر "تحميل الصورة" لتنزيل الصورة المعروضة كملف PNG.
4. المسح: استخدم زر "مسح الكل" لإعادة تعيين الأداة بالكامل.