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

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코드를 사용하면 정말 사용하기 쉽습니다.