Home >Web Front-end >JS Tutorial >How to implement QR code in javascript

How to implement QR code in javascript

藏色散人
藏色散人Original
2021-07-03 09:23:3710152browse

How to implement QR code in JavaScript: 1. Download the qrcodejs plug-in; 2. Use qrcode to generate QR code, code such as "new QRCode(document.getElementById("qrcode")".

How to implement QR code in javascript

The operating environment of this article: windows7 system, javascript version 1.8.5, Dell G3 computer.

How does javascript implement QR code?

js realizes QR code generation

We can use qrcodejs to realize js to generate QR code. qrcodejs is a cross-browser QRCode generator for JavaScript, which can be very simple to implement. QR code generation

1: Download the qrcodejs plug-in

qrcode address: https://github.com/davidshimj...

The downloaded qrcode file is as follows , among which qrcode.js and qrcide.min.js are the js we need, qrcode.min.js is the compressed version of qrcode.js
How to implement QR code in javascript

2: Implement QR code generation

1: The js that needs to be introduced

qrcodejs is designed to be implemented on the premise of jquery, so we first need to introduce jquery and then introduce qrcodejs

<script></script>     <!--引入jquery-->
<script></script>         <!--引入qrcodejs-->

2: Use qrcode to implement QR code Generate

<p></p>
<script>
    new QRCode(document.getElementById("qrcode"), "https://wj0511.com");
</script>

At this time, when we visit the current page, we can see the QR code we generated. After scanning the QR code, visit https://www.wj0511.com

Here we mainly explain some basic parameters of the following new QRCode

The QR code we generated above can jump to the specified url. We can also set some basic parameters of the QR code, as follows

var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "https://www.wj0511.com",//扫描二维码后的内容
width: 128,//二维码的宽
height: 128,//二维码的高
colorDark : "#000000",//二维码线条颜色
colorLight : "#ffffff",//二维码背景颜色
correctLevel : QRCode.CorrectLevel.H    //二维码等级
});

Recommended study: "javascript advanced tutorial"

The above is the detailed content of How to implement QR code in javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn