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

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

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

    // Open a binary file – raster 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 image 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");

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

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