แปลง GIF เป็น Base64 ทางออนไลน์หรือผ่าน C#

เข้ารหัสรูปภาพออนไลน์

เกี่ยวกับโครงการ URI

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

ไวยากรณ์ของ data URI มีดังต่อไปนี้: data:[<mime type>][;charset=<charset>][;base64],<encoded data>

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

วิธีแปลง GIF เป็น Base64 ใน C#

ในการแปลง GIF เป็นสตริง Base64 เราใช้ API Aspose.SVG for .NET ซึ่งเป็น API การจัดการเอกสารที่มีฟีเจอร์หลากหลาย ทรงพลัง และใช้งานง่ายสำหรับแพลตฟอร์ม C# เราพิจารณาตัวอย่างการเข้ารหัส GIF เป็น Base64 และการฝังสตริง Base64 เป็น URI ข้อมูลในเอกสาร SVG การดำเนินการเหล่านี้สามารถทำได้โดยใช้โค้ดไม่กี่บรรทัด:

    // Open a binary file – GIF image
    var bytes = File.ReadAllBytes(@"image.gif");
    // Initialize an SVGDocument object
    var document = new SVGDocument();
    // Create an image element
    var img = (SVGImageElement)document.CreateElementNS("http://www.w3.org/2000/svg", "image");
    // Convert GIF to Base64
    img.Href.BaseVal = "data:image/gif;charset=utf-8;base64," + Convert.ToBase64String(bytes);
    // Add the image element into the SVG document
    document.RootElement.AppendChild(img);
    // Save the SVG document
    document.Save(@"image-base64.svg");

ขั้นตอนในการแปลง GIF เป็น Base64 ใน C#

1. เปิดภาพ GIF เพื่อแปลง ใช้เมธอด ReadAllBytes(path) เพื่อเปิดภาพ GIF และอ่านเนื้อหาของไฟล์เป็นอาร์เรย์แบบไบต์
2. เริ่มต้นอินสแตนซ์ใหม่ของคลาส SVGDocument
3. ใช้เมธอด CreateElementNS(namespaceURI, QualifiedName) ของคลาส SVGDocument เพื่อสร้างอินสแตนซ์รูปภาพ namespaceURI ตั้งค่าการอ้างอิงถึงข้อกำหนด W3C SVG qualifiedName ต้องมีชื่อแท็กสตริงขององค์ประกอบรูปภาพ
4. แปลง GIF เป็น Base64 เรียกใช้เมธอด ToBase64String(bytes) เพื่อแปลงอาร์เรย์ของจำนวนเต็ม 8 บิตเป็นการแทนค่าสตริงที่เทียบเท่าซึ่งเข้ารหัสเป็นเลขฐาน 64
5. เพิ่มองค์ประกอบรูปภาพลงในเอกสาร SVG โดยใช้วิธี AppendChild(node)
6. เรียกเมธอด Save(path) เพื่อบันทึกเอกสาร SVG

ข้อดีและข้อเสียของ Data URI

URI ข้อมูลช่วยให้เราฝังรูปภาพบนหน้าเว็บได้อย่างชาญฉลาด รูปแบบ URI สามารถใช้ได้หลายวิธี แต่ไม่ว่าในกรณีใดมีข้อดีและข้อเสีย

ข้อดี:

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

ข้อเสีย:

• ขนาดของข้อมูลที่เข้ารหัส Base64 มีขนาดใหญ่กว่าภาพไบนารี 1/3
• ภาพที่เข้ารหัสจะไม่ถูกแคชโดยเบราว์เซอร์ และจะถูกดาวน์โหลดทุกครั้งที่มีการเยี่ยมชมหน้าดังกล่าว
• ภาพที่เข้ารหัสยากต่อการแก้ไขเนื่องจากต้องถอดรหัสสตริง Base64 ก่อน
• Google จะไม่จัดทำดัชนีรูปภาพ Base64 เนื่องจากไม่ปรากฏในผลการค้นหารูปภาพ
  
  

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

Aspose.SVG เสนอแอปพลิเคชันออนไลน์ฟรีสำหรับเข้ารหัสและถอดรหัสข้อมูลไบนารี:

• ตัวเข้ารหัส Base64 เป็นชุดเครื่องมือที่ให้คุณเข้ารหัสข้อมูลไบนารีในรูปแบบเอาต์พุตต่างๆ: Plain Base64, JSON, XML, URI หรือ CSS
• ตัวถอดรหัส Image Base64 แปลง URI ข้อมูลที่มีสตริง Base64 เป็นภาพโดยการวางสตริง URI ในตัวควบคุมอินพุต

แอปพลิเคชันบนเบราว์เซอร์ของเราทำงานได้จากทุกแพลตฟอร์ม รวมถึง Windows, Linux, Mac OS, Android และ iOS คุณไม่จำเป็นต้องลงทะเบียน ปลั๊กอิน หรือติดตั้งซอฟต์แวร์ เริ่มใช้เครื่องมือเข้ารหัส/ถอดรหัส Base64 ออนไลน์อย่างปลอดภัย มั่นคง และด้วยวิธีง่ายๆ!

ตัวอย่างการใช้งานการเข้ารหัส Base64

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="data:image/gif;charset=utf-8;base64,R0lGODlhMgAyAPMMAA1dKxdkNC90STV4TkWCXFWNamGVdIaulZe..." alt="Green circle"/>
</svg>

<body>
    <div>
        <img src="data:image/gif;base64,R0lGODlhMgAyAPMMAA1dKxdkNC90STV4TkWCXFWNamGVdIaulZe..." alt="Green circle">
    </div>
</body>

.class {
    background-image: url('data:image/gif;base64,R0lGODlhMgAyAPMMAA1dKxdkNC90STV4TkWCXFWNamGVdIaulZe...');
}

<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/gif">R0lGODlhMgAyAPMMAA1dKxdkNC90STV4TkWCXFWNamGVdIaulZe...</image>
</root>

{
  "image": {
    "mime": "image/gif",
    "data": "R0lGODlhMgAyAPMMAA1dKxdkNC90STV4TkWCXFWNamGVdIaulZe..."
  }
}

คำถามที่พบบ่อย

เริ่มต้นใช้งาน Aspose.SVG for .NET API