[HTML]
Data URI scheme 이미지 출력
2016-12-06
참조 : https://en.wikipedia.org/wiki/Data_URI_scheme
위의 참고와 같은 방식으로 이미지를 데이터화 해서 html태그에 사용이 가능하다.
일단 이미지를 data화 시켜야 하는데, 리눅스에 sharutils가 설치되어 있다면, 이미지를 특정 형식으로 encode하는게 가능하다.
일단 sharutils를 설치후에, uuencode명령어를 이용하여 -m 옵션(해당 옵션은 base64로 encode 가능하다)으로 이미지를 데이터화 시키면 아래와 같은 결과가 나온다.
위에서 나온 data형식을,
이부분에서 주의해야 할 사항이 있는데, 실제 데이터로 사용할때, 맨 마지막줄에 표시된 "===="부분은 빼고 사용해야 한다.
이 마지막 부분은 파일에 따라서 표시 되는게 다른데, 이 부분을 빼고 데이터로 집어 넣어야 실제 사용시 제대로 사용이 가능하다.
위의 참고와 같은 방식으로 이미지를 데이터화 해서 html태그에 사용이 가능하다.
일단 이미지를 data화 시켜야 하는데, 리눅스에 sharutils가 설치되어 있다면, 이미지를 특정 형식으로 encode하는게 가능하다.
yum install sharutils
일단 sharutils를 설치후에, uuencode명령어를 이용하여 -m 옵션(해당 옵션은 base64로 encode 가능하다)으로 이미지를 데이터화 시키면 아래와 같은 결과가 나온다.
# uuencode -m test.jpg tes begin-base64 644 tes /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMD AwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/ 2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM DAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAaABkDASIAAhEBAxEB/8QA HwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUF BAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkK FhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1 dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXG x8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEB AQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAEC AxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRom JygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOE hYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU 1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9LP8AgtH4 ovNQ+F/gTwFpdvfXOseMtf328VueLkQoIxCRn5maW6gKjplPUCvd/iZ+098K f2OrLQvDHiLXrfw3HFYRx6dYpa3F00dtGPLTiJHKqNm0FsZ2nrg18TftH/AT xD+y3+038B9Q8b/FvWPHljeeJ47j7RrbSQw6NHBd2TSuGluJVVWDgsflAEQz nt91eV8If2odQ8zb8N/iJdaXHt3YstXks0Y9M/OUUn6Amv0/NsLgsPlmApSc q2GSqylOmnG8nLlXxxdrcqWqvvbc/EeH8dmWLzvNa8FDD4xuhCNOs1PlhGHO /wCHNOXNzuXuystL6pm58G/jj4V/aC8H/wBveD9Yh1rSRO1s0yRyRGOVQpKM kiqysAynBA4YHoa6yvzl/wCCWP7afwz/AGcP2etY0Xxp4mGjapeeIp72KD+z 7q4LQtbWqB8xROBlo3GCc/L0r6V/4eq/AT/ofP8Ayiaj/wDI9eNn3BOY4XMK uHwWGqzpxdoy5JO69VGz+R9Jwr4mZPjspoYvMsZQpVpxTlD2kI8r7WlLmXo9 T0f47fsweBf2mLPTYPG+gR65HpDvJZk3M9u8BcKHw0To2G2rkE4+UccCuJ0/ 4C/CH9gHwj4o+IWh+HU0P+z9Ldbqb7fcXEk8e5WWBPPkYBpJFjUAYyxUV7pX yH/wWsv57T9kXTo4ZpYo7rxLaxTKjlVmQQXLhWHcblVsHjKg9QK4eHK2LxuK oZPKvNUKklFxUny2bu/dvbX031PQ4xw2X5bgcVxFDC05YmlCUozcI894xsve tzaaLfbQ5X/gkZ+zb4V8a/stXmseLvAvhvWrjUNfuXsLzVdIgupJbZYoI/ke RSdgmSYYBxuD+9fUn/DI/wAKP+iY/D3/AMJyz/8AjdQ/sd2MOn/smfDKO3hi gjbwtpspWNAoLvaxu7YHdmYsT3JJ6mvSK04nz3GVs2xNSNSUVzySSk7JJ2XX yM+CeF8uw2QYOlOlCb9nBuThG7bSb6d2f//Z ====
위에서 나온 data형식을,
data:[<mediatype>][;base64],<data>이부분에서 주의해야 할 사항이 있는데, 실제 데이터로 사용할때, 맨 마지막줄에 표시된 "===="부분은 빼고 사용해야 한다.
이 마지막 부분은 파일에 따라서 표시 되는게 다른데, 이 부분을 빼고 데이터로 집어 넣어야 실제 사용시 제대로 사용이 가능하다.
<img src="data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMD
AwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/
2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM
DAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAaABkDASIAAhEBAxEB/8QA
HwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUF
BAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkK
FhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1
dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXG
x8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEB
AQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAEC
AxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRom
JygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOE
hYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU
1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9LP8AgtH4
ovNQ+F/gTwFpdvfXOseMtf328VueLkQoIxCRn5maW6gKjplPUCvd/iZ+098K
f2OrLQvDHiLXrfw3HFYRx6dYpa3F00dtGPLTiJHKqNm0FsZ2nrg18TftH/AT
xD+y3+038B9Q8b/FvWPHljeeJ47j7RrbSQw6NHBd2TSuGluJVVWDgsflAEQz
nt91eV8If2odQ8zb8N/iJdaXHt3YstXks0Y9M/OUUn6Amv0/NsLgsPlmApSc
q2GSqylOmnG8nLlXxxdrcqWqvvbc/EeH8dmWLzvNa8FDD4xuhCNOs1PlhGHO
/wCHNOXNzuXuystL6pm58G/jj4V/aC8H/wBveD9Yh1rSRO1s0yRyRGOVQpKM
kiqysAynBA4YHoa6yvzl/wCCWP7afwz/AGcP2etY0Xxp4mGjapeeIp72KD+z
7q4LQtbWqB8xROBlo3GCc/L0r6V/4eq/AT/ofP8Ayiaj/wDI9eNn3BOY4XMK
uHwWGqzpxdoy5JO69VGz+R9Jwr4mZPjspoYvMsZQpVpxTlD2kI8r7WlLmXo9
T0f47fsweBf2mLPTYPG+gR65HpDvJZk3M9u8BcKHw0To2G2rkE4+UccCuJ0/
4C/CH9gHwj4o+IWh+HU0P+z9Ldbqb7fcXEk8e5WWBPPkYBpJFjUAYyxUV7pX
yH/wWsv57T9kXTo4ZpYo7rxLaxTKjlVmQQXLhWHcblVsHjKg9QK4eHK2LxuK
oZPKvNUKklFxUny2bu/dvbX031PQ4xw2X5bgcVxFDC05YmlCUozcI894xsve
tzaaLfbQ5X/gkZ+zb4V8a/stXmseLvAvhvWrjUNfuXsLzVdIgupJbZYoI/ke
RSdgmSYYBxuD+9fUn/DI/wAKP+iY/D3/AMJyz/8AjdQ/sd2MOn/smfDKO3hi
gjbwtpspWNAoLvaxu7YHdmYsT3JJ6mvSK04nz3GVs2xNSNSUVzySSk7JJ2XX
yM+CeF8uw2QYOlOlCb9nBuThG7bSb6d2f//Z" >