Base64를 PNG로

Base64를 PNG로 변환하는 방법

1. 입력란에 Base64나 data:image/png;base64,... URI 전체를 붙여넣으세요. 대신 문자열이 담긴 .txt 파일을 열거나 놓아도 됩니다.
2. 상태 표시줄을 확인하세요. 올바른 Base64와 감지된 형식 PNG가 표시되어야 합니다. 미리보기에 이미지와 픽셀 크기가 나옵니다.
3. 필요하면 파일 이름을 바꾸세요. 확장자는 이미 png입니다.
4. 파일 다운로드를 누르세요.

데이터가 다른 형식으로 밝혀지면 미리보기 위에 “PNG이(가) 아니라 JPEG(으)로 보입니다.” 같은 안내가 .jpg(으)로 다운로드 버튼과 함께 나타납니다. 이름을 바꿔도 변환되는 것은 없으므로 보통은 실제 확장자로 저장하는 편이 낫습니다.

PNG Base64가 나오는 곳

PNG는 이미지를 텍스트로 넘겨주는 많은 도구의 기본 출력 형식입니다.

• 브라우저의 canvas.toDataURL()은 다른 형식을 지정하지 않으면 PNG data URI를 돌려줍니다. 서명 패드, 그리기 앱, 이미지를 내보내는 차트 라이브러리가 이를 기반으로 합니다.
• 브라우저 자동화: Selenium의 get_screenshot_as_base64()와 Puppeteer의 page.screenshot({ encoding: "base64" })는 PNG 스크린샷을 접두사 없는 순수 Base64로 돌려줍니다. 테스트 보고서는 이를 JSON이나 HTML에 넣는 경우가 많습니다.
• QR 코드, 바코드, 캡차, 지도, 이미지 생성용 API는 흔히 JSON 필드에 PNG를 담아 돌려줍니다.
• 인라인 아이콘이 든 HTML과 CSS, 보고서와 노트북의 단일 파일 내보내기.

이 모두를 그대로 붙여넣을 수 있습니다. 줄 바꿈, 끝의 = 누락, URL-safe 문자도 받으며, 패딩을 추가하면 상태 표시줄에 알려 줍니다.

PNG 헤더 읽기

PNG는 8바이트 시그니처로 시작하고, 이미지의 기본 속성을 담은 IHDR 청크가 뒤따릅니다. hex 덤프 표시를 누르면 볼 수 있습니다. 투명도가 있는 120×40 이미지라면 첫 두 줄은 다음과 같습니다.

00000000  89 50 4e 47 0d 0a 1a 0a  00 00 00 0d 49 48 44 52  |.PNG........IHDR|
00000010  00 00 00 78 00 00 00 28  08 06 00 00 00 35 ea 3e  |...x...(.....5.>|

색상 유형을 보면 어떤 종류의 PNG인지 알 수 있습니다. 00 회색조, 02 RGB, 03 팔레트(인덱스), 04 알파가 있는 회색조, 06 알파가 있는 RGB입니다. 최적화 도구가 만든 팔레트 PNG는 RGBA보다 훨씬 작은 경우가 많으므로, Base64를 짧게 해야 할 때 알아 두면 좋습니다.

너비가 수백만 픽셀처럼 크기가 터무니없다면 시그니처 뒤의 바이트가 손상된 것이며 미리보기도 실패합니다.

코드에서 PNG 검사하기

같은 헤더 필드는 이미지 라이브러리 없이 Python 몇 줄로 읽을 수 있습니다. 쉼표로 나누므로 순수 Base64와 data URI 모두에 쓸 수 있습니다.

import base64, struct

def png_info(b64: str) -> dict:
    data = base64.b64decode(b64.split(",", 1)[-1])
    if data[:8] != b"\x89PNG\r\n\x1a\n":
        raise ValueError("not a PNG")
    width, height, depth, color_type = struct.unpack(">IIBB", data[16:26])
    return {"width": width, "height": height, "bit_depth": depth, "color_type": color_type}

Node.js에서 파일을 쓰려면 fs.writeFileSync("shot.png", Buffer.from(b64, "base64"))면 충분합니다. Node의 Base64 디코더는 줄 바꿈을 건너뛰고 URL-safe 문자도 받습니다. 자세한 내용은 Python에서 Base64와 Node.js에서 Base64에 있습니다.

PNG가 디코딩되지 않거나 표시되지 않을 때

• “잘못된 문자” 오류. 문자열에 Base64가 아닌 것이 들어 있습니다. \/ 같은 JSON 이스케이프, HTML 엔티티, 로그 줄의 나머지 부분 등입니다. 오류 메시지에 위치가 나오며, Base64 복구가 흔한 원인을 정리해 줍니다.
• 이미지가 일부만 그려지거나 보이지 않습니다. 문자열이 잘렸습니다. 완전한 PNG는 IEND 청크로 끝납니다. 원본 파일 크기를 안다면 크기와 비교하세요.
• “PNG 형식으로 보이지 않습니다”. 바이트가 PNG 시그니처로 시작하지 않습니다. 암호화된 데이터, hex 같은 다른 인코딩, 또는 두 번 인코딩된 Base64인 경우가 전형적이며, 마지막 경우에는 다시 디코딩이 나타납니다.
• 미리보기는 되는데 다른 프로그램이 파일을 거부합니다. 여기 표시된 SHA-256을 그 프로그램이 받은 파일의 해시와 비교하세요. 일치한다면 디코딩된 파일은 올바르고 문제는 그 프로그램에 있습니다.

반대로 PNG를 인코딩하려면 PNG를 Base64로를 사용하세요.

자주 묻는 질문