1. IronPDF
  2. 操作指南
  3. DataUris和圖片嵌入
如何在 C# | IronPDF 中使用資料 URI 嵌入圖片

在 C# 和 VB PDF 渲染中使用 DataURI 嵌入影像

Curtis Chau
Curtis Chau
更新:
This article was translated from English: Does it need improvement?
Translated
View the article in English

使用IronPDF在 C# 和 VB .NET中直接將圖像嵌入 PDF 文件中，透過將圖像位元組轉換為 base64 字串並將其內聯包含在 HTML 標記中，消除了對外部文件的依賴，從而實現無縫的 PDF 渲染。

在使用 HTML 字串和文件時，避免依賴資源目錄通常至關重要。 數據URI方案提供了一個有效的解決方案。

資料 URI 方案將資料直接嵌入到 HTML 或 CSS 程式碼中，無需單獨的文件。 DataURIs 允許將圖像、檔案和字型直接注入 HTML 文件中作為字串。

快速入門：使用資料URI在PDF中嵌入圖像

使用IronPDF透過嵌入影像將 HTML 內容轉換為 PDF 文件。 本指南示範如何使用簡單且有效率的程式碼渲染具有嵌入式影像的 PDF 檔案。 IronPDF可以將 HTML 轉換為 PDF，同時保持影像完整性。 這裡有一個簡單的範例，展示如何使用 DataURI 以最少的程式碼將圖像直接嵌入到 PDF 文件中。

  1. 使用NuGet套件管理器安裝https://www.nuget.org/packages/IronPdf

    PM > Install-Package IronPdf

  2. 複製並運行這段程式碼。

    new IronPdf.ChromePdfRenderer.StaticRenderHtmlAsPdf("<img src='data:image/png;base64,...' />").SaveAs("output.pdf");

  3. 部署到您的生產環境進行測試

    今天就在您的專案中開始使用免費試用IronPDF

    arrow pointer

最簡工作流程(5個步驟)

  1. 從NuGet下載IronPDF
  2. 使用`ReadAllBytes`方法讀取圖像字節
  3. 使用`ToBase64String`方法將位元組轉換為 Base64 字串。
  4. 在 img 標籤中包含 base64 訊息
  5. 將 HTML 渲染為 PDF


如何在PDF中使用DataURI嵌入影像？

使用 DataURIs 嵌入圖像，可以直接在 HTML 標記中包含圖像，而無需引用外部文件。 在雲端環境、分散式系統中產生 PDF 或確保所有資源都是自包含的，這種方法效果很好。 IronPDF 的 HTML 轉 PDF 轉換完全支援 DataURIs，能夠建立具有嵌入式影像的專業 PDF。

這個過程包括三個步驟：讀取圖像資料、將其轉換為 base64 格式、將其嵌入 HTML img 標籤中。 此方法適用於各種影像格式，包括 PNG、JPEG、GIF 和 SVG，為 PDF 生成工作流程提供了靈活性。 無論使用Azure Blob 儲存映像還是本機文件，該技術都保持一致。

基本圖像嵌入範例

這個完整的範例示範如何使用 DataURI 將影像嵌入到 PDF 中：

:path=/static-assets/pdf/content-code-examples/how-to/datauris-image.cs
using IronPdf;
using System;

// Read byte from image file
var pngBinaryData = System.IO.File.ReadAllBytes("My_image.png");

// Convert bytes to base64
var ImgDataURI = @"data:image/png;base64," + Convert.ToBase64String(pngBinaryData);

// Import base64 to img tag
var ImgHtml = $"<img src='{ImgDataURI}'>";

ChromePdfRenderer Renderer = new ChromePdfRenderer();

// Render the HTML string
var pdf = Renderer.RenderHtmlAsPdf(ImgHtml);

pdf.SaveAs("datauri_example.pdf");
$vbLabelText   $csharpLabel

VB .NET開發人員可以使用 IronPDF 的 VB .NET PDF 程式庫實現相同的功能：

Imports IronPdf
Imports System

' Read byte from image file
Dim pngBinaryData As Byte() = System.IO.File.ReadAllBytes("My_image.png")

