Whiz Tools

ตัวถอดรหัสและดูภาพ 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 ข้อมูลด้วยโครงสร้างดังต่อไปนี้:

data:[<media type>][;base64],<data>

ตัวอย่างเช่น รูปภาพ PNG ที่เข้ารหัสด้วย base64 อาจมีลักษณะดังนี้:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

ส่วนประกอบของรูปแบบนี้คือ:

  • data: - สคีมาของ URL
  • image/png - ชนิด MIME ของข้อมูล
  • ;base64 - วิธีการเข้ารหัส
  • , - ตัวแบ่งระหว่างส่วนหัวและข้อมูล
  • ข้อมูลที่เข้ารหัส base64 จริง

กระบวนการถอดรหัส

เมื่อถอดรหัสสตริงรูปภาพ base64 จะมีขั้นตอนดังนี้:

  1. สตริงจะถูกวิเคราะห์เพื่อตรวจสอบว่ามีคำนำหน้า URL ข้อมูลหรือไม่
  2. หากมีคำนำหน้าอยู่ ชนิด MIME จะถูกดึงออกมาเพื่อตัดสินใจเกี่ยวกับรูปแบบรูปภาพ
  3. ส่วนข้อมูล base64 จะถูกแยกออกและถอดรหัสเป็นข้อมูลไบนารี
  4. ข้อมูลไบนารีจะถูกแปลงเป็น Blob หรือ URL ของวัตถุที่สามารถแสดงเป็นรูปภาพได้

หากข้อมูลนำเข้ามิได้รวมคำนำหน้า URL ข้อมูล ตัวถอดรหัสจะพยายามจัดการกับข้อมูลนั้นเป็นข้อมูล base64 ดิบและอนุมานประเภทของรูปภาพจากส่วนหัวไบนารีที่ถอดรหัสหรือใช้ PNG เป็นค่าเริ่มต้น

รูปแบบรูปภาพที่รองรับ

เครื่องมือนี้รองรับรูปแบบรูปภาพทั่วไปทั้งหมดบนเว็บ:

รูปแบบชนิด MIMEกรณีการใช้งานทั่วไป
JPEGimage/jpegรูปภาพ, รูปภาพที่ซับซ้อนที่มีสีหลายสี
PNGimage/pngรูปภาพที่ต้องการความโปร่งใส, การจับภาพหน้าจอ, กราฟิก
GIFimage/gifการเคลื่อนไหวที่ง่าย, รูปภาพที่มีสีจำกัด
WebPimage/webpรูปแบบทันสมัยที่มีการบีบอัดดีกว่ารูปแบบ JPEG/PNG
SVGimage/svg+xmlกราฟิกเวกเตอร์, ไอคอนและภาพประกอบที่ปรับขนาดได้

กรณีการใช้งาน

รูปภาพที่เข้ารหัสด้วย base64 มีการใช้งานที่หลากหลายในการพัฒนาเว็บและอื่น ๆ:

  1. ฝังรูปภาพใน HTML/CSS/JS: ลดคำขอ HTTP โดยการรวมรูปภาพไว้ในโค้ดของคุณ ซึ่งสามารถปรับปรุงเวลาโหลดหน้าเว็บสำหรับรูปภาพขนาดเล็ก

  2. เทมเพลตอีเมล: ทำให้แน่ใจว่ารูปภาพแสดงผลอย่างถูกต้องในไคลเอนต์อีเมลที่บล็อกรูปภาพภายนอกตามค่าเริ่มต้น

  3. แอปพลิเคชันไฟล์เดียว: สร้างแอปพลิเคชัน HTML ที่มีความเป็นอิสระซึ่งทรัพยากรทั้งหมดถูกฝังอยู่ในไฟล์เดียว

  4. การตอบสนอง API: รวมข้อมูลรูปภาพโดยตรงใน JSON โดยไม่ต้องการจุดสิ้นสุดรูปภาพแยกต่างหาก

  5. Data URIs ใน CSS: ฝังไอคอนและรูปภาพพื้นหลังขนาดเล็กโดยตรงในไฟล์ CSS

  6. การจัดการ Canvas: ช่วยในการบันทึกและถ่ายโอนข้อมูลรูปภาพจาก canvas

  7. แอปพลิเคชันออฟไลน์: เก็บรูปภาพเป็นสตริงข้อความใน localStorage หรือ IndexedDB

การพิจารณาด้านประสิทธิภาพ

แม้ว่าการเข้ารหัส base64 จะเสนอความสะดวก แต่ก็มีข้อแลกเปลี่ยน:

  • ขนาดไฟล์ที่เพิ่มขึ้น: การเข้ารหัส base64 จะเพิ่มขนาดข้อมูลประมาณ 33%
  • ไม่มีการแคชของเบราว์เซอร์: รูปภาพที่ฝังไม่สามารถแคชแยกต่างหากได้เหมือนไฟล์รูปภาพภายนอก
  • ค่าใช้จ่ายในการวิเคราะห์: เบราว์เซอร์ต้องถอดรหัสสตริง base64 ก่อนที่จะเรนเดอร์
  • ความท้าทายในการบำรุงรักษา: รูปภาพที่ฝังยากที่จะอัปเดตมากกว่าที่อ้างอิงจากไฟล์

