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

C#でDataURIsを使用して画像を埋め込む & VB PDFレンダリング

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

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

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

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

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

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

  1. IronPDF をNuGetパッケージマネージャでインストール

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

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

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

2 番目に、DataURIs PDF が完全に自己完結的であることを確認します。 生成されたPDFを共有または配布する場合、画像リンクの破損やリソースの欠落は問題になりません。 このため、DataURIs は、アーカイブまたは電子メールによる配布を必要とするレポート、請求書、またはドキュメントの生成に最適です。

3 番目に、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

既存の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,803,474 | バージョン: 2026.3 リリース
Still Scrolling Icon

まだスクロールしていますか?

すぐに証拠が欲しいですか? PM > Install-Package IronPdf
サンプルを実行するHTML が PDF に変換されるのを確認します。