' Convert bytes to base64
Dim ImgDataURI As String = "data:image/png;base64," & Convert.ToBase64String(pngBinaryData)

' Import base64 to img tag
Dim ImgHtml As String = $"<img src='{ImgDataURI}'>"

Dim Renderer As New ChromePdfRenderer()

' Render the HTML string
Dim pdf = Renderer.RenderHtmlAsPdf(ImgHtml)

pdf.SaveAs("datauri_example.pdf")

為什麼應該使用資料URI而不是文件引用？

在產生 PDF 時，DataURIs 相比傳統的文件引用有幾個優點。 首先，它們消除了對外部文件的依賴，使 PDF 生成更加可靠和便攜。 這在Azure或AWS Lambda等雲端環境中至關重要，因為這些環境中的檔案系統存取可能受到限製或對效能要求很高。

其次，確保 PDF 文件完全獨立。 在共享或分發生成的 PDF 時，圖像連結失效或資源缺失都不是問題。 這使得 DataURIs 非常適合產生需要存檔或電子郵件分發的報告、發票或文件。

第三，DataURIs 在某些情況下可以提高效能。 由於圖像資料直接嵌入到 HTML 中，因此在渲染過程中不會產生額外的 HTTP 請求或檔案系統操作。 這樣可以加快 PDF 生成速度，尤其是在處理多個小圖像時。

支援哪些圖像格式？

IronPDF透過 DataURIs 支援所有主流影像格式，為 PDF 生成工作流程提供彈性：

  • PNG ：非常適合具有透明度的影像或具有清晰邊緣的圖形。 使用 data:image/png;base64,
  • JPEG ：最適合照片和具有多種顏色的複雜影像。 使用 data:image/jpeg;base64,
  • GIF ：適用於簡單的動畫或顏色有限的圖像。 使用 data:image/gif;base64,
  • SVG ：非常適合可縮放向量圖形。 使用 data:image/svg+xml;base64,
  • WebP ：具有出色壓縮效能的現代格式。 使用 data:image/webp;base64,

以下範例展示如何處理不同的影像格式：

using IronPdf;
using System;
using System.IO;

public class MultiFormatImageEmbedding
{
    public static void EmbedVariousImageFormats()
    {
        var renderer = new ChromePdfRenderer();

        // Function to create DataURI from image file
        string CreateDataUri(string filePath, string mimeType)
        {
            var imageBytes = File.ReadAllBytes(filePath);
            return $"data:{mimeType};base64,{Convert.ToBase64String(imageBytes)}";
        }

        // Create HTML with multiple image formats
        var html = $@"
        <html>
        <body>
            <h1>Multi-Format Image Test</h1>
            <img src='{CreateDataUri("logo.png", "image/png")}' alt='PNG Logo' />
            <img src='{CreateDataUri("photo.jpg", "image/jpeg")}' alt='JPEG Photo' />
            <img src='{CreateDataUri("icon.svg", "image/svg+xml")}' alt='SVG Icon' />
        </body>
        </html>";

        var pdf = renderer.RenderHtmlAsPdf(html);
        pdf.SaveAs("multi_format_images.pdf");
    }
}
using IronPdf;
using System;
using System.IO;

public class MultiFormatImageEmbedding
{
    public static void EmbedVariousImageFormats()
    {
        var renderer = new ChromePdfRenderer();

        // Function to create DataURI from image file
        string CreateDataUri(string filePath, string mimeType)
        {
            var imageBytes = File.ReadAllBytes(filePath);
            return $"data:{mimeType};base64,{Convert.ToBase64String(imageBytes)}";
        }

        // Create HTML with multiple image formats
        var html = $@"
        <html>
        <body>
            <h1>Multi-Format Image Test</h1>
            <img src='{CreateDataUri("logo.png", "image/png")}' alt='PNG Logo' />
            <img src='{CreateDataUri("photo.jpg", "image/jpeg")}' alt='JPEG Photo' />
            <img src='{CreateDataUri("icon.svg", "image/svg+xml")}' alt='SVG Icon' />
        </body>
        </html>";

        var pdf = renderer.RenderHtmlAsPdf(html);
        pdf.SaveAs("multi_format_images.pdf");
    }
}
$vbLabelText   $csharpLabel

IronPDF為進階影像處理(包括在現有 PDF 中新增影像)提供全面支援。

Base64編碼如何影響檔案大小？

Base64 編碼會使資料大小增加約 33%。 Base64 僅使用 64 個 ASCII 字元來表示二進位數據，每 3 個位元組的原始資料需要 4 個字元來表示。 雖然這會增加整體大小，但與獨立文件帶來的好處相比，對 PDF 生成的影響通常是微不足道的。

使用 DataURIs 時，請遵循以下做法以優化檔案大小：

1.編碼前壓縮圖像：使用工具或庫在轉換為 base64 格式之前優化圖像檔案。
2.選擇合適的格式：照片使用 JPEG 格式，有透明度的圖形使用 PNG 格式。
3.適當調整影像大小：不要嵌入大於 PDF 輸出所需尺寸的影像
4.考慮PDF壓縮：產生PDF後使用IronPDF的壓縮功能。

此範例演示了嵌入前的圖像優化：

using IronPdf;
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;

public class OptimizedImageEmbedding
{
    public static void EmbedOptimizedImage(string imagePath, int maxWidth = 800)
    {
        // Load and resize image if necessary
        using (var originalImage = Image.FromFile(imagePath))
        {
            var resizedImage = originalImage;

            if (originalImage.Width > maxWidth)
            {
                var ratio = (double)maxWidth / originalImage.Width;
                var newHeight = (int)(originalImage.Height * ratio);
                resizedImage = new Bitmap(originalImage, maxWidth, newHeight);
            }

            // Convert to optimized JPEG
            using (var ms = new MemoryStream())
            {
                var encoder = ImageCodecInfo.GetImageEncoders()
                    .First(c => c.FormatID == ImageFormat.Jpeg.Guid);
                var encoderParams = new EncoderParameters(1);
                encoderParams.Param[0] = new EncoderParameter(
                    System.Drawing.Imaging.Encoder.Quality, 85L);

                resizedImage.Save(ms, encoder, encoderParams);
                var imageBytes = ms.ToArray();

                // Create DataURI
                var dataUri = $"data:image/jpeg;base64,{Convert.ToBase64String(imageBytes)}";

                // Generate PDF
                var html = $@"
                <html>
                <body>
                    <h1>Optimized Image Example</h1>
                    <img src='{dataUri}' style='max-width: 100%;' />
                </body>
                </html>";

                var renderer = new ChromePdfRenderer();
                var pdf = renderer.RenderHtmlAsPdf(html);
                pdf.SaveAs("optimized_image.pdf");
            }

            if (resizedImage != originalImage)
                resizedImage.Dispose();
        }
    }
}
using IronPdf;
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;

public class OptimizedImageEmbedding
{
    public static void EmbedOptimizedImage(string imagePath, int maxWidth = 800)
    {
        // Load and resize image if necessary
        using (var originalImage = Image.FromFile(imagePath))
        {
            var resizedImage = originalImage;

            if (originalImage.Width > maxWidth)
            {
                var ratio = (double)maxWidth / originalImage.Width;
                var newHeight = (int)(originalImage.Height * ratio);
                resizedImage = new Bitmap(originalImage, maxWidth, newHeight);
            }

            // Convert to optimized JPEG
            using (var ms = new MemoryStream())
            {
                var encoder = ImageCodecInfo.GetImageEncoders()
                    .First(c => c.FormatID == ImageFormat.Jpeg.Guid);
                var encoderParams = new EncoderParameters(1);
                encoderParams.Param[0] = new EncoderParameter(
                    System.Drawing.Imaging.Encoder.Quality, 85L);

                resizedImage.Save(ms, encoder, encoderParams);
                var imageBytes = ms.ToArray();

                // Create DataURI
                var dataUri = $"data:image/jpeg;base64,{Convert.ToBase64String(imageBytes)}";

                // Generate PDF
                var html = $@"
                <html>
                <body>
                    <h1>Optimized Image Example</h1>
                    <img src='{dataUri}' style='max-width: 100%;' />
                </body>
                </html>";

                var renderer = new ChromePdfRenderer();
                var pdf = renderer.RenderHtmlAsPdf(html);
                pdf.SaveAs("optimized_image.pdf");
            }

            if (resizedImage != originalImage)
                resizedImage.Dispose();
        }
    }
}
$vbLabelText   $csharpLabel

