رمزگشای تصویر 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 پشتیبانی می‌کند و می‌تواند هم فرمت URL داده (با پیشوند data:image/...) و هم رشته‌های خام Base64 را مدیریت کند.
جزئیات فنی
فرمت رمزگذاری Base64
رمزگذاری Base64 داده‌های باینری را به مجموعه‌ای از 64 کاراکتر ASCII (A-Z، a-z، 0-9، + و /) تبدیل می‌کند و از = برای پر کردن استفاده می‌کند. برای تصاویر در وب، داده‌های Base64 معمولاً به صورت URL داده‌ای با ساختار زیر فرمت می‌شوند:
1data:[<media type>][;base64],<data>
2به عنوان مثال، یک تصویر PNG رمزگذاری شده با Base64 ممکن است به شکل زیر باشد:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2اجزای این فرمت عبارتند از:
data:- طرح URLimage/png- نوع MIME داده;base64- روش رمزگذاری,- یک جداکننده بین هدر و داده- داده‌های واقعی رمزگذاری شده با Base64
فرآیند رمزگشایی
هنگام رمزگشایی یک رشته تصویر Base64، مراحل زیر انجام می‌شود:
- رشته تجزیه می‌شود تا شناسایی کند که آیا شامل پیشوند URL داده‌ای است یا خیر
- اگر پیشوند وجود داشته باشد، نوع MIME برای تعیین فرمت تصویر استخراج می‌شود
- بخش داده‌های Base64 جدا شده و به داده‌های باینری رمزگشایی می‌شود
- داده‌های باینری به یک Blob یا URL شیء تبدیل می‌شود که می‌تواند به عنوان یک تصویر نمایش داده شود
اگر ورودی شامل پیشوند URL داده‌ای نباشد، رمزگشا سعی می‌کند آن را به عنوان داده خام 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 بدون نیاز به نقاط انتهایی تصویر جداگانه.
-
URIهای داده‌ای در CSS: گنجاندن آیکون‌ها و تصاویر پس‌زمینه کوچک به طور مستقیم در فایل‌های CSS.
-
دستکاری‌های Canvas: تسهیل ذخیره و انتقال داده‌های تصویر Canvas.
-
برنامه‌های آفلاین: ذخیره تصاویر به عنوان رشته‌های متنی در localStorage یا IndexedDB.
ملاحظات عملکرد
در حالی که رمزگذاری Base64 راحتی را ارائه می‌دهد، با معایبی همراه است:
- افزایش اندازه فایل: رمزگذاری Base64 اندازه داده را به طور تقریبی 33٪ افزایش می‌دهد.
- عدم کشینگ مرورگر: تصاویر گنجانده شده نمی‌توانند به صورت جداگانه مانند فایل‌های تصویر خارجی کش شوند.
- بارگذاری اضافی: مرورگرها باید رشته Base64 را قبل از رندر کردن رمزگشایی کنند.
- چالش‌های نگهداری: تصاویر گنجانده شده به‌روزرسانی آن‌ها دشوارتر از فایل‌های مرجع شده هستند.
برای بهینه‌سازی عملکرد، معمولاً توصیه می‌شود که رمزگذاری Base64 فقط برای تصاویر کوچک (زیر 10 کیلوبایت) استفاده شود. تصاویر بزرگ‌تر معمولاً بهتر است به عنوان فایل‌های جداگانه ارائه شوند که می‌توانند به درستی کش و بهینه‌سازی شوند.
جایگزین‌ها
چندین جایگزین برای رمزگذاری Base64 برای موارد استفاده مختلف وجود دارد:
-
گنجاندن SVG به صورت درون‌خط: برای گرافیک‌های وکتور، گنجاندن SVG به طور مستقیم معمولاً عملکرد و انعطاف‌پذیری بهتری نسبت به Base64-encoded SVG ارائه می‌دهد.
-
WebP و فرمت‌های مدرن تصویر: این‌ها فشرده‌سازی بهتری نسبت به JPEG/PNG رمزگذاری شده با Base64 ارائه می‌دهند.
-
اسپرایت‌های تصویر: ترکیب چندین تصویر کوچک به یک فایل واحد و استفاده از موقعیت‌دهی CSS.
-
CDNها (شبکه‌های تحویل محتوا): برای سایت‌های تولیدی، ارائه تصاویر بهینه‌شده از یک 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 // به عنوان URL داده (رشته Base64)
11 return canvas.toDataURL('image/png');
12}
13
14// نمایش یک تصویر Base64
15function displayBase64Image(base64String) {
16 const img = new Image();
17
18 // مدیریت رشته‌هایی بدون پیشوند URL داده‌ای
19 if (!base64String.startsWith('data:')) {
20 base64String = `data:image/png;base64,${base64String}`;
21 }
22
23 img.src = base64String;
24 document.body.appendChild(img);
25}
261import 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 # حذف پیشوند URL داده‌ای در صورت وجود
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")
261<?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?>
261import 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 // حذف پیشوند URL داده‌ای در صورت وجود
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}
401using 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 // حذف پیشوند URL داده‌ای در صورت وجود
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}
381require '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 # حذف پیشوند URL داده‌ای در صورت وجود
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')
271' تابع 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 ریشه‌های خود را در توسعه سیستم‌های پست الکترونیکی در دهه 1970 دارد. این روش برای حل مشکل انتقال داده‌های باینری از طریق سیستم‌هایی که فقط برای مدیریت متن ASCII طراحی شده بودند، ایجاد شد.
این طرح رمزگذاری در سال 1987 با انتشار RFC 989، که استاندارد Privacy Enhanced Mail (PEM) را تعریف کرد، رسمی شد. این بعداً در RFC 1421 و سایر استانداردهای مرتبط به‌روزرسانی شد. اصطلاح "Base64" خود از این ناشی می‌شود که رمزگذاری از 64 کاراکتر ASCII مختلف برای نمایش داده‌های باینری استفاده می‌کند.
در زمینه توسعه وب، استفاده از تصاویر رمزگذاری شده با Base64 با ظهور URLهای داده‌ای، که برای اولین بار در RFC 2397 در سال 1998 پیشنهاد شد، محبوبیت بیشتری پیدا کرد. این امکان را فراهم می‌کرد که داده‌های باینری به طور مستقیم در HTML، CSS و سایر اسناد وب گنجانده شوند.
استفاده از تصاویر رمزگذاری شده با Base64 در توسعه وب در اواسط دهه 2000 به طور گسترده‌ای رواج یافت زیرا توسعه‌دهندگان به دنبال راه‌هایی برای کاهش درخواست‌های HTTP و بهبود زمان بارگذاری صفحه بودند. این تکنیک به ویژه در زمان افزایش توسعه وب موبایل، که در آن کاهش درخواست‌ها برای عملکرد در اتصالات موبایل کندتر حیاتی بود، مورد استقبال قرار گرفت.
امروز، رمزگذاری Base64 همچنان یک ابزار مهم در توسعه وب است، اگرچه استفاده از آن به طور هدفمندتر شده است زیرا بهترین شیوه‌ها تکامل یافته‌اند. رویکردهای مدرن معمولاً از رمزگذاری Base64 به‌طور انتخابی برای تصاویر کوچک و حیاتی استفاده می‌کنند در حالی که از روش‌های تحویل کارآمدتر مانند HTTP/2 برای دارایی‌های بزرگ‌تر استفاده می‌کنند.
منابع
بازخورد
برای شروع دادن بازخورد درباره این ابزار، روی نوار بازخورد کلیک کنید
ابزارهای مرتبط
ابزارهای بیشتری را کشف کنید که ممکن است برای جریان کار شما مفید باشند