Base64를 이미지 변환기로
실시간 미리보기를 사용하여 Base64 문자열을 이미지로 변환하거나 PNG, JPG 또는 WebP로 다운로드하거나 이미지를 클립보드에 직접 복사할 수 있습니다. Base64를 이미지로, 이미지를 Base64로 양방향으로 변환합니다.
미리보기를 렌더링하려면 왼쪽에 Base64 문자열 붙여넣기
Base64를 이미지로 변환이란 무엇입니까?
Base64 은 RFC 4648. It takes binary data—such as image bytes representing PNG, JPEG, SVG, WebP, or GIF files—and translates it into a string of ASCII characters using a set of 64 characters (A-Z, a-z, 0-9, +, /, with = for padding).
변환 Base64를 이미지로 을 사용하여 ASCII 문자 문자열로 변환합니다. 변환
은 이 텍스트 표현을 브라우저, 운영 체제 및 이미지 뷰어가 표시하고 저장할 수 있는 이진 그래픽으로 다시 디코딩합니다. 이미지를 Base64 데이터 URI로 HTML, CSS, JSON 또는 이메일 메시지에 직접 삽입함으로써 개발자는 외부 HTTP 요청을 제거하고 이미지 인라인
이미지 데이터 URI의 구조 표준 Base64 이미지 문자열은:
data:data:image/png,image/jpeg,image/webp,image/svg+xmlimage/svg+xml;base64,— 페이로드 데이터가 Base64로 인코딩되었음을 나타냅니다.<data>— 이미지 파일의 Base64 인코딩 바이너리 바이트입니다.
Base64를 코드의 이미지로 변환하는 방법 다음은 일반 프로그래밍 언어에서 바로 사용할 수 있는 코드 스니펫입니다.
3. Python 3
4. PHP
// Convert Base64 string to an HTMLImageElement
function base64ToImage(base64String) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = base64String.startsWith('data:')
? base64String
: `data:image/png;base64,${base64String}`;
});
}
// Convert Base64 string to a Blob for download or uploading
function base64ToBlob(base64String, mimeType = 'image/png') {
const raw = base64String.replace(/^data:[^;]+;base64,/, '');
const byteCharacters = atob(raw);
const byteNumbers = new Uint8Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
return new Blob([byteNumbers], { type: mimeType });
}
🚀 웹 성능 및 중요한 CSS
const fs = require('fs');
function saveBase64Image(base64String, outputPath) {
// Strip data URI prefix if present
const base64Data = base64String.replace(/^data:image\/\w+;base64,/, '');
const buffer = Buffer.from(base64Data, 'base64');
fs.writeFileSync(outputPath, buffer);
console.log(`Saved image to ${outputPath}`);
}
CSS에 직접 작은 아이콘과 스플래시 로고를 삽입하면 추가 왕복 HTTP 요청이 방지되어 첫 번째 콘텐츠가 포함된 페인트(FCP) 시간이 단축됩니다.
import base64
import re
def base64_to_image(b64_string, output_filename='output.png'):
# Remove data:image/...;base64, header if present
data = re.sub('^data:image/.+;base64,', '', b64_string)
image_bytes = base64.b64decode(data)
with open(output_filename, 'wb') as f:
f.write(image_bytes)
# Usage
base64_to_image("iVBORw0KGgo...", "photo.png")
✉️ HTML 이메일 뉴스레터.
<?php
function base64ToImage($base64String, $outputFile) {
$data = explode(',', $base64String);
$binaryData = base64_decode(end($data));
file_put_contents($outputFile, $binaryData);
}
?>
브랜드 로고를 인라인 데이터 URI로 포함하면 이메일 클라이언트가 원격 이미지를 차단하거나 깨진 이미지 자리 표시자 상자를 표시하는 것을 방지할 수 있습니다.
📡 REST API 및 WebSocket
멀티파트 업로드가 불편한 JSON 페이로드를 통해 이미지 스냅샷이나 서명을 전송할 때 Base64가 업계 표준입니다.
🎨 캔버스 및 스크린샷 내보내기
HTML5 Canvas는
canvas.toDataURL()을 통해 그림과 차트 그래픽을 내보냅니다.
자주 묻는 질문(FAQ)
Base64 이미지가 원본 바이너리 파일보다 33% 더 큰 이유는 무엇입니까?
HTML5 Canvas exports drawings and chart graphics via canvas.toDataURL() as Base64 images for quick downloading or sharing.
당사 변환기는 모든 최신 래스터 및 벡터 이미지 형식을 지원합니다. PNG(
image/gif
image/bmp
image/x-icon
Our converter supports all modern raster and vector image formats: PNG (image/png), JPEG/JPG (image/jpeg), WebP (image/webp), GIF (image/gif), SVG (image/svg+xml), BMP (image/bmp), and ICO (image/x-icon).
SHA 해시 생성기
(adsbygoogle = window.adsbygoogle || []).push({});