Data URI 생성기 및 파서

텍스트나 파일에서 Data URI를 생성하고, 기존 Data URI를 파싱하여 콘텐츠와 메타데이터를 추출합니다.

100% 클라이언트 사이드 — 데이터가 기기를 떠나지 않습니다

Input Text or Data

생성 옵션

MIME 타입 (선택 사항)

출력을 Base64로 인코딩

생성된 Data URI

Data URIs in Code

How to programmatically generate and parse Data URIs.

JavaScript

// Generate a Data URI from text
const text = "Hello World";
const base64 = btoa(text);
const dataUri = `data:text/plain;base64,${base64}`;
console.log(dataUri); // data:text/plain;base64,SGVsbG8gV29ybGQ=

// Parse a Data URI
const uri = "data:text/plain;base64,SGVsbG8gV29ybGQ=";
const match = uri.match(/^data:([^;,]*)(;base64)?,(.*)$/);
if (match) {
  const mime = match[1];
  const isBase64 = !!match[2];
  const data = match[3];
  
  const decoded = isBase64 ? atob(data) : decodeURIComponent(data);
  console.log({ mime, decoded }); // { mime: "text/plain", decoded: "Hello World" }
}

자주 묻는 질문

아래에서 검색하거나 가장 일반적인 질문을 둘러보세요.

Data URI는 외부 리소스인 것처럼 웹 페이지에 데이터를 인라인으로 포함할 수 있게 해주는 스키마입니다. HTML이나 CSS에 이미지를 임베드할 때 자주 사용됩니다.

아닙니다. Data URI는 일반 텍스트나 URL 인코딩된 데이터도 포함할 수 있습니다. 하지만 Base64는 이미지와 같은 바이너리 파일을 임베드하기 위한 표준입니다.

Related Tools

Base64 Converter

Encode text to Base64 or decode Base64 to text — all in one tool

Image to Base64

Convert PNG, JPG, GIF, SVG, and WebP images to Base64 data URIs

CSS Data URI Converter

Convert images to Base64 data URIs for CSS background-image properties

MIME Type Inspector

Analyze Base64 strings to instantly detect their underlying MIME type using magic numbers