jquery 플러그인 qrcode를 사용하여 QR code_jquery 생성-JS 튜토리얼-php.cn

jquery 플러그인 qrcode를 사용하여 QR code_jquery 생성

WBOY

풀어 주다： 2016-05-16 15:35:40

원래의

1582명이 탐색했습니다.

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 코드 만들기 기술을 익히는 것이 좋습니다.