웹브라우즈별 data URI scheme 테스트

제가 필요해서 몇가지를 테스트를 해 보았습니다.

즉 이미지를 https://t1.daumcdn.net/cfile/tistory/24083B4E56E668962F"target_resize_image[]" onclick="image_window(this)" style="cursor: pointer;" src="https://t1.daumcdn.net/cfile/tistory/2535F43B56E6689612" height="100" width="100">

위의 이미지는 data:image/gif;base64 의 이미지를 src 에 바로 넣어 준 경우 입니다.

위의 경우 사용가능 한 웹 브라우즈는

FF 계열(크롬, 오페라, 사파리 등)
IE 8 >=

에서만 가능하였고 그 외 웹 브라우즈에서는 엔팍으로 나오더군요..

그래서 생각 한것이 base64 decode 프로그램을 사용하는 것입니다.

즉 다음과 같이 테스트를 해 보았습니다.



위의 그럼은 http://dean.edwards.name 이라는 도메인에서 가지고 있는 프로그램을 이용해서 base64 encode 된 이미지를 다시 decode 해서 보여 주는 방식을 채택하였습니다.

네 결과는 모든 웹 브라우즈에서 다 정상적으로 나옵니다. 하지만 이 경우 치명적은 결함이 있습니다. 네트웍의 부하가 2배로 증가합니다. 즉 필요없는 네트웍 부하가 발생한다는 겁니다.

그리고 부가적으로 발견한 문제점은 100x100 이상의 크기에서는 오류가 난다는 문제점이 있습니다. 그 원인은 아직 찾지를 못했습니다만 아무래도 웹브라우즈가 uri 를 전송하는 과정에서 get 방식으로 보낼때의 data length 를 초과해서 그렇게 되지 않았나 싶군요.

혹시나 저 처럼 고민하는 사람이 있지 않을까 해서 실패 담을 팁으로 올려 봅니다.

참고로 이 부분이 필요 했던 프로그램을 알려 드립니다.

http://service2.cafen.net/example/chart2.html

에서 Image View 부분인데 flash chart 를 이미지로 보여 주는 부분인데 플래쉬에서 data:image/png 로는 받을 수 있는데 해당 부분을 웹 브라우즈로 표현할 방법이 막막하더군요.

결국은 다른 방법으로 우회하는 방법으로 해결 하였습니다. 즉.. 그냥 서버에 데이타를 post 로 쏴 버리고 해당 이미지는 onerror 이벤트로 캐취하고 5번을 retry 하도록 해 보았습니다. 한마디로는 무식한 방법이죠..

개발하면서의 생각한 문제를 짧게 한번 적어 봅니다.

그리고 예전에 약속한대로 OFC2JS 의 소스를 공개해 드리겠습니다. 소스는 자료실에 등록해 달라고 오늘 중으로 보내 놓겠습니다.

출처 :
http://service2.cafen.net/example/chart2.html
http://openapi2.cafen.net