مُفَكِّك صور Base64 وعارض | تحويل Base64 إلى صور
فك تشفير ومعاينة سلاسل الصور المشفرة بتنسيق Base64 على الفور. يدعم JPEG و PNG و GIF وغيرها من التنسيقات الشائعة مع معالجة الأخطاء للإدخالات غير الصالحة.
مُفَكِّك وصَفْحة عَرض صُور بِيَسْتَخْدِم Base64
ألصِق سلسلة صورة مشفَّرة بـ Base64 هنا لعرض الصورة.
معاينة الصورة
لا توجد صورة لعرضها. ألصِق سلسلة Base64 لرؤيتها مفككة تلقائيًا.
يدعم JPEG و PNG و GIF وغيرها من تنسيقات الصور الشائعة.
تعليمات
1. ألصِق سلسلة صورة مشفَّرة بـ Base64 في المنطقة النصية أعلاه.
2. سيتم فك تشفير الصورة تلقائيًا أثناء الكتابة، أو انقر على زر 'فك تشفير الصورة'.
3. ستظهر الصورة المفككة في منطقة المعاينة أدناه.
ملاحظة: يجب أن تبدأ السلسلة بـ 'data:image/' للحصول على أفضل النتائج، ولكن الأداة ستحاول فك تشفير السلاسل بدون هذا البادئة أيضًا.
الوثائق
مفكك تشفير وعارض صور Base64
مقدمة
Base64 هو نظام ترميز ثنائي إلى نص يمثل البيانات الثنائية في تنسيق سلسلة ASCII. يُستخدم عادةً لتضمين بيانات الصور مباشرةً داخل HTML وCSS وJavaScript وJSON وغيرها من التنسيقات النصية حيث لا يمكن تضمين البيانات الثنائية بشكل مباشر. تتيح لك هذه الأداة فك تشفير سلاسل الصور المشفرة بـ Base64 وعرض الصور الناتجة مباشرةً في متصفحك.
يزيد ترميز Base64 من حجم البيانات بحوالي 33% مقارنةً بالثنائي الأصلي، ولكنه يمكّن من تضمين الصور مباشرةً في الوثائق النصية دون الحاجة إلى تنزيل ملفات منفصلة. يمكن أن يكون هذا مفيدًا بشكل خاص للصور الصغيرة مثل الأيقونات والشعارات أو الرسومات البسيطة حيث تفوق سهولة التضمين زيادة الحجم.
تقدم أداة مفكك تشفير صور Base64 واجهة بسيطة حيث يمكنك لصق سلسلة صورة مشفرة بـ Base64 ورؤية الصورة المفككة على الفور. تدعم جميع تنسيقات الصور الشائعة بما في ذلك JPEG وPNG وGIF وWebP وSVG، ويمكنها التعامل مع كل من تنسيق عنوان البيانات (مع بادئة data:image/...
) وسلاسل Base64 الخام.
التفاصيل الفنية
تنسيق ترميز Base64
يقوم ترميز Base64 بتحويل البيانات الثنائية إلى مجموعة من 64 حرف ASCII (A-Z وa-z و0-9 و+ و/)، مع استخدام = للتعبئة. بالنسبة للصور على الويب، يتم عادةً تنسيق بيانات Base64 كعنوان بيانات بالهيكل التالي:
1data:[<media type>][;base64],<data>
2
على سبيل المثال، قد تبدو صورة PNG مشفرة بـ Base64 كما يلي:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2
تتكون مكونات هذا التنسيق من:
data:
- نظام عنوان URLimage/png
- نوع MIME للبيانات;base64
- طريقة الترميز,
- فاصل بين الرأس والبيانات- البيانات المشفرة بـ Base64 الفعلية
عملية فك التشفير
عند فك تشفير سلسلة صورة مشفرة بـ Base64، تحدث الخطوات التالية:
- يتم تحليل السلسلة لتحديد ما إذا كانت تحتوي على بادئة عنوان بيانات
- إذا كانت هناك بادئة، يتم استخراج نوع MIME لتحديد تنسيق الصورة
- يتم عزل جزء بيانات Base64 وفك تشفيره إلى بيانات ثنائية
- يتم تحويل البيانات الثنائية إلى Blob أو عنوان كائن يمكن عرضه كصورة
إذا لم يتضمن الإدخال بادئة عنوان بيانات، فإن المفكك يحاول معالجته كسلسلة Base64 خام ويستنتج نوع الصورة من رأس البيانات الثنائية المفككة أو الافتراضية إلى PNG.
تنسيقات الصور المدعومة
تدعم هذه الأداة جميع تنسيقات الصور الشائعة على الويب:
التنسيق | نوع MIME | حالات الاستخدام الشائعة |
---|---|---|
JPEG | image/jpeg | الصور، الصور المعقدة ذات الألوان المتعددة |
PNG | image/png | الصور التي تتطلب الشفافية، لقطات الشاشة، الرسوميات |
GIF | image/gif | الرسوم المتحركة البسيطة، الصور ذات الألوان المحدودة |
WebP | image/webp | تنسيق حديث مع ضغط أفضل من JPEG/PNG |
SVG | image/svg+xml | الرسوميات المتجهة، الأيقونات والرسوم التوضيحية القابلة للتغيير |
حالات الاستخدام
لدى الصور المشفرة بـ Base64 العديد من التطبيقات العملية في تطوير الويب وما بعده:
-
تضمين الصور في HTML/CSS/JS: يقلل من طلبات HTTP من خلال تضمين الصور مباشرةً في الكود الخاص بك، مما يمكن أن يحسن أوقات تحميل الصفحة للصور الصغيرة.
-
قوالب البريد الإلكتروني: يضمن عرض الصور بشكل صحيح في عملاء البريد الإلكتروني الذين يقومون بحظر الصور الخارجية بشكل افتراضي.
-
التطبيقات ذات الملف الواحد: ينشئ تطبيقات HTML ذات محتوى ذاتي حيث يتم تضمين جميع الموارد ضمن ملف واحد.
-
استجابات API: يتضمن بيانات الصورة مباشرةً في استجابات JSON دون الحاجة إلى نقاط نهاية صور منفصلة.
-
عناوين البيانات في CSS: يدمج الأيقونات الصغيرة وصور الخلفية مباشرةً في ملفات CSS.
-
تلاعبات Canvas: يسهل حفظ ونقل بيانات صورة Canvas.
-
التطبيقات غير المتصلة بالإنترنت: يخزن الصور كسلاسل نصية في localStorage أو IndexedDB.
اعتبارات الأداء
بينما يوفر ترميز Base64 سهولة الاستخدام، إلا أنه يأتي مع بعض العيوب:
- زيادة حجم الملف: يزيد ترميز Base64 من حجم البيانات بحوالي 33%.
- عدم تخزين المتصفح: لا يمكن تخزين الصور المدمجة بشكل منفصل مثل ملفات الصور الخارجية.
- عبء تحليل: يجب على المتصفحات فك تشفير سلسلة Base64 قبل العرض.
- تحديات الصيانة: من الصعب تحديث الصور المدمجة مقارنةً بالملفات المرجعية.
لتحقيق أداء أمثل، يُوصى عادةً باستخدام ترميز Base64 فقط للصور الصغيرة (أقل من 10KB). عادةً ما تكون الصور الأكبر أفضل خدمة كملفات منفصلة يمكن تخزينها وتحسينها بشكل صحيح.
البدائل
توجد عدة بدائل لترميز Base64 لمختلف حالات الاستخدام:
-
تضمين SVG داخل النص: بالنسبة للرسوميات المتجهة، غالبًا ما يوفر SVG المضمن أداءً ومرونة أفضل من SVG المشفر بـ Base64.
-
WebP والتنسيقات الحديثة: توفر ضغطًا أفضل من JPEG/PNG المشفر بـ Base64.
-
صور الرمز: تجمع بين عدة صور صغيرة في ملف واحد وتستخدم موضع CSS.
-
CDNs (شبكات توصيل المحتوى): بالنسبة لمواقع الإنتاج، يعد تقديم الصور المحسنة من CDN أكثر كفاءة.
-
ضغط البيانات: لنقل كميات كبيرة من البيانات الثنائية، تعتبر خوارزميات الضغط المتخصصة مثل gzip أو Brotli أكثر كفاءة من Base64.
أمثلة على الشيفرات
إليك أمثلة على العمل مع الصور المشفرة بـ Base64 في لغات برمجة مختلفة:
1// تحويل صورة إلى Base64 في JavaScript (المتصفح)
2function imageToBase64(imgElement) {
3 const canvas = document.createElement('canvas');
4 canvas.width = imgElement.width;
5 canvas.height = imgElement.height;
6
7 const ctx = canvas.getContext('2d');
8 ctx.drawImage(imgElement, 0, 0);
9
10 // الحصول على عنوان البيانات (سلسلة Base64)
11 return canvas.toDataURL('image/png');
12}
13
14// عرض صورة Base64
15function displayBase64Image(base64String) {
16 const img = new Image();
17
18 // التعامل مع السلاسل بدون بادئة عنوان البيانات
19 if (!base64String.startsWith('data:')) {
20 base64String = `data:image/png;base64,${base64String}`;
21 }
22
23 img.src = base64String;
24 document.body.appendChild(img);
25}
26
1import base64
2from PIL import Image
3from io import BytesIO
4
5# تحويل ملف صورة إلى Base64
6def image_to_base64(image_path):
7 with open(image_path, "rb") as image_file:
8 encoded_string = base64.b64encode(image_file.read())
9 return encoded_string.decode('utf-8')
10
11# تحويل Base64 إلى صورة وحفظها
12def base64_to_image(base64_string, output_path):
13 # إزالة بادئة عنوان البيانات إذا كانت موجودة
14 if ',' in base64_string:
15 base64_string = base64_string.split(',')[1]
16
17 image_data = base64.b64decode(base64_string)
18 image = Image.open(BytesIO(image_data))
19 image.save(output_path)
20
21# مثال على الاستخدام
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # طباعة بداية السلسلة
24
25base64_to_image(base64_str, "output.jpg")
26
1<?php
2// تحويل ملف صورة إلى Base64 في PHP
3function imageToBase64($path) {
4 $type = pathinfo($path, PATHINFO_EXTENSION);
5 $data = file_get_contents($path);
6 return 'data:image/' . $type . ';base64,' . base64_encode($data);
7}
8
9// تحويل Base64 إلى صورة وحفظها
10function base64ToImage($base64String, $outputPath) {
11 // استخراج البيانات الثنائية المشفرة بـ Base64
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // فك التشفير والحفظ
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// مثال على الاستخدام
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // طباعة بداية السلسلة
23
24base64ToImage($base64Image, 'output.jpg');
25?>
26
1import java.io.File;
2import java.io.FileOutputStream;
3import java.io.IOException;
4import java.nio.file.Files;
5import java.util.Base64;
6
7public class Base64ImageUtil {
8
9 // تحويل ملف صورة إلى Base64
10 public static String imageToBase64(String imagePath) throws IOException {
11 File file = new File(imagePath);
12 byte[] fileContent = Files.readAllBytes(file.toPath());
13 String extension = imagePath.substring(imagePath.lastIndexOf(".") + 1);
14 String base64String = Base64.getEncoder().encodeToString(fileContent);
15
16 return "data:image/" + extension + ";base64," + base64String;
17 }
18
19 // تحويل Base64 إلى صورة وحفظها
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // إزالة بادئة عنوان البيانات إذا كانت موجودة
22 if (base64String.contains(",")) {
23 base64String = base64String.split(",")[1];
24 }
25
26 byte[] decodedBytes = Base64.getDecoder().decode(base64String);
27
28 try (FileOutputStream fos = new FileOutputStream(outputPath)) {
29 fos.write(decodedBytes);
30 }
31 }
32
33 public static void main(String[] args) throws IOException {
34 String base64Image = imageToBase64("input.jpg");
35 System.out.println(base64Image.substring(0, 50) + "..."); // طباعة بداية السلسلة
36
37 base64ToImage(base64Image, "output.jpg");
38 }
39}
40
1using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7 // تحويل ملف صورة إلى Base64
8 public static string ImageToBase64(string imagePath)
9 {
10 byte[] imageBytes = File.ReadAllBytes(imagePath);
11 string base64String = Convert.ToBase64String(imageBytes);
12
13 string extension = Path.GetExtension(imagePath).TrimStart('.').ToLower();
14 return $"data:image/{extension};base64,{base64String}";
15 }
16
17 // تحويل Base64 إلى صورة وحفظها
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // إزالة بادئة عنوان البيانات إذا كانت موجودة
21 if (base64String.Contains(","))
22 {
23 base64String = base64String.Split(',')[1];
24 }
25
26 byte[] imageBytes = Convert.FromBase64String(base64String);
27 File.WriteAllBytes(outputPath, imageBytes);
28 }
29
30 static void Main()
31 {
32 string base64Image = ImageToBase64("input.jpg");
33 Console.WriteLine(base64Image.Substring(0, 50) + "..."); // طباعة بداية السلسلة
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
38
1require 'base64'
2
3# تحويل ملف صورة إلى Base64
4def image_to_base64(image_path)
5 extension = File.extname(image_path).delete('.')
6 base64_data = Base64.strict_encode64(File.read(image_path))
7 "data:image/#{extension};base64,#{base64_data}"
8end
9
10# تحويل Base64 إلى صورة وحفظها
11def base64_to_image(base64_string, output_path)
12 # إزالة بادئة عنوان البيانات إذا كانت موجودة
13 if base64_string.include?(',')
14 base64_string = base64_string.split(',')[1]
15 end
16
17 File.open(output_path, 'wb') do |file|
18 file.write(Base64.decode64(base64_string))
19 end
20end
21
22# مثال على الاستخدام
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # طباعة بداية السلسلة
25
26base64_to_image(base64_image, 'output.jpg')
27
1' دالة Excel VBA لترميز ملف إلى Base64
2Function FileToBase64(filePath As String) As String
3 Dim fileNum As Integer
4 Dim fileData() As Byte
5 Dim objXML As Object
6 Dim objNode As Object
7
8 fileNum = FreeFile
9 Open filePath For Binary Access Read As fileNum
10 ReDim fileData(LOF(fileNum) - 1)
11 Get fileNum, , fileData
12 Close fileNum
13
14 Set objXML = CreateObject("MSXML2.DOMDocument")
15 Set objNode = objXML.createElement("b64")
16
17 objNode.DataType = "bin.base64"
18 objNode.nodeTypedValue = fileData
19
20 FileToBase64 = objNode.Text
21
22 Set objNode = Nothing
23 Set objXML = Nothing
24End Function
25
26' الاستخدام في Excel:
27' =FileToBase64("C:\path\to\image.jpg")
28
تنفيذ HTML
إليك كيفية تضمين صورة مشفرة بـ Base64 مباشرةً في HTML:
1<!-- تضمين صورة مشفرة بـ Base64 مباشرةً في HTML -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="صورة مشفرة بـ Base64">
3
4<!-- استخدام CSS مع صورة خلفية مشفرة بـ Base64 -->
5<style>
6.base64-bg {
7 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8 width: 100px;
9 height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13
التاريخ
ترميز Base64 له جذوره في تطوير أنظمة البريد الإلكتروني في السبعينيات. تم تصميمه لحل مشكلة نقل البيانات الثنائية من خلال أنظمة مصممة للتعامل فقط مع نص ASCII.
تم توثيق نظام الترميز رسميًا في عام 1987 مع نشر RFC 989، الذي حدد معيار البريد الإلكتروني المحسن للخصوصية (PEM). تم تحديث هذا لاحقًا في RFC 1421 ومعايير أخرى ذات صلة. يأتي مصطلح "Base64" نفسه من حقيقة أن الترميز يستخدم 64 حرف ASCII مختلف لتمثيل البيانات الثنائية.
في سياق تطوير الويب، اكتسبت الصور المشفرة بـ Base64 شعبية مع ظهور عناوين البيانات، التي تم اقتراحها لأول مرة في RFC 2397 في عام 1998. سمح هذا بتضمين البيانات الثنائية مباشرةً في HTML وCSS وغيرها من الوثائق على الويب.
أصبح استخدام الصور المشفرة بـ Base64 في تطوير الويب أكثر انتشارًا في منتصف العقد الأول من القرن الحادي والعشرين حيث سعى المطورون إلى طرق لتقليل طلبات HTTP وتحسين أوقات تحميل الصفحة. تم تبني التقنية بشكل خاص خلال ارتفاع تطوير الويب المحمول، حيث كان تقليل الطلبات أمرًا حاسمًا للأداء على الاتصالات المحمولة الأبطأ.
اليوم، لا يزال ترميز Base64 أداة مهمة في تطوير الويب، على الرغم من أن استخدامه أصبح أكثر استهدافًا مع تطور الممارسات الأفضل. تميل الأساليب الحديثة إلى استخدام ترميز Base64 بشكل انتقائي للصور الصغيرة والحاسمة بينما تستفيد من طرق تسليم أكثر كفاءة مثل HTTP/2 للأصول الأكبر.
المراجع
الملاحظات
انقر على إشعار الملاحظات لبدء إعطاء ملاحظات حول هذه الأداة
أدوات ذات صلة
اكتشف المزيد من الأدوات التي قد تكون مفيدة لعملك