온라인으로 이미지 인코딩

Aspose.SVG for .NET API로 이미지를 실시간으로 인코딩하세요! 로컬 파일 시스템에서 이미지를 로드하면 데이터 URI, Base64 이미지 소스 및 Base64 CSS 배경 소스로 즉시 결과를 얻을 수 있습니다. SVG, JPG, JPEG, PJP, PJPEG, PNG, BMP, XBM, GIF, TIFF, ICO, IFIF, WEBP 및 기타 이미지 형식이 지원됩니다.

URI 체계 정보

데이터 URI는 Base64 인코딩을 기반으로 웹 페이지에 이미지 및 기타 파일을 텍스트 문자열로 삽입하는 방법입니다. 데이터 URI 체계를 사용하면 HTML, CSS, JSON 또는 SVG 문서에 모든 이진 데이터를 포함할 수 있습니다. 예를 들어 외부 리소스에서 로드된 것처럼 웹 페이지에 이미지를 포함할 수 있지만 파일의 URL을 지정하는 대신 이미지의 Base64 인코딩 콘텐츠를 삽입합니다. 데이터 URI 체계는 RFC 2397에서 정의되었으며 2022년 현재 대부분의 주요 브라우저에서 완전히 지원됩니다. 데이터 URI 사용의 주요 이점은 이미지가 이미 HTML 문서에 포함되어 있기 때문에 브라우저가 파일을 검색하기 위해 추가 웹 요청을 할 필요가 없기 때문에 페이지 로딩 속도가 빨라진다는 것입니다.

데이터 URI의 구문은 다음과 같습니다: data:[<mime type>][;charset=<charset>][;base64],<encoded data>.

Base64로 인코딩된 데이터의 크기가 33% 증가하므로 작은 이미지에만 데이터 URI를 사용하는 것이 좋습니다. 큰 Base64 이미지는 HTML에서 많은 코드를 생성하므로 성능 이점이 손실됩니다. 이미지를 Base64로 변환하고 인코딩된 문자열을 사용하여 텍스트 파일에 삽입해야 하는 경우 먼저 모든 장단점을 알아보십시오.


C#에서 이미지를 Base64로 변환하는 방법

이미지를 Base64 문자열로 변환하기 위해 Aspose.SVG for .NET API를 사용합니다. C# 플랫폼용 문서 조작 API를 사용합니다. PNG 이미지를 Base64로 인코딩하고 Base64 문자열을 SVG 문서에 데이터 URI로 포함하는 예를 고려합니다. 이러한 작업은 몇 줄의 코드로 수행할 수 있습니다.


이미지를 Base64 문자열로 변환하고 SVG 파일에 포함하는 C# 코드

    // Open a binary file - raster 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 PNG 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");



C#에서 이미지를 Base64로 변환하는 단계

  1. 변환할 이미지를 엽니다. ReadAllBytes(path) 메서드를 사용하여 PNG 이미지를 열고 파일 내용을 바이트 배열로 읽습니다.
  2. SVGDocument 클래스의 새 인스턴스를 초기화합니다.
  3. SVGDocument 클래스의 CreateElementNS(namespaceURI, qualifiedName) 메서드를 사용하여 이미지 인스턴스. ’namespaceURI’는 W3C SVG 사양에 대한 참조를 설정합니다. qualifiedName에는 이미지 요소의 문자열 태그 이름이 포함되어야 합니다.
  4. 이미지를 Base64로 변환합니다. ToBase64String(bytes) 메서드를 호출하여 8비트 정수 배열을 base64 숫자로 인코딩된 해당 문자열 표현으로 변환합니다.
  5. AppendChild(node) 메서드를 사용하여 이미지 요소를 SVG 문서에 추가합니다.
  6. Save(path) 메서드를 호출하여 SVG 문서를 저장합니다.

데이터 URI의 장단점

데이터 URI는 웹 페이지에 이미지를 삽입하는 현명한 방법을 제공합니다. URI 체계는 여러 가지 방법으로 사용할 수 있습니다. 그러나 어쨌든 장단점이 있습니다.

장점:

  • 페이지 로딩 속도 향상. 이미지가 이미 HTML 문서에 포함되어 있기 때문에 브라우저는 파일을 검색하기 위해 추가 웹 요청을 할 필요가 없습니다.
  • 성능 향상. 브라우저는 더 적은 CPU 시간을 필요로 합니다.
  • 웹 페이지는 외부 파일과 독립되어 오프라인에서도 쉽게 공유할 수 있습니다.

단점:

  • Base64로 인코딩된 데이터의 크기는 바이너리 이미지보다 1/3 더 큽니다.
  • 인코딩된 이미지는 브라우저에 의해 캐시되지 않으며 해당 페이지를 방문할 때마다 다운로드됩니다.
  • 인코딩된 이미지는 Base64 문자열을 먼저 디코딩해야 하므로 편집이 어렵습니다.
  • Base64 이미지는 이미지 검색 결과에 나타나지 않기 때문에 Google에서 색인을 생성하지 않습니다.

온라인 Base64 인코더

