jquery 구성 요소 qrcode를 사용하여 QR 코드 및 애플리케이션 생성 가이드

jquery 구성 요소 qrcode를 사용하여 QR 코드 및 애플리케이션 생성 가이드_jquery

WBOY

풀어 주다： 2016-05-16 16:13:28

원래의

1510명이 탐색했습니다.

QR 코드 생성과 같이 클라이언트에서 계산할 수 있는 일부 CPU 소모 계산이 있습니다.

qrcode는 실제로 계산한 다음 jquery를 사용하여 그래픽 렌더링 및 그리기를 수행합니다. 필요한 QR 코드를 생성하기 위해 캔버스 및 테이블 방법을 지원합니다.

구체적인 사용법
qrcode는 jquery 구성 요소이며 jquery와 jquery.qrcode라는 두 개 이상의 j가 필요합니다. https://github.com/jeromeetienne/jquery-qrcode로 이동하여 최신 코드를 얻을 수 있습니다.

코드 복사 코드는 다음과 같습니다.

페이지에서 QR 코드를 표시해야 하는 빈 요소(여기서는 div 사용)를 추가하세요.

코드 복사 코드는 다음과 같습니다.

QR코드를 생성해야 할 경우 명세서를 호출하여 직접 생성하세요.

코드 복사 코드는 다음과 같습니다.

$("#qrcode").qcrode("http://www.jb51.net");//생성해야 하는 페이지

상세 매개변수

매개변수 기본값 설명
렌더링 캔버스 렌더링 방법, 캔버스 및 테이블 지원
너비 없음 너비
높이 없음 높이
텍스트 없음 URL을 생성해야 합니다

예:

코드 복사 코드는 다음과 같습니다.

$("#qrcode").qcrode({
렌더링: "테이블",
너비: 200,
높이: 200,
텍스트: "http://www.jb51.net"
});

URL 한자 문제 해결 방법

실험 중 중국어 내용이 포함된 QR코드는 인식이 안되는 것을 발견했습니다. 다양한 정보를 검색해본 결과 jquery-qrcode가 인코딩 변환에 charCodeAt() 메소드를 사용한다는 것을 알게 되었습니다. 이 방법은 기본적으로 유니코드 인코딩을 얻습니다. 중국어 콘텐츠가 있는 경우 QR 코드를 생성하기 전에 문자열을 UTF-8로 변환해야 QR 코드가 생성됩니다. 다음 함수를 통해 중국어 문자열을 변환할 수 있습니다:

코드 복사 코드는 다음과 같습니다.

함수 toUtf8(str) {    

    var 출력, i, len, c;    

    아웃 = "";    

    len = str.length;    

    for(i = 0; i 
        c = str.charCodeAt(i);    

        if ((c >= 0x0001) && (c <= 0x007F)) {    

            출력 = 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));    

        }    

    }    

    돌아오다;    

}

下载 2维码

이전에 사용된 광고는 캔버스에 테이블이 없고, 캔버스에 테이블이 없고, 캔버스에 있는 이미지가 아래에 있습니다.

复主代码代码如下:

함수 다운로드(canvasElem, 파일 이름, imageType) {

    var 이벤트, saveLink, imageData, defalutImageType;

    defalutImageType = 'png';//결정된 파일 형식

    imageData = canvasElem.toDataURL(imageType || defalutImageType);//将canvas元素转化为이미지 데이터

    saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');

    saveLink.href = imageData;

    saveLink.download = 파일명;

    이벤트 = document.createEvent('MouseEvents');

    event.initMouseEvent('클릭', true, false, 창, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

    saveLink.dispatchEvent(event);

};

angular中的简单封装

angular中使사용, 可以封装成 지시어입니다.

复主代码代码如下:

var appModule = angle.module('app', []);

appModule.directive('qrcode', function() {

복귀 {

        제한: "A",

범위: {

텍스트 : '=',

옵션 : '='

},

         링크: 함수(범위, 요소, 속성) {

          var $elem, 옵션;

             $elem = $(elem);

options = { //요소의 너비와 높이를 가져옵니다 

               너비: $elem.width(),

높이: $elem.height()

           };

         angular.extend(options,scope.options);

scope.$watch('text', function(newText) {

                if (newText) {

options.text = newText;

                   $(elem).qrcode(options);//QR 코드 재생성

            }

           });

        };

};

});

다운로드 방법은 Angular의 서비스로 캡슐화될 수 있습니다.

친구 여러분, QR코드를 사용하면 정말 사용하기 쉽습니다.