เข้ารหัสรูปภาพเป็น Base64 ใน Python

แปลงรูปภาพเป็นสตริงที่เข้ารหัส Base64 รองรับ SVG, JPG, JPEG, PNG, BMP, GIF, TIFF, ICO, IFIF, WEBP และรูปแบบรูปภาพอื่นๆ

Download from PyPI
 

Aspose.SVG for Python via .NET Aspose.SVG for Python via .NET

  Download   Pricing Buy

การเข้ารหัส Base64

Base64 เป็นรูปแบบการเข้ารหัสที่แปลงข้อมูลไบนารี่เป็นข้อความ ASCII ซึ่งมักใช้ในการถ่ายโอนข้อมูลผ่านอินเทอร์เน็ต เมื่อรูปภาพถูกแปลงเป็น Base64 ผลลัพธ์จะเป็นสตริงตัวอักษรละติน ตัวเลข และอักขระสองตัว ได้แก่ “+” และ “/” เบราว์เซอร์สามารถตีความข้อมูลที่เข้ารหัสนี้ได้โดยไม่มีปัญหา กล่าวอีกนัยหนึ่ง Base64 คือการเข้ารหัสแบบไบนารีเป็นข้อความที่สามารถฝังได้ในรูปแบบต่างๆ เช่น JSON, XML, URI ข้อมูล หรือ CSS

Base64 ถูกนำมาใช้กันอย่างแพร่หลายในการฝังรูปภาพหรือทรัพยากรไบนารีอื่นๆ ลงในไฟล์ HTML หรือ CSS โดยตรง ซึ่งช่วยลดความจำเป็นในการร้องขอเว็บเพิ่มเติม เนื่องจากรูปภาพถูกรวมไว้ในเอกสาร HTML แล้ว อย่างไรก็ตาม Base64 เหมาะที่สุดสำหรับรูปภาพขนาดเล็ก รูปภาพที่เข้ารหัส Base64 ขนาดใหญ่อาจทำให้ HTML ขยายตัว ส่งผลให้ประสิทธิภาพช้าลง ควรสังเกตด้วยว่า Google จะไม่จัดทำดัชนีรูปภาพ Base64 เนื่องจากจะไม่แสดงในการค้นหารูปภาพ


แปลงรูปภาพเป็น Base64 ออนไลน์

เข้ารหัสภาพด้วย Aspose.SVG for .NET API แบบเรียลไทม์! โปรดโหลดรูปภาพจากระบบไฟล์ในเครื่อง แล้วคุณจะได้รับผลลัพธ์เป็น URI ข้อมูล แหล่งที่มาของรูปภาพ Base64 และแหล่งที่มาของพื้นหลัง CSS ของ Base64 ทันที รองรับ SVG, JPG, JPEG, PJP, PJPEG, PNG, BMP, XBM, GIF, TIFF, ICO, IFIF, WEBP และรูปแบบรูปภาพอื่นๆ



แปลงรูปภาพเป็น Base64 ใน Python

บทความนี้พิจารณาวิธีเข้ารหัสไฟล์รูปภาพเป็นสตริง Base64 โดยใช้ Aspose.SVG for Python via .NET API ตัวอย่าง Python ต่อไปนี้สาธิตวิธีการแปลงอิมเมจ SVG เป็นสตริง Base64 และฝังลงในไฟล์ SVG

รหัส Python เพื่อแปลงภาพ SVG เป็น Base64

import base64
from aspose.svg import SVGDocument


document_path = "image.svg"

# Open an SVG image
with open(document_path, "rb") as file:
    bytes_data = file.read()

# Initialize an SVGDocument object
document = SVGDocument()

# Create an image element
img_element = document.create_element_ns("http://www.w3.org/2000/svg", "image")

# Convert SVG image to Base64 and set the href attribute
encoded_image = f"data:image/svg+xml;charset=utf-8;base64,{base64.b64encode(bytes_data).decode('utf-8')}"
img_element.set_attribute("href", encoded_image)

# Add the image element to the SVG document
document.document_element.append_child(img_element)

# Save the SVG document
document.save("image-base64.svg")

ส่วนของไฟล์ image-base64.svg ที่เป็นผลลัพธ์จะแสดงอยู่ด้านล่าง สตริง Base64 ถูกตัดเพื่อไม่ให้เกะกะตัวอย่างโค้ด SVG รูปแบบที่จะฝังอิมเมจ Base64 เป็นข้อมูล URI มีดังต่อไปนี้ เพื่อให้เจาะจง:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

รหัส SVG เพื่อฝังภาพ Base64

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ..." alt="Alt text for the image"/>
</svg>



ฝังรูปภาพ Base64 ใน HTML

เหตุใดจึงแปลงรูปภาพเป็น Base64 รูปภาพที่เข้ารหัส Base64 สามารถฝังลงใน HTML ได้โดยตรงโดยใช้แท็ก <img> โดยการแทรกข้อมูลรูปภาพเป็น URI ข้อมูล วิธีนี้จะช่วยลดจำนวนคำขอ HTTP ที่เบราว์เซอร์จำเป็นต้องโหลดหน้าเว็บ และปรับปรุงประสิทธิภาพ ข้อมูลโค้ดต่อไปนี้แสดงวิธีการฝังภาพ Base64 ใน HTML

โค้ด HTML เพื่อฝัง Base64 Image เป็น data URI

<body>
    <div>
        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ..." alt="Alt text for the image">
    </div>
</body>

URI ข้อมูลประกอบด้วยสองส่วนที่คั่นด้วยเครื่องหมายจุลภาค ส่วนแรกระบุส่วนหัวของโครงร่าง URI ข้อมูลสำหรับรูปภาพที่เข้ารหัส Base64 และส่วนที่สองกำหนดสตริงรูปภาพที่เข้ารหัส Base64 เอง:

  1. data:image/svg+xml;base64 เป็นส่วนหัวของโครงร่าง URI ข้อมูล
  2. PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ... เป็นข้อมูล Base64 ที่เข้ารหัส



ฝังรูปภาพ Base64 ในโค้ด CSS

อีกวิธีหนึ่งในการลดจำนวนคำขอ HTTP สำหรับรูปภาพคือการใช้คุณสมบัติ background-image ของ CSS คุณสมบัตินี้ตั้งค่ารูปภาพเป็นพื้นหลังขององค์ประกอบ และคุณสามารถระบุแต่ละรูปภาพเป็น URL หรือเป็น URI ข้อมูลรูปภาพได้ เมื่อใช้ URL เบราว์เซอร์จะส่งคำขอ HTTP เพื่อรับรูปภาพภายนอก แต่ด้วยรูปภาพ Base64 ที่ฝังเป็น URI ข้อมูล รูปภาพจะรวมอยู่ในเอกสารโดยตรง ซึ่งหมายความว่าเบราว์เซอร์ไม่จำเป็นต้องส่งคำขอ HTTP เพิ่มเติม ซึ่งจะทำให้เวลาในการโหลดหน้าเว็บเร็วขึ้น

โค้ด CSS เพื่อฝัง Base64 Image เป็น URI ข้อมูล

body {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ...");
}



ฝังรูปภาพ Base64 ในรูปแบบ XML

การเข้ารหัสรูปภาพเป็น Base64 สำหรับการฝังใน XML ช่วยลดความยุ่งยากในการรวมและเพิ่มความสามารถในการพกพาโดยอนุญาตให้รวมรูปภาพภายในรูปแบบนี้โดยตรง ซึ่งช่วยลดความจำเป็นในการอ้างอิงไฟล์ภายนอก

รหัส XML พร้อมอิมเมจ Base64 SVG ที่ฝังอยู่

<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/svg+xml">PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ...</image>
</root>



ฝังอิมเมจ Base64 ใน JSON

การแปลงรูปภาพเป็น Base64 และบันทึกเป็น JSON มีประโยชน์สำหรับการฝังลงในหน้าเว็บหรือแอปพลิเคชันโดยไม่ต้องร้องขอ HTTP เพิ่มเติม

รหัส JSON พร้อมอิมเมจ Base64 ที่ฝังอยู่

{
  "image": {
    "mime": "image/png",
    "data": "PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ..."
  }
}

ตัวเข้ารหัส Base64 ออนไลน์

ออนไลน์ ตัวเข้ารหัส Base64 แปลงเนื้อหาของเอกสาร SVG หรือไฟล์รูปภาพไปเป็นการแสดงสตริงที่เทียบเท่าซึ่งเข้ารหัสด้วยอักขระ ASCII นอกจากนี้ยังมีตัวอย่างสำหรับข้อมูล URI, JSON, XML และอื่นๆ เครื่องมือการเข้ารหัสช่วยให้คุณหลีกเลี่ยงปัญหาการเข้ารหัสข้อมูลต่างๆ ที่ทำให้เนื้อหาเว็บไซต์หรือข้อความอีเมลไม่สามารถอ่านได้ ตัวเข้ารหัส Base64 มีความปลอดภัย ใช้งานง่าย และไม่มีค่าใช้จ่ายใดๆ ทั้งสิ้น ทำงานได้กับทุกเบราว์เซอร์และทุกระบบปฏิบัติการ แปลง Image เป็น Base64 ได้ฟรีทันที!

เริ่มต้นใช้งาน Python API

หากคุณต้องการพัฒนากราฟิกเวกเตอร์ที่ปรับขนาดได้และแอปพลิเคชัน ให้ติดตั้ง Aspose.SVG for Python via .NET API ที่ยืดหยุ่นและความเร็วสูงของเรา pip เป็นวิธีที่ง่ายที่สุดในการดาวน์โหลดและติดตั้ง Aspose.SVG for Python via .NET API เมื่อต้องการทำเช่นนี้ ให้เรียกใช้คำสั่งต่อไปนี้:

pip install aspose-svg-net

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการติดตั้งไลบรารี Python และข้อกำหนดของระบบ โปรดดูที่ เอกสารประกอบ Aspose.SVG

ตัวเข้ารหัสอื่น ๆ ที่รองรับ

คุณสามารถเข้ารหัสรูปภาพเป็น Base64 ได้ – รองรับรูปแบบ JPG, PNG, BMP, GIF, TIFF, ICO และ SVG:

  • PNG to Base64
  • JPG to Base64
  • PNG to XML
  • JPG to XML