เพื่อประสิทธิภาพที่ดีที่สุด การเข้ารหัส base64 มักแนะนำเฉพาะสำหรับรูปภาพขนาดเล็ก (ต่ำกว่า 10KB) รูปภาพขนาดใหญ่จะดีกว่าที่จะให้บริการเป็นไฟล์แยกต่างหากที่สามารถแคชและปรับให้เหมาะสมได้อย่างเหมาะสม

ทางเลือก

มีทางเลือกหลายประการสำหรับการเข้ารหัส base64 สำหรับกรณีการใช้งานที่แตกต่างกัน:

  1. การฝัง SVG แบบในบรรทัด: สำหรับกราฟิกเวกเตอร์, SVG แบบในบรรทัดมักให้ประสิทธิภาพและความยืดหยุ่นที่ดีกว่าการเข้ารหัส base64 SVG

  2. WebP และรูปแบบภาพทันสมัย: รูปแบบเหล่านี้ให้การบีบอัดที่ดีกว่ารูปแบบ JPEG/PNG ที่เข้ารหัสด้วย base64

  3. ภาพสไปรต์: รวมรูปภาพขนาดเล็กหลาย ๆ รูปในไฟล์เดียวและใช้การจัดตำแหน่ง CSS

  4. CDN (เครือข่ายการจัดส่งเนื้อหา): สำหรับเว็บไซต์การผลิต, การให้บริการรูปภาพที่ปรับให้เหมาะสมจาก CDN มักมีประสิทธิภาพมากกว่า

  5. การบีบอัดข้อมูล: สำหรับการถ่ายโอนข้อมูลไบนารีจำนวนมาก, อัลกอริธึมการบีบอัดเฉพาะทางเช่น gzip หรือ Brotli มีประสิทธิภาพมากกว่าการเข้ารหัส base64

ตัวอย่างโค้ด

นี่คือตัวอย่างการทำงานกับรูปภาพที่เข้ารหัสด้วย base64 ในหลายภาษาโปรแกรม:

// แปลงรูปภาพเป็น base64 ใน JavaScript (เบราว์เซอร์)
function imageToBase64(imgElement) {
  const canvas = document.createElement('canvas');
  canvas.width = imgElement.width;
  canvas.height = imgElement.height;
  
  const ctx = canvas.getContext('2d');
  ctx.drawImage(imgElement, 0, 0);
  
  // รับเป็น URL ข้อมูล (สตริง base64)
  return canvas.toDataURL('image/png');
}

// แสดงรูปภาพ base64
function displayBase64Image(base64String) {
  const img = new Image();
  
  // จัดการกับสตริงที่ไม่มีคำนำหน้า URL ข้อมูล
  if (!base64String.startsWith('data:')) {
    base64String = `data:image/png;base64,${base64String}`;
  }
  
  img.src = base64String;
  document.body.appendChild(img);
}
import base64
from PIL import Image
from io import BytesIO

# แปลงไฟล์รูปภาพเป็น base64
def image_to_base64(image_path):
    with open(image_path, "rb") as image_file:
        encoded_string = base64.b64encode(image_file.read())
        return encoded_string.decode('utf-8')

# แปลง base64 เป็นรูปภาพและบันทึก
def base64_to_image(base64_string, output_path):
    # ลบคำนำหน้า URL ข้อมูลหากมี
    if ',' in base64_string:
        base64_string = base64_string.split(',')[1]
    
    image_data = base64.b64decode(base64_string)
    image = Image.open(BytesIO(image_data))
    image.save(output_path)

# การใช้งานตัวอย่าง
base64_str = image_to_base64("input.jpg")
print(f"data:image/jpeg;base64,{base64_str[:30]}...") # พิมพ์ส่วนเริ่มต้นของสตริง

base64_to_image(base64_str, "output.jpg")
<?php
// แปลงไฟล์รูปภาพเป็น base64 ใน PHP
function imageToBase64($path) {
    $type = pathinfo($path, PATHINFO_EXTENSION);
    $data = file_get_contents($path);
    return 'data:image/' . $type . ';base64,' . base64_encode($data);
}

// แปลง base64 เป็นรูปภาพและบันทึก
function base64ToImage($base64String, $outputPath) {
    // แยกข้อมูลไบนารีที่เข้ารหัส base64
    $imageData = explode(',', $base64String);
    $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
    
    // ถอดรหัสและบันทึก
    $data = base64_decode($imageData);
    file_put_contents($outputPath, $data);
}

// การใช้งานตัวอย่าง
$base64Image = imageToBase64('input.jpg');
echo substr($base64Image, 0, 50) . "...\n"; // พิมพ์ส่วนเริ่มต้นของสตริง

base64ToImage($base64Image, 'output.jpg');
?>
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.file.Files;
import java.util.Base64;

public class Base64ImageUtil {
    
