[자바스크립트] 선택한 이미지 base64 코드로 변환하여 화면에 보여주기

Head
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Javascript
	function readImage(input) {
		if ( input.files && input.files[0] ) {
			var FR= new FileReader();
			FR.onload = function(e) {
				 $('#img').attr( "src", e.target.result );
				 $('#source').text( e.target.result );
			};       
			FR.readAsDataURL( input.files[0] );
		}
	}

	$(document).ready(function(){
		$("#baseFile").change(function(){
			readImage( this );
		});

		$("#baseFile").trigger("change");

	});
Body
<p><img id="img" src="" /></p>
<p><input type='file' id="baseFile" /></p>
<div id="source" style="width:100%; height:600px; word-break:break-all;"></div>
설명

이미지를 base64 인코딩하여 보여줄 수가 있습니다.

보통 이미지들은 <img src=”http://…/flower.png”> 이런식으로 이미지의 경로를 표시하여 이미지를 화면에 보여주는데요.

 

base64-image-001

이런식으로 base64 코드로 이미지를 보여줄수도 있답니다.

보통 이미지를 DB로 저장했다가 화면에 불러와서 보여줄 때 사용하는 방식인데요.

이미지가 많을 경우는 이 방식이 속도가 느리다고 하니 사이트 상황에 맞게 사용하시면 될 것 같습니다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

 

아래 예제는 이미지를 선택하면 이미지를 base64로 인코딩하여 코드값으로 화면에 바로 출력하는 예제입니다. 이미지를 따로 정해진 경로에 저장하지 않아도 되므로 간편하게 사용할 수 있답니다.

 

<!DOCTYPE html>
<Html>
<head>
<meta charset='utf-8'>
<title>[자바스크립트] 선택한 이미지 base64 코드로 변환하여 화면에 보여주기</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style></style>
<script> function readImage(input) {
  if ( input.files && input.files[0] ) {
   var FR= new FileReader();
   FR.onload = function(e) {
     $('#img').attr( "src", e.target.result );
     $('#source').text( e.target.result );
   };      
   FR.readAsDataURL( input.files[0] );
  }
 }

 $(document).ready(function(){
  $("#baseFile").change(function(){
   readImage( this );
  });

  $("#baseFile").trigger("change");

 });</script>
</head>
<body>
<p><img id="img" src="" /></p>
<p><input type='file' id="baseFile" /></p>
<div id="source" style="width:100%; height:600px; word-break:break-all;"></div>
</body>
</html>

[출처] http://scriptmoa.cafe24.com/archives/scripts/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-base64-%EC%BD%94%EB%93%9C%EB%A1%9C-%EB%B3%80%ED%99%98%ED%95%98%EC%97%AC-%ED%99%94

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
660 머신러닝 토치 라이브러리 강좌 Torch Video Tutorials file 졸리운_곰 2018.03.13 46
659 머신러닝 라이브러리 토치 설치 : Torch Install file 졸리운_곰 2018.03.13 108
658 인공지능이 의식을 가질 수 있는가 file 졸리운_곰 2018.03.07 66
657 당근마켓에서 딥러닝 활용하기 - 불량 게시물 검사 file 졸리운_곰 2018.03.06 105
656 머신러닝 단기집중과정 by google 졸리운_곰 2018.03.04 64
655 한글 형태소 분석의 이해 NLP file 졸리운_곰 2018.03.04 47
654 루아 알고리즘 라이브러리 lua-algorithms stack queue tree file 졸리운_곰 2018.03.03 1371
653 VB.NET 알고리즘 구현 - Stack, Queue Data Type file 졸리운_곰 2018.02.27 292
652 TopCoder 사용 방법 (탑코더 시작하기) file 졸리운_곰 2018.02.26 334
651 MXNet을 활용한 이미지 분류 앱 개발하기 file 졸리운_곰 2018.02.25 93
650 [Artificial Intelligence / MXNet] MXNet을 이용한 Classification 문제 풀기 file 졸리운_곰 2018.02.25 32
649 [Artificial Intelligence / MXNet] Windows 환경에 MXNet 설치하기 file 졸리운_곰 2018.02.25 46
648 [Artificial Intelligence / MXNet] MXNet 소개 file 졸리운_곰 2018.02.25 41
647 Blender 단축키 file 졸리운_곰 2018.02.25 113
646 Blender 단축키 정리 모음 file 졸리운_곰 2018.02.25 146
» [자바스크립트] 선택한 이미지 base64 코드로 변환하여 화면에 보여주기 file 졸리운_곰 2018.02.21 218
644 [제목] 한번의 커넥션으로 이미지 모두 전송하는 방법 졸리운_곰 2018.02.21 74
643 data URIs로 image 생성하기 file 졸리운_곰 2018.02.21 38
642 Base64 이미지 사용하기 file 졸리운_곰 2018.02.21 70
641 html img , a에 직접 이미지, 파일 데이터 넣기 졸리운_곰 2018.02.21 61
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED