เข้ารหัสรูปภาพเป็น Base64 ออนไลน์หรือใน C#

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

Download from NuGet
 

Aspose.SVG for .NET Aspose.SVG for .NET

  Free Trial   Pricing Buy

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

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

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

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

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

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

บทความนี้พิจารณาวิธีเข้ารหัสไฟล์รูปภาพเป็นสตริง Base64 โดยใช้คุณลักษณะ Aspose.SVG .NET API ตัวอย่าง C# ต่อไปนี้สาธิตวิธีแปลงรูปภาพ PNG เป็นสตริง Base64 และฝังลงในไฟล์ SVG เมธอด ReadAllBytes (สตริง) ใช้เพื่อเปิดรูปภาพ (ไฟล์ไบนารี) และอ่านเนื้อหาของไฟล์ลงในอาร์เรย์ไบต์ เมธอด ToBase64String(bytes) แปลงอาร์เรย์ของจำนวนเต็ม 8 บิตเป็นการแทนสตริงที่เทียบเท่าซึ่งเข้ารหัสด้วยเลขฐาน 64 จากนั้นเมธอด AppendChild() จะเพิ่มภาพที่เข้ารหัส Base64 ลงในเอกสาร SVG

รหัส C# เพื่อแปลงภาพ PNG เป็น Base64

    // 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 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");

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

ข้อมูล:[<ชนิด mime>][;charset=<charset>][;base64], <ข้อมูลที่เข้ารหัส>

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

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Red border"/>
</svg>

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


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

รหัส HTML เพื่อฝังรูปภาพ Base64 เป็น URI ข้อมูล

<body>
    <div>
        <img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Red border">
    </div>
</body>

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

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

ตัวอย่างการฝังรูปภาพ Base64 เป็นโค้ดพื้นหลัง CSS


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

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

body {
    background-image: url('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg...');
}

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

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

การติดตั้ง Aspose.SVG สำหรับไลบรารี .NET

Aspose.SVG สำหรับ .NET เป็นไลบรารีที่ยืดหยุ่นข้ามแพลตฟอร์มซึ่งออกแบบมาเพื่อมอบคุณสมบัติที่หลากหลายสำหรับการประมวลผลและเรนเดอร์เอกสาร SVG มันรวมเข้ากับแอพ .NET ของคุณได้อย่างราบรื่นเพื่อทำงานกับไฟล์ SVG โดยไม่ต้องติดตั้งซอฟต์แวร์ของบุคคลที่สาม SVG .NET API ของเราสามารถใช้กับภาษา .NET ใดก็ได้ เช่น C#, VB.NET, ASP.NET เป็นต้น ทำงานได้ดีพอๆ กันบนระบบปฏิบัติการใดๆ ที่สามารถติดตั้ง Mono (รองรับ .NET 4.0 Framework) หรือใช้ .NET แกนกลาง ซึ่งรวมถึง Windows, Linux และ macOS

การติดตั้ง Aspose.SVG สำหรับ .NET ผ่าน NuGet :

  1. การใช้คอนโซลตัวจัดการแพ็คเกจ
  2. การใช้ NuGet Package Manager GUI

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

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

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