html <input type = 'file'>을 통해 업로드한 A데이터를 용량을 줄인 B데이터로 대체하려면 어떻게 해야 하나요?

조회수 839회

안녕하세요. 웹에 딥러닝을 이용한 앱을 배포해보기 위해 웹을 구성하고 있습니다. 사용자는 웹에서 사진을 업로드하고 이 업로드한 사진을 서버(python)에 넘겨주어 사진을 읽어 처리하도록 구성했습니다.

하지만, 요즘 핸드폰의 사진이 4000x3000정도로 엄청나게 크기에 4000x3000의 이미지를 서버로 업로드하는 시간이 길어지더군요.

그래서 사용자가 사진을 업로드하면 업로드한 사진의 실질적 사이즈를 줄여 서버로 보내고 싶습니다.

제가 원하는 건 업로드한 사진을 가공(용량을 줄인)한 사진으로 바꾸어 서버에 보내고 싶습니다.

검색을 해봤으나 '이거다!' 라는 답은 찾지 못했구요. 어떻게 하면 좋을까요? html 남깁니다.


<body>
 <div class="image-upload-wrap">
    <input class="file-upload-input" type='file' id="test" name="upload_image" onchange="readURL(this);" accept="image/*" />
    <div class="drag-text">
        <img class ="upload_image" src ="{{ url_for('static',  filename='image/upload.png') }}">
        <h1> 사진을 넣어주세요.</h1>
     </div>
</div>
<div class="file-upload-content">
    <div>
        <img class="file-upload-image" id ="upload_image"src="#" alt="your image" />
            <p id="img"></p>
     </div>
            <div class="image-title-wrap">
                <button type="button" onclick="removeUpload()" class="remove-image">
                    <span class="image-title">Uploaded Image</span></button>
                <input type="submit" class="predict-image" value="예측!">
            </div>
        </div>
    </div>
</form>

<script>
    function readURL(input) {

      if (input.files && input.files[0]) {

        var reader = new FileReader();

        reader.onload = function(e) {

            var img = new Image();
            img.src = e.target.result;

            img.onload = function () {

                // CREATE A CANVAS ELEMENT AND ASSIGN THE IMAGES TO IT.
                var canvas = document.createElement("canvas");

                var value = 50;
                var scale_percent = 100;
                if (img.height > 500 || img.width > 500){
                var bigger = 0;
                    if (img.height > img.width){
                        bigger = img.height
                    }
                    else{
                        bigger = img.width
                    }
                    scale_percent =  100 - Math.floor((bigger - 500)  *100 / bigger)
            }

                // RESIZE THE IMAGES ONE BY ONE.
                img.width = (img.width * scale_percent) / 100;
                img.height = (img.height * scale_percent) / 100;


                var ctx = canvas.getContext("2d");
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0, img.width, img.height);

                document.getElementById("upload_image").src = canvas.toDataURL("image/png");

            }

          $('.image-upload-wrap').hide();

<!--          $('.file-upload-image').attr('src', e.target.result);-->
          $('.file-upload-content').show();

          $('.image-title').html("제거!");

          console.log(document.getElementById("test"));
        };

        reader.readAsDataURL(input.files[0]);

      } else {
        removeUpload();
      }
    }

    function removeUpload() {
      $('.file-upload-input').replaceWith($('.file-upload-input').clone());
      $('.file-upload-content').hide();
      $('.image-upload-wrap').show();
    }
    $('.image-upload-wrap').bind('dragover', function () {
            $('.image-upload-wrap').addClass('image-dropping');
        });
        $('.image-upload-wrap').bind('dragleave', function () {
            $('.image-upload-wrap').removeClass('image-dropping');
    });

1 답변

  • 제가 원하는 건 업로드한 사진을 가공(용량을 줄인)한 사진으로 바꾸어 서버에 보내고 싶습니다.

    그러지 않으시는 편이 좋을 겁니다. 업로드한 사진을 그 원본 그대로 서버에 보내서 서버에서 그 사진을 용량 줄여 가공하세요.

    사용자의 데이터(사진, 입력값 등)는 서버단에서 처리하는 쪽이 클라이언트단에서 처리하는 것보다 더 나은 경우가 훨씬 많습니다. 서비스 운영의 차원에서부터 데이터 가공이라는 기술적 측면에 이르기까지 말이죠. 애초에 사용자 고객님들이 올려 주신 데이터는 항상 원본을 어딘가에 킵해둬야 합니다. 실제 사용은 사본만 사용한다거나, 아예 그 원본데이터를 사용 못하는 한이 있더라도 말이죠.

    파일 크기가 커서 문제라면 그건 해결법이 있습니다. 아무튼 일단 원본을 받으셔야 해요. 그리고 원본을 받은 서버가 용량을 줄인 사본을 만들어 활용하시기 바랍니다. 그 업로드된 파일이 가공 가능한 형식인지 체크하고, 깨지거나 바이러스 걸린 파일은 아닌지 검사하고, 화질과 해상도를 결정해서 실제로 가공하는 등등의 작업은 서버가 하는 편이 좋습니다. 그걸 JS가 다 하는 건 좋은 아이디어가 아니라고 생각됩니다.

    참고가 되면 좋겠네요.

    • 답변 감사드립니다. 현재 실제로 서버에서 사진의 사이즈를 줄여 사용하고 있습니다. 하지만, 저는 전문적인 사람이 아니라 heroku 무료 서버를 사용하고 있습니다. heroku를 이용하다 보니 업로드의 시간이 늘어나면, 자동적으로 heroku 측에서 오류를 보내더라구요. 저도 이미 서버측에서 사진의 사이즈를 바꿔 처리하게 편하지만 서버가 죽어버려 사용자편에서 js을 이용해서 처리 후 서버로 보내려고 시도한 것입니다. js에서 처리하는 법은 없을까요? 아니면 어떻게 처리해야 할까요? 심승현 2020.9.10 17:20
    • 비동기로 데이터를 보내십시오. (예) Stream 객체를 이용하십시오.' dbwodlf3 2020.9.10 20:45

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)