    // แปลงไฟล์รูปภาพเป็น base64
    public static String imageToBase64(String imagePath) throws IOException {
        File file = new File(imagePath);
        byte[] fileContent = Files.readAllBytes(file.toPath());
        String extension = imagePath.substring(imagePath.lastIndexOf(".") + 1);
        String base64String = Base64.getEncoder().encodeToString(fileContent);
        
        return "data:image/" + extension + ";base64," + base64String;
    }
    
    // แปลง base64 เป็นรูปภาพและบันทึก
    public static void base64ToImage(String base64String, String outputPath) throws IOException {
        // ลบคำนำหน้า URL ข้อมูลหากมี
        if (base64String.contains(",")) {
            base64String = base64String.split(",")[1];
        }
        
        byte[] decodedBytes = Base64.getDecoder().decode(base64String);
        
        try (FileOutputStream fos = new FileOutputStream(outputPath)) {
            fos.write(decodedBytes);
        }
    }
    
    public static void main(String[] args) throws IOException {
        String base64Image = imageToBase64("input.jpg");
        System.out.println(base64Image.substring(0, 50) + "..."); // พิมพ์ส่วนเริ่มต้นของสตริง
        
        base64ToImage(base64Image, "output.jpg");
    }
}
using System;
using System.IO;
using System.Text.RegularExpressions;

class Base64ImageConverter
{
    // แปลงไฟล์รูปภาพเป็น base64
    public static string ImageToBase64(string imagePath)
    {
        byte[] imageBytes = File.ReadAllBytes(imagePath);
        string base64String = Convert.ToBase64String(imageBytes);
        
        string extension = Path.GetExtension(imagePath).TrimStart('.').ToLower();
        return $"data:image/{extension};base64,{base64String}";
    }
    
    // แปลง base64 เป็นรูปภาพและบันทึก
    public static void Base64ToImage(string base64String, string outputPath)
    {
        // ลบคำนำหน้า URL ข้อมูลหากมี
        if (base64String.Contains(","))
        {
            base64String = base64String.Split(',')[1];
        }
        
        byte[] imageBytes = Convert.FromBase64String(base64String);
        File.WriteAllBytes(outputPath, imageBytes);
    }
    
    static void Main()
    {
        string base64Image = ImageToBase64("input.jpg");
        Console.WriteLine(base64Image.Substring(0, 50) + "..."); // พิมพ์ส่วนเริ่มต้นของสตริง
        
        Base64ToImage(base64Image, "output.jpg");
    }
}
require 'base64'

# แปลงไฟล์รูปภาพเป็น base64
def image_to_base64(image_path)
  extension = File.extname(image_path).delete('.')
  base64_data = Base64.strict_encode64(File.read(image_path))
  "data:image/#{extension};base64,#{base64_data}"
end

# แปลง base64 เป็นรูปภาพและบันทึก
def base64_to_image(base64_string, output_path)
  # ลบคำนำหน้า URL ข้อมูลหากมี
  if base64_string.include?(',')
    base64_string = base64_string.split(',')[1]
  end
  
  File.open(output_path, 'wb') do |file|
    file.write(Base64.decode64(base64_string))
  end
end

# การใช้งานตัวอย่าง
base64_image = image_to_base64('input.jpg')
puts base64_image[0, 50] + '...' # พิมพ์ส่วนเริ่มต้นของสตริง

base64_to_image(base64_image, 'output.jpg')
' ฟังก์ชัน Excel VBA สำหรับเข้ารหัสไฟล์เป็น base64
Function FileToBase64(filePath As String) As String
    Dim fileNum As Integer
    Dim fileData() As Byte
    Dim objXML As Object
    Dim objNode As Object
    
    fileNum = FreeFile
    Open filePath For Binary Access Read As fileNum
    ReDim fileData(LOF(fileNum) - 1)
    Get fileNum, , fileData
    Close fileNum
    
    Set objXML = CreateObject("MSXML2.DOMDocument")
    Set objNode = objXML.createElement("b64")
    
    objNode.DataType = "bin.base64"
    objNode.nodeTypedValue = fileData
    
    FileToBase64 = objNode.Text
    
    Set objNode = Nothing
    Set objXML = Nothing
End Function

' การใช้งานใน Excel:
' =FileToBase64("C:\path\to\image.jpg")

การใช้งาน HTML

นี่คือวิธีการฝังรูปภาพ base64 โดยตรงใน HTML:

<!-- การฝังรูปภาพ base64 โดยตรงใน HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="รูปภาพที่เข้ารหัสด้วย Base64">

<!-- ใช้ CSS กับรูปภาพพื้นหลัง base64 -->
<style>
.base64-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
  width: 100px;
  height: 100px;
}
</style>
<div class="base64-bg"></div>

ประวัติ

การเข้ารหัส 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 สำหรับทรัพย์สินที่ใหญ่กว่า

อ้างอิง

  1. RFC 4648: The Base16, Base32, and Base64 Data Encodings
  2. RFC 2397: The "data" URL scheme
  3. MDN Web Docs: data URIs
  4. CSS-Tricks: Data URIs
  5. Base64 Image Encoder
  6. Can I Use: Data URIs
  7. Web Performance: When to Base64 Encode Images (and When Not To)
Feedback