간단한 QR 코드 리더기/제조업체

51901 단어 JavaScript초학자QR코드웹 카메라tech

QR 코드 판독기/제조업체 만들기


두 개의 라이브러리를 동시에 사용하여 QR 코드 리더/제조업체를 만들어 보세요.
이번에 우리는'localhost'환경에서의 실제 작업 테스트를 시험해 보자.
프로그램 라이브러리
용도
jsQR
QR 코드 테스트
qrcode
QR 코드 생성
실제 온라인에서 공개할 때는'https'환경을 갖춘 서버가 필요하니 주의해주세요.

QR 인코더 만들기


jsQR을 활용하면 QR 코드러를 쉽게 만들 수 있다.

라이브러리 다운로드


GiitHub에서 jsQR을 다운로드합니다.
jsQR

다운로드한 압축 파일의 압축을 풀다.
동결해제된 폴더의'jsQR.js'는 라이브러리 바디입니다.

제작 항목


다음 항목을 만듭니다.
MyProject01/
　├ custom.css (스타일을 설명하는 파일)
　├ index.} (프로그램 시작 파일)
　├ main.js (주 프로그램을 설명하는 파일)
　├ jsQR.js(라이브러리의 주체 파일)

HTML 파일 준비


그럼 시작합시다.
다음 코드를 설명하는 HTML 파일을 준비합니다.
index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- CSS -->
		<link rel="stylesheet" href="./style.css"/>
		<!-- JavaScript -->
		<script src="./jsQR.js" defer></script>
		<script src="./main.js" defer></script>
	</head>
	<body>
		<h1>jsQR</h1>
		<div id="wrapper">
			<div id="msg">Unable to access video stream.</div>
			<canvas id="canvas"></canvas>
		</div>
	</body>
</html>
감지된 QR 코드의 내용을 msg 요소에 표시합니다.
그런 다음 canvas 요소는 웹 카메라의 이미지를 그립니다.

CSS 파일 준비


다음은 CSS 파일입니다.
여기에는 특별히 설명할 것이 없다.
style.css
/* CSS */
body{
	background-color: gray;
}

h1{
	text-align: center;
}

#wrapper{
	margin: 0px auto 0px auto;
	width: 320px; height: auto;
}

#msg{
	margin: 0px; padding: 10px;
	background-color: lightgray;
	text-align: center;
}

#canvas{
	width: 100%; height: auto;
	background-color: silver;
}

JavaScript 파일 준비


주요 프로그램을 제작하다.
전체 절차는 다음과 같다.
  • 웹 카메라 부팅
  • 캔버스에 그리기
  • 판정 QR코드

    • 웹 카메라 시작


    웹 카메라를 시작합니다.
    웹 카메라에 액세스할 때 getUserMedia 함수를 실행합니다.
    웹 카메라가 시작되면 "then"함수를 실행합니다.
    카메라가 준비되었을 때 "startTick"함수를 실행하여 다음 처리를 진행합니다.
    main.js
    // 省略

const userMedia = {video: {facingMode: "environment"}};
navigator.mediaDevices.getUserMedia(userMedia).then((stream)=>{
	video.srcObject = stream;
	video.setAttribute("playsinline", true);
	video.play();
	startTick();
});

// 省略

    캔버스에 그리다


    "drawImage"함수를 실행하여 웹 카메라의 데이터를 캔버스에 그립니다.
    매개변수는 비디오 개체와 도면 영역의 시작점과 끝점에 대한 좌표를 지정합니다.
    main.js
    // 省略

function startTick(){
	msg.innerText = "Loading video...";
	if(video.readyState === video.HAVE_ENOUGH_DATA){
		canvas.height = video.videoHeight;
		canvas.width = video.videoWidth;
		ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
		// このタイミングでQRコードを判定します
	}
	setTimeout(startTick, 250);
}

// 省略

    판정 QR 코드


    드디어 QR 코드 판정 처리가 되었습니다.
    getImageData 함수를 사용하여 확인할 이미지 데이터를 가져옵니다.
    그런 다음 가져온 이미지 데이터를 jsQR 함수에 전달합니다.
    만약 'jsQR' 함수의 실행 결과가 'null' 이 아니라면, 테스트가 성공한 상태입니다.
    null이면 테스트가 실패합니다(테스트되지 않음).
    체크에 성공하면 code.location에서 체크된 좌표 데이터는 다음과 같습니다.
    "code.data"에는 QR 코드로 얻어진 문자열 데이터가 저장됩니다.
    구체적으로 다음과 같이 기술하다.
    main.js
    // 省略

let img = ctx.getImageData(0, 0, canvas.width, canvas.height);
let code = jsQR(img.data, img.width, img.height, {inversionAttempts: "dontInvert"});
if(code){
	drawRect(code.location);// 検出されたQRコードの位置を描画します
	msg.innerText = code.data;// 検出されたQRコードの文字列データを表示します
}else{
	msg.innerText = "Detecting QR-Code...";
}

