jquery 플러그인 qrcode는 QR 코드 online_jquery를 생성합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jquery 플러그인 qrcode는 QR 코드 online_jquery를 생성합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:02 PM

jquery

모바일 인터넷의 발달로 QR코드의 사용이 점점 더 많아지고 있습니다. QR코드를 스캔하면 웹사이트 검색, 친구 추가 등을 할 수 있습니다. 수동으로 입력하는 것보다 정말 편리합니다.

모바일의 점진적인 구현을 고려하여 초기 단계에서 포괄적인 평가 시스템을 만들었습니다. 사용자가 QR 코드를 사용하여 IP 주소 목록을 입력하는 것이 불편합니다. 휴대폰을 들고 스캔을 합니다.

이 응용 시나리오를 바탕으로 웹사이트 QR 코드 구현 방법을 알아보기 위해 온라인에 접속했습니다. 요약하면 두 가지 유형이 있습니다.

1. 일부 QR 코드 생성 웹사이트나 QR 코드 생성기를 사용하여 QR 코드 이미지를 생성한 다음 Code Cloud QR-Code(QR 코드) 온라인 생성기와 같은 웹사이트에 걸어 놓습니다.

장점: 개발 비용이 0이고, 다양한 QR코드를 빠르게 구현할 수 있습니다.

단점: QR코드를 변경하고 유지하는 것이 조금 번거롭다

2. 백엔드에서 java 또는 .net 코드를 사용하여 QR 코드 이미지를 생성한 다음 웹사이트에서 qrcode, zxing 등의 이미지를 참조합니다.

장점: 고도로 맞춤설정 가능하고 빠른 배치 생성

단점: 무거운 구현, 간단한 애플리케이션에 대한 개발 비용 증가

3. JavaScript 또는 jquery-qrcode와 같은 다른 방법을 통해 프런트 엔드 페이지에서 QR 코드( ? )를 즉시 생성합니다

장점: 경량 구현, 이미지 IO 감소, 트래픽 절약

단점: 복잡한 QR코드 생성에는 적합하지 않음

물론 실제 적용에서는 이 세 가지 구현 방법이 완전히 분리되지는 않습니다. 프로젝트의 실제 상황에 따라 적용을 결합하여 효율성을 극대화하고 비용을 절감할 수도 있습니다.

밤에는 시간이 별로 없어서 jquery-qrcode를 선택해서 공부했어요.

jquery-qrcode

jquery-qrcode는 브라우저 측에서 QR 코드를 생성할 수 있는 jquery 플러그인입니다. 최소한의 압축으로 4k 미만의 독립형이며 이미지 다운로드 요청이 없습니다. 이 클래스 라이브러리를 도입한 후 단 한 줄의 코드만으로 웹 페이지에 QR 코드를 쉽게 추가할 수 있습니다.

github에서 호스팅됩니다: https://github.com/jeromeetienne/jquery-qrcode

jquery-qrcode에는 주로 두 개의 파일이 포함됩니다.

1. qrcode.js: QR코드 알고리즘 구현 클래스

2. jquery.qrcode.js: jquery를 사용하여 qrcode.js를 캡슐화하고 캔버스 및 테이블 렌더링을 구현하여 사용자 매개변수에 따라 QR 코드를 생성합니다

압축 후에는 jquery.qrcode.min.js 파일이 하나만 남습니다.

코드 구현

실제로 github에는 매우 자세한 지침과 예시가 있으므로 여기서는 자세히 다루지 않겠습니다.

그러나 향후 사용의 편의를 위해 모든 분들의 인터넷 경험을 바탕으로 코드를 재구성하겠습니다.

jquery-qrcode.html 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>通过jquery-qrcode生成二维码</title>
</head>
<body>
<!-- 引入百度CDN公共库的压缩版jQuery -->
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<!--引入压缩版jquery.qrcode.js -->
<script src="jquery.qrcode.min.js"></script>
<!--未压缩则需要引入两个文件jquery.qrcode.js和qrcode.js -->
<!--jquery.qrcode.js：jquery封装渲染类库 -->
<!--<script src="jquery.qrcode.js"></script>-->
<!--qrcode.js：二维码核心计算类库 -->
<!--<script src="qrcode.js"></script>-->
<script src="jquery.qrcode.min.js"></script>
<!--解决中文乱码问题，引入utf16t8.js -->
<script src="utf16to8.js"></script>

<div id="qrcodeCanvas"></div>

<div id="qrcodeTable"></div>
<script>
 //最简用法，render默认是canvas
 $('#qrcodeCanvas').qrcode("http://www.jb51.net/");
 //完整用法，有默认值的均可省略
 $('#qrcodeTable').qrcode({
  text: utf16to8("脚本之家：http://www.jb51.net/"),//二维码包含的内容，默认只支持英文内容,中文会乱码，通过utf16to8转码可支持中文
  render: "table",//渲染方式可选择canvas或table，默认是canvas，canvas方式还支持右键图片下载
  width: 256,//宽度，默认是256
  height: 256,//高度，默认是256，建议宽度和高度保持一致，否则不容易被识别
  typeNumber: -1,//计算模式，默认是-1
  //correctLevel: QRErrorCorrectLevel.H,//纠错等级，默认是QRErrorCorrectLevel.H，但是加上correctLevel这一行后无法渲染出二维码
  background: "#ffffff",//背景颜色，默认是白色
  foreground: "#000000"//前景颜色，默认是黑色
 });
</script>
<body>
</html>

공식 샘플 테스트 결과 인식된 중국어 QR코드가 깨져 있는 것으로 나타났습니다.

좋은 의도를 가진 네티즌들의 설명에 따르면

이것은 js 메커니즘과 관련이 있습니다. jquery-qrcode 라이브러리는 charCodeAt()를 사용하여 인코딩 변환을 수행합니다.

이 방법은 기본적으로 유니코드 인코딩을 얻습니다. 일반적으로 디코더는 UTF-8, ISO-8859-1 등을 사용합니다.

영어라면 문제가 없습니다. 일반적으로 유니코드는 UTF-16으로 구현되며 길이는 2자리인데 UTF-8 인코딩은 3자리이므로 QR코드의 인코딩과 디코딩은 됩니다. 일치하지 않습니다.

물론 QR 코드를 인코딩하기 전에 문자열을 UTF-8로 변환하는 것이 해결책입니다

따라서 utf16to8.js의 도움으로 이 문제를 해결할 수 있습니다.

function utf16to8(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;
}

이상은 오늘 공유드린 내용 전부입니다. jQuery를 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

Python vs. JavaScript : 학습 곡선 및 사용 편의성Apr 16, 2025 am 12:12 AM

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Apr 15, 2025 am 12:16 AM

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지Apr 14, 2025 am 12:05 AM

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

WebStorm Mac 버전

유용한 JavaScript 개발 도구

드림위버 CS6

시각적 웹 개발 도구

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는