C#で画像をデータURIで埋め込む方法|IronPDF

C#でDataURIsを使用して画像を埋め込む

& VB PDFレンダリング

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

C#とVB.NETでIronPDFを使ってDataURIsを使ってPDFドキュメントに直接画像を埋め込み、画像のバイトをbase64文字列に変換して外部ファイルへの依存をなくし、HTMLマークアップ内にインラインで含めることでシームレスなPDFレンダリングを実現します。

HTML文字列やドキュメントを扱う場合、アセットディレクトリへの依存を避けることが不可欠です。 データURIスキームは、効果的なソリューションを提供します。

データURIスキームは、HTMLまたはCSSコードに直接データを埋め込み、別ファイルの必要性を排除します。 DataURIsは、画像、ファイル、書体を文字列としてHTMLドキュメントに直接注入することを可能にします。

クイックスタート: DataURI を使用して PDF に画像を埋め込む

IronPDFでDataURIsを使って画像を埋め込み、HTMLコンテンツをPDFドキュメントに変換します。 このガイドでは、シンプルで効率的なコードを使用して、画像を埋め込んだPDFをレンダリングする方法を示します。 IronPdfは画像の整合性を保ちながらHTMLをPDFに変換します。 最小限のコードで、DataURIを使用してPDF文書に直接画像を埋め込む方法を示す簡単な例を示します。

Nuget Icon今すぐ NuGet で PDF を作成してみましょう:

  1. NuGet パッケージ マネージャーを使用して IronPDF をインストールします

    PM > Install-Package IronPdf

  2. このコード スニペットをコピーして実行します。

    new IronPdf.ChromePdfRenderer.StaticRenderHtmlAsPdf("<img src='data:image/png;base64,...' />").SaveAs("output.pdf");
  3. 実際の環境でテストするためにデプロイする

    今すぐ無料トライアルでプロジェクトに IronPDF を使い始めましょう
    arrow pointer


PDFにDataURIを使って画像を埋め込むには?

DataURIsを使用した画像の埋め込みは、外部ファイルを参照することなく、HTMLマークアップ内に直接画像を含めます。 このアプローチは、クラウド環境や分散システムでPDFを生成する場合や、すべてのリソースが自己完結していることを保証する場合に有効です。 IronPDFのHTMLからPDFへの変換DataURIsを完全にサポートし、画像を埋め込んだプロフェッショナルなPDF作成を可能にします。

プロセスには、画像データの読み取り、base64形式への変換、HTMLのimgタグへの埋め込みという3つのステップが含まれます。 この方法は、PNG、JPEG、GIF、SVGを含むさまざまな画像フォーマットに対応し、PDF生成ワークフローに柔軟性をもたらします。 Azure Blob Storageイメージを扱う場合でも、ローカルファイルを扱う場合でも、テクニックは一貫しています。

基本的な画像埋め込み例

この完全な例は、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")
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")
VB .NET

なぜファイル参照の代わりにDataURIを使用する必要があるのですか

DataURIは、PDFを生成するときに、従来のファイル参照に比べていくつかの利点を提供します。 まず、外部ファイルへの依存を排除し、PDF生成の信頼性と移植性を高めます。 これは、AzureAWS Lambda のようなクラウド環境で、ファイルシステムへのアクセスが制限されたり、パフォーマンスが重視されたりする場合に非常に重要です。

第二に、DataURIは、PDFが完全に自己完結していることを保証します。 生成されたPDFを共有または配布する場合、画像リンクの破損やリソースの欠落は問題になりません。 このため、DataURIsは、レポート、請求書、またはアーカイブや電子メール配信が必要な文書の作成に最適です。

第三に、DataURIは特定のシナリオでパフォーマンスを向上させます。 画像データは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

既存のPDFへの画像の追加を含む高度な画像処理のために、IronPDFは包括的なサポートを提供します。

Base64エンコーディングはファイルサイズにどのように影響しますか?

Base64エンコーディングは、データサイズを約33%増加させます。 Base64は、64のASCII文字のみを使用してバイナリデータを表し、元のデータの3バイトごとに4文字を必要とします。 このため、全体的なサイズは大きくなりますが、自己完結型ドキュメントの利点に比べれば、PDF生成への影響は最小限であることがほとんどです。

DataURIsを使用する際は、以下のプラクティスに従ってファイルサイズを最適化してください:

1.エンコード前に画像を圧縮する:base64に変換する前に、画像ファイルを最適化するツールやライブラリを使用してください。 2.適切なフォーマットを選びましょう:写真にはJPEGを、透明度のあるグラフィックにはPNGを使用してください。 3.画像のサイズを適切に変更する:PDF出力に必要以上に大きな画像を埋め込まないでください。 4.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ソリューションを構築するための包括的なドキュメントと例を提供します。

よくある質問

DataURIとは何ですか?なぜPDF生成に使うのですか?

DataURIはHTMLやCSSコードにbase64エンコードされた文字列として直接データを埋め込むスキームで、個別の画像ファイルを必要としません。IronPdfはDataURIを完全にサポートしており、クラウド環境、分散システム、または外部ファイル依存のない自己完結型のPDFが必要な場合に理想的です。

PDF埋め込み用に画像をDataURI形式に変換するにはどうすればよいですか?

IronPDFで画像をDataURIに変換するには3つのステップがあります:まず、System.IO.File.ReadAllBytes()を使って画像のバイトを読み込みます。次に、Convert.ToBase64String()を使ってバイトをbase64に変換します。最後に、base64文字列をHTMLのimgタグに「data:image/png;base64,[base64string]」という形式で埋め込みます。

DataURIとして画像を埋め込む場合、どのような画像形式がサポートされますか?

IronPdfはPNG、JPEG、GIF、SVGを含む様々な画像フォーマットをDataURIとして埋め込むことをサポートしています。この柔軟性により、PDF生成のワークフローを完全に制御しながら、異なる種類の画像を扱うことができます。

1つのPDFにDataURIを使って複数の画像を埋め込むことはできますか?

はい、IronPDFではDataURIを使って複数の画像を一つのPDFドキュメントに埋め込むことができます。IronPDFのChromePdfRendererでレンダリングする前に、それぞれの画像をbase64表現に変換してHTMLマークアップに含めるだけです。

ファイル参照の代わりにDataURIを使用した場合、パフォーマンスに影響はありますか?

DataURIはbase64エンコーディングのためHTML文字列のサイズを増加させますが、IronPdfは効率的に変換を処理します。トレードオフは、特にクラウドや分散環境において、外部依存のない自己完結型のPDFが必要な場合に価値があります。

カーティス・チャウ
テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

開発以外にも、CurtisはIoT(Internet of Things)への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。

準備はできましたか?
Nuget ダウンロード 17,012,929 | バージョン: 2025.12 リリース