loading

새소식
JS Library/React

[React] 리액트 실습 : QRcode 로 로또 용지 촬영 시 1등 번호로 수정해서 요청

  • -
728x90
반응형

QRcode 로 로또 용지를 촬영했을 때 1등 번호로 수정해서 요청할 수 있도록 코드 수정하기.

수정 후 location = x 로 이동해서 결과 확인하기.

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="css/04-qrcode.css">

<body>
  <section id="container">
    <section class="dropbox" id="dropbox">
      <h4>Drop files here to upload</h4>
    </section>
  </section>

  <script src="./lib/js/jsQR.js"></script>
  <script>

    const dropbox = document.querySelector('#dropbox');

    /* 파일을 외부에서 dropbox로 drag 할 때 */
    dropbox.ondragover = function () {
      this.className = 'dropbox dragover'; // 모습 변경을 위해 class 정의
      return false;
    }
    /* 파일을 dropbox에서 외부로 drag 할 때 */
    dropbox.ondragleave = function () {
      this.className = 'dropbox'; // 모습 변경을 위해 class 정의
      return false;
    }
    /* 파일을 dropbox로 drop 할 때 */
    dropbox.ondrop = function (e) {
      e.preventDefault();

      removeImg(); // qrcode 이미지 삭제

      this.className = 'dropbox';
      const file = e.dataTransfer.files[0]; // drop된 파일 1개 가져오기

      const reader = new FileReader(); // img 태그로 출력하기 위해서
      reader.readAsDataURL(file);

      reader.onloadend = function () {
        const base64 = reader.result;

        /* img 태그 생성 후 dropbox에 추가 */
        const img = createImg(base64);

        /* jsQR 라이브러리에 image data를 넣은 후 해석 결과 출력 */
        showContent(base64, img);
      }
    }

    function showContent(base64, img) {
      const tempImage = new Image();
      tempImage.src = base64;

      tempImage.onload = function () {
        const canvas = document.createElement('canvas');
        const canvasContext = canvas.getContext('2d');

        canvas.width = img.width;
        canvas.height = img.height;

        canvasContext.drawImage(this, 0, 0, img.width, img.height);

        const imageData =
          canvasContext.getImageData(0, 0, canvas.width, canvas.height);

        const code = jsQR(
          imageData.data, imageData.width, imageData.height);
        console.log(code.data);
            
        let lotto = 'http://m.dhlottery.co.kr/?v=1016q040919273940q131417303138q071521273441q040713333839q0511172039441371665797';
        let qIdx1 = lotto.indexOf('q');
        let qIdx2 = lotto.indexOf('q', qIdx1 + 1);
        let str1 = lotto.substring(0, qIdx1);
        let str2 = lotto.substring(qIdx2);
        console.log(str1, str2);
        lotto = str1 + 'q152628344142' + str2;
        console.log(lotto);
        // window.open(lotto); // 전체화면, 탭으로 열기
        // window.open(lotto, 'name', 'width=300px') // 팝업 창으로 열기
        location = lotto;
        return code;
      }
    }

    function removeImg() {
      const target = document.querySelector('img');
      if (target) target.parentNode.removeChild(target);
    }

    function createImg(base64) {
      let img = document.createElement('img');
      img.src = base64;
      document.querySelector('#dropbox').appendChild(img);
      return img;
    }

  </script>
</body>

</html>

 

※ 자바스크립트의 특수한 객체. 브라우저에 내장되어 있는 객체(내장객체)

=> location : URL 과 관련된 기능

=> window : alert, print

=> navigator : geolocation

728x90
반응형
Contents

추천 컨텐츠

  • -

    • 📝 포스팅 주소를 복사했습니다 📝

    이 글이 도움이 되었다면 공감 부탁드립니다👍

    SHARE

    MENU

    티스토리툴바