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
