JavaScript_javascript 기술을 사용한 QR 코드 이미지 생성 요약-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 15:23:12

원래의

1425명이 탐색했습니다.

요약:

바이두 백과사전에서는 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>

로그인 후 복사

효과: