[자바스크립트] 선택한 이미지 base64 코드로 변환하여 화면에 보여주기
2018.02.21 21:31
[자바스크립트] 선택한 이미지 base64 코드로 변환하여 화면에 보여주기
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></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");
});
<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 코드로 이미지를 보여줄수도 있답니다.
보통 이미지를 DB로 저장했다가 화면에 불러와서 보여줄 때 사용하는 방식인데요.
이미지가 많을 경우는 이 방식이 속도가 느리다고 하니 사이트 상황에 맞게 사용하시면 될 것 같습니다.
아래 예제는 이미지를 선택하면 이미지를 base64로 인코딩하여 코드값으로 화면에 바로 출력하는 예제입니다. 이미지를 따로 정해진 경로에 저장하지 않아도 되므로 간편하게 사용할 수 있답니다.
|
<!DOCTYPE html> $(document).ready(function(){ $("#baseFile").trigger("change"); });</script> |
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
