JavaScript_javascript 기술을 사용한 QR 코드 이미지 생성 요약

요약:

바이두 백과사전에서는 QR 코드를 이렇게 소개하고 있습니다. 2D 바코드라고도 알려진 QR 코드(Quick Response Code)는 특정 기준에 따라 평면(2차원 방향)에 분산된 특정 기하학적 도형을 사용하는 흑백 코드입니다. 대체 그래픽은 모든 정보 데이터의 핵심입니다. 현대 상업 활동에서는 제품 위조 방지/추적, 광고 푸시, 웹 사이트 링크, 데이터 다운로드, 상품 거래, 위치 확인/내비게이션, 전자 상거래 응용 프로그램, 차량 관리, 정보 전송과 같은 광범위한 응용 프로그램을 실현할 수 있습니다. , 등. 최근에는 스마트폰에 스캔(313) 기능이 적용되면서 QR코드가 일반화되면서 국내 사물인터넷 산업의 활발한 발전과 함께 QR코드 기술 응용 솔루션도 많이 개발되어 QR코드가 대중화되고 있다. 모바일 인터넷이 현실이 되었습니다.

인터넷 서핑을 하면 어디에서나 QR코드를 볼 수 있는데 프런트엔드에서 QR코드를 생성하는 방법은 무엇일까요? 오늘은 프론트엔드 QR코드 세대에 대해 공유하겠습니다.

소개:

QRCode.js는 여러 브라우저에서 HTML5 캔버스와 DOM의 테이블 마크업을 지원하는 js 라이브러리입니다. 우리가 사용하는 것은 QRCode.js를 기반으로 합니다.

브라우저:

IE6~10, 크롬, 파이어폭스, 사파리, 오페라, 모바일 사파리, 안드로이드, 윈도우 모바일 등

jquery-qrcode:

jquery-qrcode 기능: 간단한 조작, 작은 크기, 압축 후 14k에 불과하지만 중국어 인코딩을 지원하지 않습니다.

<script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.qrcode.min.js"></script>
<div id="qrcode"></div>
<script>
$(function(){
$('#qrcode').qrcode("http://www.cnblogs.com/xiyangbaixue");
// 更详细的配置
// $('#qrcode').qrcode({
// text: "http://www.cnblogs.com/xiyangbaixue", // 要编码的字符串
// width: 50, // 定义宽度
// height: 50, // 定义高度
// background: "#ccc", // 背景色
// foreground: "red" // 前景色
// });
})
</script>

효과:

qrcodejs:

qrcodejs의 특징: 중국에서 생성된 QR 코드는 스캔 시 깨져서 나타나지 않으며, QR 코드를 그리는 데 사용할 요소를 선택할 수 있습니다.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<div id="qrcode"></div>
<script>
new QRCode(document.getElementById("qrcode"), "http://www.cnblogs.com/xiyangbaixue");
// 或者
// new QRCode(document.getElementById("qrcode"), {
// text: "http://www.cnblogs.com/xiyangbaixue",
// width: 50,
// height: 50,
// background: "#ccc",
// foreground: "red"
// });
</script>

svg 사용:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="qrcode"/>
</svg>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,
height : 100,
useSVG: true
});
qrcode.makeCode("http://www.cnblogs.com/xiyangbaixue");
// qrcode.clear(); // 清除二维码
</script>

효과:

구성 매개변수:

문자열 렌더링

QR 코드를 그리는 데 사용할 노드 요소를 구성합니다. 옵션은 테이블, SVG 및 캔버스입니다

기본 선택 순서는 캔버스 -> svg ->

텍스트 문자열

인코딩할 문자열

기본값: ""

폭수

QR코드 길이, 단위는 px

table이나 svg를 사용하여 QR 코드를 그릴 경우 QR 코드 행렬의 크기를 나눌 수 있도록 적절하게 축소된다는 점에 유의해야 합니다.

기본값: 256

키 수

QR코드 폭, 단위는 px

table이나 svg를 사용하여 QR 코드를 그릴 경우 QR 코드 행렬의 크기를 나눌 수 있도록 적절하게 축소된다는 점에 유의해야 합니다.

기본값: 256

올바른 레벨 번호

오류 수정 수준은 0, 1, 2, 3이 될 수 있습니다. 숫자가 클수록 필요한 오류 수정 수준도 높아집니다

기본값: 3

배경색

배경색상

기본값: #FFFFFF

전경색

전경색

기본값: #000000