Web Programming/JavaScript
[Html5, JavaScript] image resizing (이미지 리사이징)
jaey0ng
2024. 2. 7. 11:31
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화면을 열어주면 이러한 모양이 되구요
파일을 선택해서 올려주면
이런식으로 이미지 리사이징된 모습을 볼 수 있습니다.