先進技術和最佳實踐

在生產環境中使用 DataURIs 時，應實施快取機制，避免重複編碼相同的影像。 當使用共享資源產生多個 PDF 文件時，這一點尤其重要。 利用 IronPDF 的 async 功能，在處理多張影像時獲得更好的效能。

對於包含大量圖像的複雜文檔，可以使用混合方法，將關鍵圖像嵌入為 DataURIs，而較大的可選圖像則在外部引用。 這樣既能保證文檔內容完整，又能控製文件大小。

您也可以使用 IronPDF 的ASP.NET MVC 集成，將整個 HTML 字串或 PDF 文件作為位元組數組提供。 這種技術在建立動態生成和提供 PDF 的 Web 應用程式時非常有效。

對於進階 PDF 操作技術，包括浮水印、數位簽章和表單創建， IronPDF提供全面的文件和範例，以建立強大的 PDF 解決方案。

常見問題解答

什麼是 DataURIs，為什麼要使用 DataURIs 來產生 PDF？

DataURIs 是一種將資料直接以 base64 編碼字串的形式嵌入 HTML 或 CSS 程式碼的方案，省去了單獨的影像檔案。IronPDF 完全支援 DataURIs，因此非常適合雲端環境、分散式系統，或需要獨立 PDF 而無需外部檔案依賴時使用。

如何將圖片轉換成 DataURI 格式以嵌入 PDF？

使用 IronPDF，將影像轉換為 DataURI 包含三個步驟：首先，使用 System.IO.File.ReadAllBytes() 讀取圖片位元組。其次，使用 Convert.ToBase64String() 將位元組轉換為 base64。最後，將 base64 字串嵌入 HTML img 標籤中，格式為 'data:image/png;base64,[base64string]'。

以 DataURIs 嵌入圖片時，支援哪些圖片格式？

IronPDF 支援嵌入各種圖片格式作為 DataURIs，包括 PNG、JPEG、GIF 和 SVG。這種靈活性讓您可以使用不同的圖像類型，同時保持對 PDF 生成工作流程的完全控制。

我可以在單一 PDF 中使用 DataURIs 嵌入多張圖片嗎？

是的，IronPDF 允許您在單一 PDF 文件中使用 DataURIs 嵌入多張圖片。只需將每張圖片轉換為其 base64 表示形式，並在使用 IronPDF 的 ChromePdfRenderer 渲染之前將其包含在您的 HTML 標記中即可。

使用 DataURIs 取代檔案參照時會影響效能嗎？

雖然 DataURIs 會因為 base64 編碼而增加 HTML 字串的大小，但 IronPDF 能有效率地處理轉換。當您需要沒有外部依賴的獨立 PDF 時，尤其是在雲端或分散式環境中，這樣的取捨是值得的。

Curtis Chau
Curtis Chau
  立即與工程團隊聊天
技術作家

Curtis Chau 擁有卡爾頓大學計算機科學學士學位，專注於前端開發，擅長於 Node.js、TypeScript、JavaScript 和 React。Curtis 熱衷於創建直觀且美觀的用戶界面，喜歡使用現代框架並打造結構良好、視覺吸引人的手冊。

除了開發之外，Curtis 對物聯網 (IoT) 有著濃厚的興趣，探索將硬體和軟體結合的創新方式。在閒暇時間，他喜愛遊戲並構建 Discord 機器人，結合科技與創意的樂趣。

準備好開始了嗎？
Nuget 下載 17,803,474 | 版本： 2026.3 剛剛發布
Still Scrolling Icon

還在滾動嗎？

想快速取得證據？ PM > Install-Package IronPdf
運行範例看著你的HTML程式碼變成PDF檔。