테스트 사이트 - 개발 중인 베타 버전입니다
SIR

파일업로드시 이미지 파일 특정 크기로 미리 줄여서 업로드 하기

식냥이
프로필 보기이 회원 글보기
 · 1년 전 · 559

작업간에 필요하여 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);
}
?>

 

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
17657
자바스크립 시계 [한국시간 고정] 8
17655
라라곤 6.0 데이타베이스 패스워드 설정하기 1
17654
기타 특정 기기 접근 금지시키는 스크립트
17653
JavaScript ThreeJS - 3D Bar and Progress Bar 1
17652
node.js RAM점유크기에 의한 노드서버관리
17651
JavaScript Javascript Undo, Redo 기능 구현하기
17650
PHP PHP에서 다운로드로직을 구현할때 서버부하문제를 고려한 방법
17642
node.js nodejs서버가 사용중인 메모리에 대한 로그
17633
node.js node.js에서 스케쥴링작성 8
17632
PHP 파일의 MIME 타입을 얻기 위한 클래스 1
17631
MySQL InnoDB와 MyISAM의 우단점
17630
PHP 코드이그나이터와 라라벨의 비교 1
17628
JavaScript 자바스크립트 기반으로 HTML Canvas에 이미지를 불러들여 테두리색입히기
17624
기타 일반 tcp소켓과 웹소켓의 비교 5
17623
기타 다중 소켓 포트와 한 개의 소켓 포트 비교
17620
node.js tcp소켓과 websocket 의 비교 2
17618
JavaScript JavaScript로 이미지의 부분 영역을 따내기
17617
node.js JWT란 무엇이며 nodejs에서 JWT를 구현하기 위한 방법
17614
node.js Node.js 코드를 실행 가능한 단일 실행 파일로 묶는 방법
17612
node.js 노드에서 이미지 자료를 웹소켓을 통해 클라이언트에 전송하고, 클라이언트에서는 웹소켓을 통해 이미지를 받아서 웹브라우저에 표시 1
17611
PHP PHP를 사용하여 TCP 소켓 서버를 만드는 방법
17610
node.js nodejs로 망기판을 선택하여 그 망기판으로 외부와 통신하는 코드 1
17609
PHP PHP로 웹소켓서버를 생성하여 채팅기능 구현하기 2
17608
node.js Node.js로 지속적인 핑 결과를 파일로 저장
17607
정규표현식 특수문자 제거, 우리글짜가 있는지 체크
17604
node.js Node.js에서 PDF 파일의 페이지 수를 얻기
17603
PHP PHP로 pdf의 페이지수를 얻기 1
17602
node.js Node.js로 워터마킹 기능을 구현하는 방법
17600
PHP PHP를 사용하여 이미지에 워터마크를 추가하는 방법 한가지
17594
node.js NodeJS에서 image를 업로드 하면 그와 유사한 상품리스트 작성하기 2
이전 다음
전체 목록