แปลง PNG เป็น 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 ซึ่งส่งผลให้สูญเสียประโยชน์ด้านประสิทธิภาพ หากคุณต้องการแปลง PNG เป็น Base64 และใช้สตริงเข้ารหัสเพื่อฝังลงในไฟล์ข้อความ โปรดเรียนรู้ข้อดีและข้อเสียทั้งหมดก่อน

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

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

    // Open a binary file – PNG image
    var bytes = File.ReadAllBytes(@"image.png");
    // 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 PNG to Base64
    img.Href.BaseVal = "data:image/png;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");

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

1. เปิดภาพ PNG เพื่อแปลง ใช้เมธอด ReadAllBytes(path) เพื่อเปิด PNG และอ่านเนื้อหาของไฟล์ในอาร์เรย์ไบต์
2. เริ่มต้นอินสแตนซ์ใหม่ของคลาส SVGDocument
3. ใช้เมธอด CreateElementNS(namespaceURI, QualifiedName) ของคลาส SVGDocument เพื่อสร้างอินสแตนซ์รูปภาพ namespaceURI ตั้งค่าการอ้างอิงถึงข้อกำหนด W3C SVG qualifiedName ต้องมีชื่อแท็กสตริงขององค์ประกอบรูปภาพ
4. แปลง PNG เป็น 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/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..." alt="Red circle"/>
</svg>

<body>
    <div>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..." alt="Red circle">
    </div>
</body>

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

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

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

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

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