팀 프로젝트 - Javascript 무한스크롤, 이미지 미리보기, 출력하기

Javascript 문제해결 과정

1. Javascript 기본 개념 공부

① 인터넷으로 Javascript 강의 듣기, 구글링하기.  

② 다른 사람이 만든 코드를 가져와서 사용하고 해석해보기. 

③ chatGPT 선생님의 도움.  

 

2. 프로그래밍 = 문제해결 과정. 어떤 문제를 해결해야 했나? 

① 댕근마켓에 무한스크롤 기능이 필요하다. (고객이 페이지 넘길 필요 없이 데이터를 볼 수 있음. 편리함) 

② 댕댕등록증 이미지 미리보기하는 기능이 필요하다. 

③ 출력하기 버튼을 누르면 웹페이지 전체가 출력된다. 댕댕등록증만 캡쳐하고 싶다. 

 

댕근마켓 무한스크롤 javascript 코드

window.onscroll = function () {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        const toAdd = document.createElement("div");
        const box = document.getElementsByClassName('container');
        const clonedBox = box[0].cloneNode(true); // container 클래스를 가진 첫번째 요소를 복제
        toAdd.appendChild(clonedBox); // div 영역에 넣어주기
        document.querySelector('article').appendChild(toAdd);
    }
}

코드 설명 : 이 코드는 윈도우에서 스크롤 이벤트가 발생하면, 현재 보이는 화면 영역의 높이와 스크롤 위치를 합한 값이 문서 전체의 높이와 같거나 크면, 새로운 div엘리먼트를 만들고 그 안에 현재 페이지의 첫 번째 card 엘리먼트를 복사하여 추가합니다. 결과적으로 페이지 하단에 스크롤을 내릴 떄마다 새로운 card 엘리먼트를 추가합니다. 지금은 데이터가 없어서 container가 반복되게 해둔 상태입니다. 

 

댕사무소 댕댕등록증 이미지 미리보기 javascript 코드

// 댕댕등록증 이미지 미리보기
function previewImage(input) {
    var image = document.getElementById('preview')
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            image.src = e.target.result;
        };
        reader.readAsDataURL(input.files[0]);
        image.style.width = '217px';
        image.style.height = 'auto';
    } else {
        document.getElementById('preview').src = "";
    }
}

코드 설명 : 이 코드는 파일을 선택하면 해당 이미지 파일을 미리보기합니다. input 태그를 인자로 받고 선택된 파일이 존재하는지 확인합니다. 있다면 reader 객체를 생성합니다. reader 객체는 선택한 파일을 읽을 수 있는 객체입니다. 파일을 문자열 형태로 변환시키고, 이를 다시 이미지 태그의 src속성에 할당하면 해당 이미지 파일이 미리보기 됩니다. 

 

<img id="preview" src="" alt="preview image">  src 속성에 이미지 파일의 문자열을 넣으면 이미지가 나타납니다. 

 

댕사무소 댕댕등록증 출력하기 javascript 코드

// html2canvas.min.js 파일 로드
let script = document.createElement('script');
script.src = './html2canvas.js';
script.onload = function() {
  document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault(); // 폼 제출 이벤트 중단
    downImg(); // downImg 함수 호출
  });
};

document.head.appendChild(script);

function downImg() {

  // 사용자 입력 값
  let result1 = document.querySelector("#견종값");
  let result2 = document.querySelector("#등록번호값");
  let result3 = document.querySelector("#이름값");
  let result4 = document.querySelector("#생일값");
  let result5 = document.querySelector("#수컷값");
  let result6 = document.querySelector("#암컷값");
  let result7 = document.querySelector("#중성화함값");
  let result8 = document.querySelector("#중성화안함값");
  let result9 = document.querySelector("#주소값");
  let result10 = document.querySelector("#특징값");


  let 견종 = document.getElementById("견종").value
  let 등록번호 = document.getElementById("등록번호").value;
  let 이름 = document.getElementById("이름").value;
  let 생일 = document.getElementById("생일").value;
  let 수컷 = document.getElementById("수컷").checked ? "수컷<br/>" : "";
  let 암컷 = document.getElementById("암컷").checked ? "암컷<br/>" : "";
  let 중성화함 = document.getElementById("중성화함").checked ? "O<br/>" : "";
  let 중성화안함 = document.getElementById("중성화안함").checked ? "X<br/>" : "";
  let 주소 = document.getElementById("주소").value;
  let 특징 = document.getElementById("특징").value;

  
  result1.textContent = 견종;
  result2.textContent = 등록번호;
  result3.textContent = 이름;
  result4.textContent = 생일;
  result5.innerHTML = 수컷;
  result6.innerHTML = 암컷;
  result7.innerHTML = 중성화함;
  result8.innerHTML = 중성화안함;
  result9.textContent = 주소;
  result10.textContent = 특징;

  document.querySelector("#imagediv").style.borderWidth = "0px";
  document.getElementById("imageinput").remove();

  document.getElementById("견종").replaceWith(result1);
  document.getElementById("등록번호").replaceWith(result2);
  document.getElementById("이름").replaceWith(result3);
  document.getElementById("생일").replaceWith(result4);

  document.getElementById("주소").replaceWith(result9);
  document.getElementById("특징").replaceWith(result10);

  // 선택된 값이 선택창 자리에 들어감
  if (수컷) {
      document.getElementById("성별").replaceWith(result5);
  } else {
      document.getElementById("성별").replaceWith(result6);
  }

  if (중성화함) {
      document.getElementById("중성화여부").replaceWith(result7);
  } else {
      document.getElementById("중성화여부").replaceWith(result8);
  }

  if (!견종 || !등록번호 || !이름 || !생일 || !주소) {
    return;
  }

  // 입력값이 모두 입력되었을 때 html2canvas 함수와 downloadURI 함수 호출
  html2canvas($(".idcard")[0]).then(function(canvas){
      var 댕댕등록증 = canvas.toDataURL();
      downloadURI(댕댕등록증, "댕댕등록증.png");
  });
}

// png 파일을 image uri로 변환
function downloadURI(uri, name) {
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();
}

document.querySelector('#').addEventListener('submit', function(event) {
    event.preventDefault(); // 폼 제출 이벤트 중단
    downImg(); // downImg 함수 호출
  });

코드 설명 :  HTML2Canvas 라이브러리를 사용해서 폼을 이미지로 변환하고 다운로드하는 코드입니다. script 태그를 생성하고 script.src에 라이브러리 파일 경로를 할당합니다. 그 다음 script.onload에 라이브러리 파일이 로드된 후 실행될 함수를 넣어줍니다. html 파일에서 첫번째 폼 요소를 선택하고 submit이 될때마다 function(event)를 실행합니다. function(event)는 downImg()함수를 호출합니다. downImg함수는 input에 입력된 값을 span태그에 넣어줍니다.