QR 코드 애플리케이션은 우리 생활과 업무에 침투했습니다. QR 코드를 휴대폰으로 "스캔"하기만 하면 해당 정보를 얻을 수 있어 상점을 이해하고 쇼핑하고 영화를 보는 등의 작업이 편리합니다. . 이번 글에서는 jquery 기반의 QR코드 생성 플러그인인 qrcode를 소개합니다. 해당 플러그인을 페이지에서 호출하면 해당 QR코드를 생성할 수 있습니다.
qrcode는 실제로 jQuery를 사용하여 그래픽 렌더링 및 그리기를 수행하고 캔버스(HTML5) 및 테이블을 지원합니다. 여기에서 최신 코드를 얻을 수 있습니다.
사용방법
1. 먼저 jquery 라이브러리 파일과 qrcode 플러그인을 페이지에 추가하세요.
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script>
2. QR 코드를 표시해야 하는 페이지에 다음 코드를 추가하세요.
<div id="code"></div>
3. QRcode 플러그인을 호출합니다.
qrcode는 이미지 렌더링을 위해 캔버스와 테이블의 두 가지 방법을 지원합니다. 기본적으로 캔버스 방법이 사용되며, 이는 물론 브라우저가 HTML5를 지원해야 합니다. 다음과 같이 직접 전화하세요:
$('#code').qrcode("http://www.jb51.net"); //任意字符串
다음을 통해 전화할 수도 있습니다.
$("#code").qrcode({ render: "table", //table方式 width: 200, //宽度 height:200, //高度 text: "http://www.jb51.net" //任意内容 });
이렇게 하면 해당 페이지에서 바로 QR코드가 생성될 수 있으며, 휴대폰의 '스캔' 기능을 이용해 QR코드 정보를 읽을 수 있습니다.
중국어 인식
실험 중 중국어 내용이 포함된 QR코드는 인식이 안되는 것을 발견하였고, 다양한 정보를 검색한 결과 jquery-qrcode가 인코딩 변환을 위해 charCodeAt() 메소드를 사용한다는 것을 알게 되었습니다. 이 방법은 기본적으로 유니코드 인코딩을 얻습니다. 중국어 콘텐츠가 있는 경우 QR 코드를 생성하기 전에 문자열을 UTF-8로 변환해야 QR 코드가 생성됩니다. 다음 함수를 통해 중국어 문자열을 변환할 수 있습니다:
function toUtf8(str) { var out, i, len, c; out = ""; len = str.length; for(i = 0; i < len; i++) { c = str.charCodeAt(i); if ((c >= 0x0001) && (c <= 0x007F)) { out += str.charAt(i); } else if (c > 0x07FF) { out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } else { out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } } return out; }
아래 예:
var str = toUtf8("脚本之家!"); $('#code').qrcode(str);
현재 온라인에서 QR 코드를 만드는 방법에 대한 많은 튜토리얼이 있습니다. QR 코드를 유연하게 사용하고 좋아하는 방법을 선택하여 QR 코드 만들기 기술을 익히는 것이 좋습니다.