ตัวแปลงและดูภาพจาก 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 จะแปลงข้อมูลไบนารีเป็นชุดของอักขระ ASCII 64 ตัว (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 โดยไม่ต้องการจุดสิ้นสุดรูปภาพแยกต่างหาก
-
Data URIs ใน CSS: ฝังไอคอนและรูปภาพพื้นหลังขนาดเล็กโดยตรงในไฟล์ CSS
-
การจัดการ Canvas: ช่วยในการบันทึกและถ่ายโอนข้อมูลรูปภาพจาก canvas
-
แอปพลิเคชันออฟไลน์: เก็บรูปภาพเป็นสตริงข้อความใน localStorage หรือ IndexedDB
การพิจารณาด้านประสิทธิภาพ
แม้ว่าการเข้ารหัส base64 จะเสนอความสะดวก แต่ก็มีข้อแลกเปลี่ยน:
- ขนาดไฟล์ที่เพิ่มขึ้น: การเข้ารหัส base64 จะเพิ่มขนาดข้อมูลประมาณ 33%
- ไม่มีการแคชของเบราว์เซอร์: รูปภาพที่ฝังไม่สามารถแคชแยกต่างหากได้เหมือนไฟล์รูปภาพภายนอก
- ค่าใช้จ่ายในการวิเคราะห์: เบราว์เซอร์ต้องถอดรหัสสตริง base64 ก่อนที่จะเรนเดอร์
- ความท้าทายในการบำรุงรักษา: รูปภาพที่ฝังยากที่จะอัปเดตมากกว่าที่อ้างอิงจากไฟล์
เพื่อประสิทธิภาพที่ดีที่สุด การเข้ารหัส base64 มักแนะนำเฉพาะสำหรับรูปภาพขนาดเล็ก (ต่ำกว่า 10KB) รูปภาพขนาดใหญ่จะดีกว่าที่จะให้บริการเป็นไฟล์แยกต่างหากที่สามารถแคชและปรับให้เหมาะสมได้อย่างเหมาะสม
ทางเลือก
มีทางเลือกหลายประการสำหรับการเข้ารหัส base64 สำหรับกรณีการใช้งานที่แตกต่างกัน:
-
การฝัง SVG แบบในบรรทัด: สำหรับกราฟิกเวกเตอร์, SVG แบบในบรรทัดมักให้ประสิทธิภาพและความยืดหยุ่นที่ดีกว่าการเข้ารหัส base64 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}
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 # ลบคำนำหน้า 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")
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 // ลบคำนำหน้า 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}
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 // ลบคำนำหน้า 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}
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 # ลบคำนำหน้า 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')
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 มีรากฐานมาจากการพัฒนาระบบอีเมลอิเล็กทรอนิกส์ในปี 1970 มันถูกออกแบบมาเพื่อแก้ปัญหาการส่งข้อมูลไบนารีผ่านระบบที่ออกแบบมาเพื่อจัดการเฉพาะข้อความ ASCII
โครงการเข้ารหัสถูกกำหนดให้เป็นทางการในปี 1987 ด้วยการเผยแพร่ RFC 989 ซึ่งกำหนดมาตรฐาน Privacy Enhanced Mail (PEM) ซึ่งต่อมาได้รับการปรับปรุงใน RFC 1421 และมาตรฐานที่เกี่ยวข้องอื่น ๆ คำว่า "base64" เองมาจากความจริงที่ว่าโครงการเข้ารหัสใช้ตัวอักษร ASCII 64 ตัวเพื่อแสดงข้อมูลไบนารี
ในบริบทของการพัฒนาเว็บ การเข้ารหัส base64 สำหรับรูปภาพได้รับความนิยมมากขึ้นเมื่อการเกิดขึ้นของ URL ข้อมูลซึ่งถูกเสนอครั้งแรกใน RFC 2397 ในปี 1998 ซึ่งอนุญาตให้ข้อมูลไบนารีถูกฝังโดยตรงใน HTML, CSS และเอกสารเว็บอื่น ๆ
การใช้รูปภาพที่เข้ารหัสด้วย base64 ในการพัฒนาเว็บกลายเป็นที่แพร่หลายมากขึ้นในช่วงกลางปี 2000 ขณะที่นักพัฒนามองหาวิธีการลดคำขอ HTTP และปรับปรุงเวลาโหลดหน้าเว็บ เทคนิคนี้ได้รับการยอมรับโดยเฉพาะในช่วงการเพิ่มขึ้นของการพัฒนาเว็บบนมือถือซึ่งการลดคำขอเป็นสิ่งสำคัญสำหรับประสิทธิภาพในเครือข่ายมือถือที่ช้ากว่า
ในปัจจุบัน การเข้ารหัส base64 ยังคงเป็นเครื่องมือที่สำคัญในการพัฒนาเว็บแม้ว่าการใช้งานจะกลายเป็นเป้าหมายมากขึ้นเมื่อแนวทางปฏิบัติที่ดีที่สุดได้พัฒนาไป รูปแบบการเข้ารหัส base64 มักใช้เฉพาะสำหรับรูปภาพขนาดเล็กที่สำคัญในขณะที่ใช้วิธีการส่งมอบที่มีประสิทธิภาพมากขึ้นเช่น HTTP/2 สำหรับทรัพย์สินที่ใหญ่กว่า
อ้างอิง
คำติชม
คลิกที่ feedback toast เพื่อเริ่มให้คำแนะนำเกี่ยวกับเครื่องมือนี้
เครื่องมือที่เกี่ยวข้อง
ค้นพบเครื่องมือเพิ่มเติมที่อาจมีประโยชน์สำหรับการทำงานของคุณ