도구 · 제작기

PDF를 JPG·PNG로

프로젝트 소개

무엇인가

PDF를 쪽마다 JPG나 PNG 이미지로 바꾸는 도구입니다. 발표 자료 한 장을 메신저로 보내거나, 스캔한 서류를 이미지로만 받는 곳에 올리거나, 논문 그림 한 쪽을 슬라이드에 붙일 때 씁니다. 가장 큰 특징은 파일이 서버로 올라가지 않는다는 점입니다. PDF를 읽고 그리는 일을 모두 이 브라우저 안에서 하므로 계약서나 신분증 사본처럼 남에게 보내기 싫은 문서도 그대로 변환할 수 있습니다.

이렇게 써보세요

자료와 방법

PDF를 그리는 데는 모질라가 만든 오픈소스 PDF 엔진 pdf.js(3.11.174)를, ZIP을 묶는 데는 JSZip(3.10.1)을 씁니다. 두 라이브러리는 공개 CDN에서 받아 오고, 한글 글꼴이 들어간 PDF를 위해 pdf.js의 문자표(CMap)도 함께 불러옵니다. 각 쪽은 고른 해상도에 맞춰 흰 바탕 캔버스에 그린 뒤 브라우저의 이미지 저장 기능으로 JPG나 PNG가 됩니다. 이미 압축된 이미지라서 ZIP은 다시 압축하지 않고 묶기만 합니다. 이 페이지에는 사이트 공통의 방문 통계와 광고 스크립트가 있지만, PDF 내용과 변환 결과는 어디에도 전송하지 않습니다.

한계와 주의

PDF를 올리면 JPG나 PNG로 바꿔 주는 기능을 만들 수 있느냐는 질문에서 시작했다. 검색하면 이런 사이트는 수십 개가 나온다. 거의 다 파일을 서버로 올려서 변환한 뒤 다시 내려 주는 방식이다. 그래서 하나만 다르게 하기로 했다. 파일이 이 컴퓨터 밖으로 나가지 않게 하는 것이다.

서버 없이 그리기

PDF를 화면에 그리는 일은 파이어폭스에 들어 있는 pdf.js가 이미 잘한다. 쪽 하나를 캔버스에 그리고, 캔버스를 이미지 파일로 저장하면 끝이다. 해상도는 PDF 단위(1인치에 72포인트)에 배율을 곱하는 것으로 정했다. 150dpi면 약 2.08배, 300dpi면 약 4.17배로 그린다. A4 한 쪽을 300dpi로 그리면 2480 × 3508 픽셀이 된다.

아이폰 사파리의 캔버스 한도

큰 도면 PDF를 300dpi로 그리면 캔버스가 수억 화소가 된다. 아이폰 사파리는 캔버스 하나가 약 1,670만 화소를 넘으면 오류도 없이 빈 그림을 내놓는다. 그래서 1,600만 화소를 넘는 쪽은 그 안에 들어오도록 배율을 줄여서 그리고, 몇 쪽이 줄었는지 결과 메시지에 적게 했다. 다 그린 캔버스는 바로 크기를 0으로 만들어 메모리를 돌려준다. 수백 쪽을 연달아 바꿀 때 이게 없으면 휴대폰 탭이 죽는다.

한글 PDF와 비밀번호

한글 글꼴을 문서에 넣지 않은 PDF는 pdf.js가 문자표(CMap)를 따로 받아야 글자가 제대로 나온다. 이 파일들은 라이브러리와 같은 CDN에서 필요할 때만 받는다. 비밀번호가 걸린 PDF는 pdf.js가 비밀번호를 물어 오면 화면 안의 입력칸으로 받는다. 틀리면 같은 칸에서 다시 묻는다.

ZIP은 압축하지 않는다

여러 쪽은 ZIP 하나로 묶는다. JPG와 PNG는 이미 압축된 형식이라 ZIP에서 한 번 더 압축해도 거의 줄지 않고 시간만 든다. 그래서 묶기만 하는 방식(STORE)을 썼다. 파일 이름은 원래 PDF 이름 뒤에 쪽 번호를 세 자리로 붙여서, 탐색기에서 이름순으로 정렬해도 순서가 맞게 했다.

PDF를 JPG·PNG로 실제로 써보기 ghmun.com/pdf 가기 →