Aspose.SVG는 바이너리 데이터 인코딩 및 디코딩을 위한 무료 온라인 애플리케이션을 제공합니다.

  • Base64 인코더 는 일반 Base64, JSON, XML, URI 또는 ​​CSS와 같은 다양한 출력 형식으로 바이너리 데이터를 인코딩할 수 있는 도구 세트입니다.
  • 이미지 Base64 디코더 는 URI 문자열을 입력 컨트롤에 붙여넣어 Base64 문자열이 포함된 데이터 URI를 이미지로 변환합니다.

당사의 브라우저 기반 애플리케이션은 Windows, Linux, Mac OS, Android 및 iOS를 포함한 모든 플랫폼에서 작동합니다. 등록, 플러그인 또는 소프트웨어 설치가 필요하지 않습니다. 온라인 Base64 인코딩/디코딩 도구를 안전하고 안전하며 쉽게 사용하십시오!

Base64 인코딩 사용 예

Base64 이미지를 SVG 문서에 삽입하는 SVG 코드

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

Base64 이미지를 삽입하는 HTML 코드

<body>
    <div>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..." alt="Red circle">
    </div>
</body>

Base64 이미지를 배경 이미지로 삽입하는 CSS 코드

.class {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg...');
}

XML 문서에 Base64 이미지를 포함하는 XML 코드

<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/png">iVBORw0KGgoAAAANSUhEUgAAACAAAAAg...</image>
</root>

Base64 이미지를 JSON 문서에 삽입하는 JSON 코드

{
  "image": {
    "mime": "image/png",
    "data": "iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..."
  }
}



자주하는 질문

1. Image을 Base64로 변환하려면 어떻게 해야 하나요?

Aspose.SVG를 사용하면 온라인 또는 프로그래밍 방식으로 Image을 Base64 문자열로 변환할 수 있습니다. 예를 들어 온라인 Image 인코더 를 사용하여 Image을 실시간으로 인코딩할 수 있습니다. 파일을 빠르고 고품질로 변환합니다. Image을 업로드하고 인코딩하면 몇 초 안에 결과를 얻을 수 있습니다! 반면에 Aspose.SVG for .NET API를 사용하여 프로그래밍 방식으로 Image을 Base64로 변환할 수 있습니다.

2. Base64 인코딩이 필요한 이유는 무엇입니까?

역사적으로 많은 데이터 전송 및 저장 형식은 이진 코드(HTML, XML, 전자 메일 등) 대신 텍스트를 사용합니다. 데이터 전송 형식이 텍스트 기반이지만 바이너리 데이터를 전송해야 하는 경우에는 어떻게 합니까? 여기에서 Base64 인코딩이 시작됩니다. 인터넷을 통해 데이터를 보낼 때 이진 기호의 잘못된 해석을 방지하려면 문자로 인코딩해야 합니다. Base64 인코딩의 몇 가지 일반적인 응용 프로그램: 이미지에 대한 데이터 URI 체계(CSS, HTML, JavaScript); 사진 및 기타 이진 데이터를 XML로 전송; 이미지를 데이터베이스에 저장; 이메일 메시지에 이미지 포함

3. 데이터 URI를 지원하는 브라우저는 무엇입니까?

데이터 URI는 웹 페이지에 이미지 및 기타 파일을 삽입하는 가장 빠르고 쉬운 방법입니다. 데이터 URI는 주요 최신 브라우저인 Chrome, Firefox, Safari, Edge, Opera 및 IE8+에서 지원됩니다.

4. Base64 인코딩이란 무엇입니까?

Base64는 이진 데이터를 ASCII 문자열 형식으로 나타내는 이진-텍스트 인코딩 체계입니다. Base64 인코딩은 일반적으로 텍스트 데이터와 함께 작동하도록 설계된 미디어를 통해 저장하고 전송해야 하는 이진 정보를 인코딩해야 하는 경우에 사용됩니다.

.NET SVG API 시작하기

확장 가능한 벡터 그래픽 및 응용 프로그램 개발에 관심이 있는 경우 C# 및 기타 .NET 프로그래밍 언어용 강력한 인터페이스 세트와 함께 .NET API용 유연한 고속 Aspose.SVG를 설치하십시오.
nuget install Aspose.SVG로 명령줄에서 설치하거나 Install-Package Aspose.SVG를 사용하여 Visual Studio의 패키지 관리자 콘솔을 통해 설치합니다. 또는 다운로드 에서 오프라인 MSI 설치 프로그램 또는 DLL을 ZIP 파일로 가져옵니다. .NET API용 Aspose.SVG는 독립 실행형 라이브러리이며 의존하지 않습니다. SVG 문서 처리를 위한 모든 소프트웨어.
C# 라이브러리 설치 및 시스템 요구 사항에 대한 자세한 내용은 Aspose.SVG 문서 를 참조하십시오.

기타 지원되는 Base64 인코더

Image를 Base64 문자열로 변환할 수 있습니다. JPG, PNG, BMP, GIF, TIFF, ICO 및 SVG 형식이 지원됩니다.

JPG to Base64 (JPEG Image)
PNG to Base64 (Portable Network Graphics)
BMP to Base64 (Bitmap Image)
SVG to Base64 (Scalable Vector Graphics)
TIFF to Base64 (Tagged Image Format)
GIF TO Base64 (Graphical Interchange Format)
ICO to Base64 (Computer Icons Format)
Image to Base64 (Binary Image)