// 省略

    전역 코드


    코드를 올려놓을게요.
    main.js
    window.onload = (e)=>{

	let video  = document.createElement("video");
	let canvas = document.getElementById("canvas");
	let ctx    = canvas.getContext("2d");
	let msg    = document.getElementById("msg");

	const userMedia = {video: {facingMode: "environment"}};
	navigator.mediaDevices.getUserMedia(userMedia).then((stream)=>{
		video.srcObject = stream;
		video.setAttribute("playsinline", true);
		video.play();
		startTick();
	});

	function startTick(){
		msg.innerText = "Loading video...";
		if(video.readyState === video.HAVE_ENOUGH_DATA){
			canvas.height = video.videoHeight;
			canvas.width = video.videoWidth;
			ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
			let img = ctx.getImageData(0, 0, canvas.width, canvas.height);
			let code = jsQR(img.data, img.width, img.height, {inversionAttempts: "dontInvert"});
			if(code){
				drawRect(code.location);// Rect
				msg.innerText = code.data;// Data
			}else{
				msg.innerText = "Detecting QR-Code...";
			}
		}
		setTimeout(startTick, 250);
	}

	function drawRect(location){
		drawLine(location.topLeftCorner,     location.topRightCorner);
		drawLine(location.topRightCorner,    location.bottomRightCorner);
		drawLine(location.bottomRightCorner, location.bottomLeftCorner);
		drawLine(location.bottomLeftCorner,  location.topLeftCorner);
	}

	function drawLine(begin, end){
		ctx.lineWidth = 4;
		ctx.strokeStyle = "#FF3B58";
		ctx.beginPath();
		ctx.moveTo(begin.x, begin.y);
		ctx.lineTo(end.x, end.y);
		ctx.stroke();
	}
}
    QR Code Drear을 완료할 수 있습니다.(했다)

    QR 코드 제조업체 만들기


    공식 사이트에서 라이브러리를 다운로드하여 폴더의 'qrcode.js' 를 프로젝트에 추가합니다.
    qrcode

    항목은 다음과 같습니다.
    MyProject01/
    　├ custom.css (스타일을 설명하는 파일)
    　├ index.} (프로그램 시작 파일)
    　├ main.js (주 프로그램을 설명하는 파일)
    　├ jsQR.js(라이브러리의 주체 파일)
    　├ qrcode.js(라이브러리의 주체 파일)

    HTML 파일 편집


    방금 HTML에서는 QR 코드를 표시할 영역을 준비했습니다.
    "qrcode.js"라이브러리를 불러오고 id가 "qrcode"인 "div"탭을 추가합니다.
    index.html
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- CSS -->
		<link rel="stylesheet" href="./style.css"/>
		<!-- JavaScript -->
		<script src="./jsQR.js" defer></script>
		<script src="./qrcode.js" defer></script>
		<script src="./js/main.js" defer></script>
	</head>
	<body>
		<h1>jsQR</h1>
		<div id="wrapper">
			<div id="msg">Unable to access video stream.</div>
			<canvas id="canvas"></canvas>
			<div id="qrcode"></div>
		</div>
	</body>
</html>

    JavaScript 파일 편집


    QR 코드를 생성하는 모드는 다음과 같습니다.
    아래의 코드를 보면 알 수 있듯이 매우 간단하게 기술할 수 있다.
    첫 번째 매개변수의 "qrcode"는 HTML 표시 위치의 id입니다.
    main.js
    let qrcode = new QRCode("qrcode", {
	text: text,
	width: 128, height: 128,// QRコードの幅と高さ
	colorDark: "#000000",
	colorLight: "#ffffff",
	correctLevel: QRCode.CorrectLevel.H
});

    전역 코드


    마지막으로 전체 코드를 넣으세요.
    main.js
    window.onload = (e)=>{

	let video  = document.createElement("video");
	let canvas = document.getElementById("canvas");
	let ctx    = canvas.getContext("2d");
	let msg    = document.getElementById("msg");

	const userMedia = {video: {facingMode: "environment"}};
	navigator.mediaDevices.getUserMedia(userMedia).then((stream)=>{
		video.srcObject = stream;
		video.setAttribute("playsinline", true);
		video.play();
		startTick();
	});

	function startTick(){
		msg.innerText = "Loading video...";
		if(video.readyState === video.HAVE_ENOUGH_DATA){
			canvas.height = video.videoHeight;
			canvas.width = video.videoWidth;
			ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
			let img = ctx.getImageData(0, 0, canvas.width, canvas.height);
			let code = jsQR(img.data, img.width, img.height, {inversionAttempts: "dontInvert"});
			if(code){
				drawRect(code.location);// Rect
				msg.innerText = code.data;// Data
				makeQR(code.data);// QRCode
			}else{
				msg.innerText = "Detecting QR-Code...";
			}
		}
		setTimeout(startTick, 250);
	}

	function drawRect(location){
		drawLine(location.topLeftCorner,     location.topRightCorner);
		drawLine(location.topRightCorner,    location.bottomRightCorner);
		drawLine(location.bottomRightCorner, location.bottomLeftCorner);
		drawLine(location.bottomLeftCorner,  location.topLeftCorner);
	}

	function drawLine(begin, end){
		ctx.lineWidth = 4;
		ctx.strokeStyle = "#FF3B58";
		ctx.beginPath();
		ctx.moveTo(begin.x, begin.y);
		ctx.lineTo(end.x, end.y);
		ctx.stroke();
	}

	function makeQR(text){
		document.getElementById("qrcode").innerHTML = "";// Clear
		let qrcode = new QRCode("qrcode", {
			text: text,
			width: 128, height: 128,
			colorDark: "#000000",
			colorLight: "#ffffff",
			correctLevel: QRCode.CorrectLevel.H
		});
	}
}
    판별을 직접 생성하는 QR 코드를 확인할 수 있습니다.(했다)

    최후


    간단한 QR 코드 드레어에 대해 전하고 싶습니다.
    QR코드 자체는 오래전부터 흔한 존재로 재검토해보면 새로운 아이디어가 나올 수 있다.
    반복적으로 사용하려면 인터넷에서 "https"환경에서 서버를 사용하는 것이 필요합니다.
    여기까지 읽어주셔서 감사합니다.
    조리프 문제에 대한 초보적인 사고
    [Node.js] modules 💯️

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage