input 태그 image를 base64 형식으로 변경하기

원하는 작업 형식

 

여기서 image를 base64 형식으로 변경하고 img 태그로 미리보는 과정을 찾아봤다.

완성된 코드만 볼 예정이면 맨 아래 코드만 보면 됩니다

 

---

먼저 html과 css의 구조는 이러함

 

 

<div>
	<img id="image" src="" alt="">
	<input type="file" onchange="imageToBase64(this)" />
</div>

body, html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
div {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #f2f2f2;
}
img {
	min-width: 400px;
	max-width: 600px;
	min-height: 200px;
	box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.2);
	background: #fff;
	margin-bottom: 20px;
}

 

input 태그에 파일을 업로드하면 imageToBase64 함수를 실행시켜서

base64로 변환된 값을 img 태그에서 미리 보여줄 예정

 

먼저 input 태그에 이미지 파일을 넣어보자.

imageToBase64로 가져온 this의 값을 살펴보면

function imageToBase64 (t) {
	console.dir(t)
}

 

뭔가 많다.

이 중에서 input 태그에 들어있는 files 값을 통해 input에 들어가 있는 파일의 정보를 가져올 수 있다.

 

function imageToBase64 (t) {
	console.dir(t.files)
}

 

파일에 대한 정보들이 나와 있다.

이제 이 값을 통해 FileReader 객체를 통해 base64로 변경 시키면 됨

 

function imageToBase64 (t) {
	var reader = new FileReader();
	reader.readAsDataURL(t.files[0]);
	reader.onload = function (e) {
		console.log(e);
	}
}

 

여기서 target.result 를 보면 base64로 변환된 값을 볼 수 있다.

 

이제 이 값을 img 태그에 넣어서 미리보기를 출력시켜보자.

 

function imageToBase64 (t) {
	var reader = new FileReader();
	reader.readAsDataURL(t.files[0]);
	reader.onload = function (e) {
		document.getElementById('image').src = e.target.result;
	}
}

 

 

끝