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

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

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

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

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

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

 

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