1. IronPDF
  2. 방법
  3. DataUris 및 이미지 임베딩
C#에서 데이터 URI를 사용하여 이미지를 삽입하는 방법 | IronPDF

C# 및 VB PDF 렌더링에서 DataURI를 사용하여 이미지 삽입

커티스 차우
커티스 차우
업데이트됨:
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 문서에 직접 삽입할 수 있도록 허용합니다.

빠른 시작: DataURI를 사용하여 PDF에 이미지 삽입

IronPDF를 사용하여 DataURIs를 이용해 이미지를 삽입하여 HTML 콘텐츠를 PDF 문서로 변환합니다. 이 가이드는 간단하고 효율적인 코드를 사용하여 이미지가 포함된 PDF를 렌더링하는 방법을 보여줍니다. IronPDF는 이미지 무결성을 유지하면서 HTML을 PDF로 변환합니다. 다음은 최소한의 코드로 이미지를 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
### 최소 워크플로우(5단계)
  1. NuGet에서 IronPDF를 다운로드하세요.
  2. `ReadAllBytes` 메서드를 사용하여 이미지 바이트를 읽습니다.
  3. `ToBase64String` 메서드를 사용하여 바이트를 Base64로 변환합니다.
  4. img 태그에 base64 정보를 포함하세요
  5. HTML을 PDF로 렌더링합니다.


DataURI를 사용하여 PDF에 이미지를 삽입하는 방법은 무엇인가요?

DataURIs를 사용하여 이미지를 임베드하면 외부 파일을 참조하지 않고 HTML 마크업 내에 이미지를 직접 포함할 수 있습니다. 이 접근 방식은 클라우드 환경, 분산 시스템에서 PDF를 생성하거나 모든 리소스가 자체적으로 포함되도록 보장할 때 효과적입니다. IronPDF의 HTML-PDF 변환 기능은 DataURIs를 완벽하게 지원하여 이미지를 포함한 전문적인 PDF 생성을 가능하게 합니다.

이 과정은 이미지 데이터를 읽고, 이를 base64 형식으로 변환한 다음, HTML img 태그 안에 삽입하는 세 단계로 구성됩니다. 이 방법은 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 생성의 안정성과 이식성을 향상시킵니다. 이는 파일 시스템 접근이 제한되거나 성능에 민감한 Azure 또는 AWS Lambda 와 같은 클라우드 환경에서 매우 중요합니다.

둘째, DataURIs 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

기존 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를 동적으로 생성하고 제공하는 웹 애플리케이션을 구축할 때 효과적입니다.

워터마킹, 디지털 서명, 양식 생성 등 고급 PDF 조작 기술을 위해 IronPDF는 강력한 PDF 솔루션을 구축하는 데 필요한 포괄적인 문서와 예제를 제공합니다.

자주 묻는 질문

DataURI란 무엇이며 PDF 생성에 왜 사용해야 할까요?

DataURI는 데이터를 base64로 인코딩된 문자열로 HTML 또는 CSS 코드에 직접 삽입하는 방식으로, 별도의 이미지 파일이 필요하지 않습니다. IronPDF는 DataURI를 완벽하게 지원하므로 클라우드 환경, 분산 시스템 또는 외부 파일 종속성 없이 자체 포함 PDF가 필요한 경우에 이상적입니다.

PDF에 이미지를 삽입하기 위한 DataURI 형식으로 변환하려면 어떻게 해야 하나요?

IronPDF를 사용하여 이미지를 DataURI로 변환하는 과정은 세 단계로 이루어집니다. 첫째, System.IO.File.ReadAllBytes()를 사용하여 이미지 바이트를 읽습니다. 둘째, Convert.ToBase64String()을 사용하여 바이트를 base64로 변환합니다. 마지막으로, 'data:image/png;base64,[base64string]' 형식으로 base64 문자열을 HTML img 태그에 삽입합니다.

DataURI로 이미지를 임베드할 때 지원되는 이미지 형식은 무엇입니까?

IronPDF는 PNG, JPEG, GIF, SVG를 포함한 다양한 이미지 형식을 DataURI로 임베드하는 것을 지원합니다. 이러한 유연성을 통해 다양한 이미지 유형을 사용하면서도 PDF 생성 워크플로를 완벽하게 제어할 수 있습니다.

DataURI를 사용하여 하나의 PDF에 여러 이미지를 삽입할 수 있습니까?

네, IronPDF를 사용하면 DataURI를 통해 하나의 PDF 문서에 여러 이미지를 삽입할 수 있습니다. 각 이미지를 base64 형식으로 변환한 후 HTML 마크업에 포함하고 IronPDF의 ChromePdfRenderer로 렌더링하면 됩니다.

파일 참조 대신 DataURI를 사용하면 성능에 영향을 미칠까요?

DataURI는 base64 인코딩으로 인해 HTML 문자열 크기를 증가시키지만, IronPDF는 이러한 변환을 효율적으로 처리합니다. 특히 클라우드 또는 분산 환경에서 외부 종속성 없이 자체 포함된 PDF가 필요한 경우 이러한 절충은 충분히 가치가 있습니다.

커티스 차우
커티스 차우
  지금 바로 엔지니어링 팀과 채팅하세요
기술 문서 작성자

커티스 차우는 칼턴 대학교에서 컴퓨터 과학 학사 학위를 취득했으며, Node.js, TypeScript, JavaScript, React를 전문으로 하는 프론트엔드 개발자입니다. 직관적이고 미적으로 뛰어난 사용자 인터페이스를 만드는 데 열정을 가진 그는 최신 프레임워크를 활용하고, 잘 구성되고 시각적으로 매력적인 매뉴얼을 제작하는 것을 즐깁니다.

커티스는 개발 분야 외에도 사물 인터넷(IoT)에 깊은 관심을 가지고 있으며, 하드웨어와 소프트웨어를 통합하는 혁신적인 방법을 연구합니다. 여가 시간에는 게임을 즐기거나 디스코드 봇을 만들면서 기술에 대한 애정과 창의성을 결합합니다.

시작할 준비 되셨나요?
Nuget 다운로드 17,527,568 | 버전: 2026.2 방금 출시되었습니다