sitelink1  
sitelink2  
sitelink3  
sitelink4  
extra_vars5  
extra_vars6  

1. html syntax to use base64 data source

 

<img src="data:image/jpg;base64,[....base64 code...]">

 

 

2. web상에서 간단히 이미지 파일을 base64 바이트 배열 문자열로 변환하는 방법

 

    1) https://www.base64-image.de/ 로 접속

 

    2) 다음 단계에서 이미지 파일을 드래그엔드롭

스크린샷_2017-01-03_오후_3.21.34.png

 

    3) 다음 화면에서 copy image 나 show code 로 결과물을 확인

스크린샷_2017-01-03_오후_3.22.48.png

 

    4) show code 인 경우 다음과 같은 화면

스크린샷_2017-01-03_오후_3.22.56.png

 

3. java 프로그램에서 base64 변환 코드

 

    1) Servlet

public static String getBase64String( String[] imageUrl, String content ) throws Exception{
 
    if( imageUrl.length > 0 )
    {
        int imageUrlLength = imageUrl.length;
        String[] imageString = new String[ imageUrlLength ];
 
        for( int i = 0; i < imageUrlLength; i++ )
        {
            String filePathName = imageUrl[i].replace(“file:///”, “”);
            String fileExtName = filePathName.substring( filePathName.lastIndexOf(“.”) + 1);
 
            FileInputStream inputStream = null;
            ByteArrayOutputStream byteOutStream = null;
 
            try
            {
                File file = new File( filePathName );
 
                if( file.exists() )
                {
                    inputStream = new FileInputStream( file );
                    byteOutStream = new ByteArrayOutputStream();
 
                    int len = 0;
                    byte[] buf = new byte[1024];
                    while( (len = inputStream.read( buf )) != -1 ) {
                        byteOutStream.write(buf, 0, len);
                    }
 
                    byte[] fileArray = byteOutStream.toByteArray();
                    imageString[i] = new String( Base64.encodeBase64( fileArray ) );
 
                    String changeString = “data:image/”+ fileExtName +”;base64, “+ imageString[i];
                    content = content.replace(imageUrl[i], changeString);
                }
            }
            catch( IOException e)
            {
                e.printStackTrace();
            }
            finally
            {
                inputStream.close();
                byteOutStream.close();
            }
        }
    }
 
    return content;
}

 

    2) JSP

String base64Str = "...base64 code..."

byte[] imageInByte =  Base64.decodeBase64(base64Str);

response.setContentType("image/jpg");

response.setContentLength(imageInByte.length);

response.getOutputStream().write(imageInByte);

 

 

 

* 참고로 image element(<img>)의 src 속성에 base64 바이너리 데이터 스트링을 사용하는 방식은 IE9 이상 브라우저에서 지원한다

   IE8 이하 브라우저에서는 URL 길이 제한으로 인해 브라우저 엔진에서 URL 파싱 에러가 발생하기 때문이다

번호 제목 글쓴이 날짜 조회 수
57 Web Speech API Example 황제낙엽 2025.04.14 12
56 모바일과 데스크톱을 포괄하는 사용자의 터치 이벤트(onPointerTap) 황제낙엽 2025.04.09 21
55 Web RTC 에 관하여 황제낙엽 2024.11.20 79
54 HTML FRAMESET 태그 예제 황제낙엽 2020.11.06 99
53 네이버의 무료 나눔 글꼴 황제낙엽 2020.05.06 1210
52 HTTP/2 소개 황제낙엽 2018.10.12 144
51 Pragma와 Cache-Control 황제낙엽 2018.03.28 207
50 로드밸런싱(L4)+아파치를 운영시 etag제거로 캐시 성능 최적화 file 황제낙엽 2018.03.28 337
49 재미난 로그인 페이지 만들기 file 황제낙엽 2018.03.26 280
48 내 웹사이트의 속도를 빠르게! file 황제낙엽 2018.03.07 259
47 성능을 위한 초간단 HTTP 304 Not Modified 구현 방법 file 황제낙엽 2018.03.07 190
46 [MIME type/content type/media type] text/javascript와 application/javascript의 차이점 황제낙엽 2017.11.23 264
45 User Agent 에 관련된 링크 황제낙엽 2017.11.20 838
44 [보안] 혼합 콘텐츠(Mixed Content) 방지 황제낙엽 2017.04.13 235
» <img> image 엘리먼트에서 이미지를 base64로 인코딩해서 사용하기 file 황제낙엽 2017.04.01 1088
42 [ActiveX] CAB파일 수동 설치(레지스트리 등록) 방법 황제낙엽 2017.03.16 3369
41 ActiveX 에서 CLASSID 가 맞지 않을때의 현상 황제낙엽 2017.02.17 298
40 HTML5 강좌 23강 - 위치 정보(Geolocation API), 지도 서비스 file 황제낙엽 2016.12.03 306
39 HTML5 강좌 22강 - 파일접근, 파일정보 file 황제낙엽 2016.12.03 203
38 HTML5 강좌 21강 - 웹 스토리지 file 황제낙엽 2016.12.03 129