작업간에 필요하여 Chat Gpt 에게 물어보면서 구현한 테스트 코드 입니다.
html 스크립트 코드는 아래와 같이 진행하고
서버단에서 썸네일 과정이 없기 때문에 쾌적하게 이용 가능합니다.
여러 사이즈로 resize가 필요한 경우에는 코드는 수정 해주셔야 합니다.
upload.php 파일로 저장해 주는 로직 입니다.
따로 라이브러리 사용하지 않고 진행 가능합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Resize and Upload</title>
</head>
<body>
<input type="file" id="fileInput" onchange="handleFileSelect(event)"/>
<button id="uploadButton" onclick="uploadImage()">Upload</button>
<img src="" id="pre_view" />
<script>
let resizedImage;
function handleFileSelect(event) {
const file = event.target.files[0];
if (file && file.type.startsWith('image/')) { // Only process image files
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const MAX_WIDTH = 1000; // 원하는 최대 너비
const MAX_HEIGHT = 1000; // 원하는 최대 높이
let width = img.width;
let height = img.height;
// 비율에 맞게 크기 조정
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
resizedImage = canvas.toDataURL(file.type, 0.9); // 품질 90%
};
img.src = e.target.result;
document.getElementById('pre_view').src=e.target.result;
};
reader.readAsDataURL(file);
} else {
console.error('Selected file is not an image.');
}
}
function uploadImage() {
if (resizedImage) {
const formData = new FormData();
formData.append('image', resizedImage);
fetch('/upload.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));
} else {
console.log('No image selected or image not resized yet.');
}
}
</script>
</body>
</html>
upload.php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$uploadDir = 'uploads/;
$response = ['status' => 'success'];
if (isset($_POST['image'])) {
$data = $_POST['image'];
if (preg_match('/^data:image\/(\w+);base64,/', $data, $typeMatch)) {
$data = substr($data, strpos($data, ',') + 1);
$type = strtolower($typeMatch[1]); // jpg, png, gif 등
if (!in_array($type, ['jpg', 'jpeg', 'gif', 'png'])) {
$response['status'] = 'error';
$response['message'] = 'Invalid image type';
echo json_encode($response);
exit;
}
$data = base64_decode($data);
if ($data === false) {
$response['status'] = 'error';
$response['message'] = 'Base64 decode failed';
echo json_encode($response);
exit;
}
$filePath = $uploadDir . uniqid() . '.' . $type;
if (file_put_contents($filePath, $data)) {
$response['file'] = $filePath;
} else {
$response['status'] = 'error';
$response['message'] = 'Failed to save file';
}
} else {
$response['status'] = 'error';
$response['message'] = 'Invalid data URI';
}
} else {
$response['status'] = 'error';
$response['message'] = 'No image data';
}
echo json_encode($response);
}else {
// Handle invalid request methods
$response = ['status' => 'error', 'message' => 'Invalid request method'];
echo json_encode($response);
}
?>
게시글 목록
| 번호 | 제목 |
|---|---|
| 17819 |
JavaScript
당신이 알아야 할 자바스크립트의 강력한 7가지 팁
3
|
| 17818 |
JavaScript
자바스크립트 코드를 더 깔끔하고 보기 좋게 작성하는 팁
1
|
| 17817 |
PHP
chatgtp
|
| 17816 |
JavaScript
textarea 자동 높이 설정하기.
1
|
| 17814 | |
| 17811 |
JavaScript
자바스크립트 플래이그라운드 - RUNJS
|
| 17810 | |
| 17809 | |
| 17808 |
JavaScript
16진수 색상코드 확인함수
|
| 17803 | |
| 17799 | |
| 17798 | |
| 17797 |
JavaScript
동영상파일 썸네일 만들기
8
|
| 17795 |
JavaScript
div태그의 사이즈가 변경되는 이벤트를 처리하기
|
| 17794 |
JavaScript
초->hh:mm:ss로 변환하는 함수
1
|
| 17793 |
JavaScript
JSON Beautify
|
| 17790 |
PHP
JSONP실례
|
| 17789 | |
| 17786 |
JavaScript
ThreeJS로 3디지구에 포인트 찍고 정보 현시기능
|
| 17774 | |
| 17760 | |
| 17755 | |
| 17750 | |
| 17729 | |
| 17722 | |
| 17714 | |
| 17708 | |
| 17686 | |
| 17676 |
JavaScript
유튜브 풀화면 묵음배경 예제
9
|
| 17666 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기