HTML5와 Vanilla.js로 이미지를 넣고, 크기를 리사이징하는 걸 만들어보겠습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 업로드 및 리사이징</title>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
<br>
<img id="preview" src="#" alt="Preview" style="max-width: 500px; max-height: 500px;">
<script>
</script>
</body>
</html>
script를 작성하기 전에 html은 간단한 input 버튼만 있는 화면만 만들었습니다.
이제 script를 작성해줄건데요
<script>
const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');
fileInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
resizeImage(file);
}
});
function resizeImage(file) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(event) {
const img = new Image();
img.src = event.target.result;
img.onload = function() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const scaleFactor = Math.max(1920 / img.width, 1080 / img.height);
canvas.width = img.width * scaleFactor;
canvas.height = img.height * scaleFactor;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// 이미지를 JPEG 형식으로 변환
const resizedDataURL = canvas.toDataURL('image/jpeg');
preview.src = resizedDataURL;
};
};
}
</script>
resizeImage 함수를 이용해서 파일을 리사이징 하는 걸 만들어봤습니다.
html화면을 열어주면 이러한 모양이 되구요
파일을 선택해서 올려주면
이런식으로 이미지 리사이징된 모습을 볼 수 있습니다.
'Web Programming > JavaScript' 카테고리의 다른 글
| [javascript] audioRecorder 만들기 / js 함수로 녹음저장 만들기 (0) | 2024.04.02 |
|---|---|
| [React + SpringSecurity + DB] 로그인 구현하기 (frontend) (0) | 2024.01.18 |
| [Kendo Vue + SpringBoot + Oracle] 동적인 메뉴 아코디언 만들기(Creating a dynamic menu accordion) (3) | 2024.01.03 |
| [Vue.js] Datepicker를 이용한 캘린더 만들기 - 데이터 바인딩 및 오늘 날짜로 설정하기 (1) | 2023.12.07 |
| [Vue.js] select 태그에 데이터 바인딩하기 (0) | 2023.12.05 |
