👉🏻image를 Blob 객체 url로 바꾸어 img 띄우기 오늘은 Blob 객체를 local window에서만 사용하는 url로 바꾸어 html의 img 태그의 src 속성에 사용해보는 시간을 가져보겠습니다!
👉🏻createObjectURL Blob 객체를 url로 만들때는 URL.createObjectURL() 이 메소드를 사용합니다.
👉🏻revokeObjectURL createObjectURL를 통해 만들어진 url는 해당 브라우저가 존재한 상태에서 revokeObjectURL 메소드로 url을 무효화 시키지 않으면 js 엔진에서 garbage collect를 시키지 않고 계속 변수가 남아 메모리 누수가 됩니다.
예시 살펴보겠습니다.
<body>
<form>
<p>
<label for="image">Image:</label>
<br />
<input type="file" name="image" id="image" accept="image/png, image/jpeg"/>
</p>
</form>
<div id="image_preview">
<img src="#" />
<br />
<a href="#">Remove</a>
</div>
</body>(() => {
const $ = (el) => document.querySelector(el);
const arr = ['gif', 'png', 'jpg', 'jpeg'];
let blobURL;
$('#image').addEventListener('change', function(e) {
const ext = e.currentTarget.value.split('.').pop().toLowerCase(); // 확장자
if(!arr.includes(ext)){
window.alert('이미지 파일이 아닙니다! (gif, png, jpg, jpeg 만 업로드 가능)');
return;
} else {
blobURL = window.URL.createObjectURL($('#image').files[0]); //createObjectURL는 매번 호출할 때마다 새로운 객체 URL을 생성합니다.
$('#image_preview img').setAttribute('src', blobURL);
}
});
//createObjectURL 사용을 종료하려면 revokeObjectURL 메소드를 사용하여 브라우저가 더이상 이 객체를 메모리에 들고 있지 않아도 된다고 알려야합니다.
$('#image_preview a').addEventListener('click', function() {
URL.revokeObjectURL(blobURL); //전달한 URL 초기화
$('#image_preview img').setAttribute('src', '');
return;
});
})();👉🏻파일공유 간단한 예시라서 html한곳에만 작업했습니다~😃😃
👉🏻ES6 class 으로 변경 연습 용도로 ES6 class으로도 변경해봤습니다.
class Unique {
constructor(extValue){
this.extValue = extValue;
this.blobURL = '';
this.$ = (el) => document.querySelector(el);
this.create = this.create.bind(this); //create 메소드에서 this 대상자 변경
this.remove = this.remove.bind(this); //remove 메소드에서 this 대상자 변경
}
create(e){
const ext = e.currentTarget.value.split('.').pop().toLowerCase(); // 확장자
if(!this.extValue.value.includes(ext)){
window.alert('이미지 파일이 아닙니다! (gif, png, jpg, jpeg 만 업로드 가능)');
return;
} else {
this.blobURL = window.URL.createObjectURL(this.$('#image').files[0]); //createObjectURL는 매번 호출할 때마다 새로운 객체 URL을 생성합니다.
this.$('#image_preview img').setAttribute('src', this.blobURL);
}
}
remove(){ //createObjectURL 사용을 종료하려면 revokeObjectURL 메소드를 사용하여 브라우저가 더이상 이 객체를 메모리에 들고 있지 않아도 된다고 알려야합니다.
URL.revokeObjectURL(this.blobURL); //전달한 URL 초기화
this.$('#image_preview img').setAttribute('src', null);
return false; //기본 이벤트 막음
}
}
export default Unique;👉🏻파일공유 연습 용도로 ES6 class으로 변경한것 파일 공유합니다~
이미지 파일 미리보기.zip
0.00MB
👉🏻참고링크
URL.createObjectURL() - Web API | MDN
URL.createObjectURL() 정적 메서드는 주어진 객체를 가리키는 URL을 DOMString으로 반환합니다. 해당 URL은 자신을 생성한 창의 document가 사라지면 함께 무효화됩니다.
developer.mozilla.org
image Blob 객체를 url로 바꾸어 img 띄우기, javascript, JavaScript, blob, createObjectUrl, revokeObjectUrl, react, vue,
image Blob 객체를 url로 바꾸어 img 띄우기, javascript, JavaScript, blob, createObjectUrl, revokeObjectUrl, react, vue, window, document
kyounghwan01.github.io
