Home > Web Front-end > JS Tutorial > body text

How to generate QR code with jQuery qrcode

高洛峰
Release: 2017-01-20 15:07:56
Original
998 people have browsed it

Nowadays, QR codes are becoming more and more popular. Many web pages will have a QR code, which can be browsed through mobile phones after scanning.

In the past, when doing similar projects, we usually generated images on the web page and then inserted the images into the web page.

You cannot generate a QR code on every page by doing this.

jquery-qrcode is a jquery plug-in that can generate QR codes on the browser side. It is self-contained, less than 4k with minimal compression, and has no image download requests. After introducing this class library, you can easily add QR codes to web pages with just one line of code.

qrcode actually uses jQuery to achieve graphics rendering and drawing, supporting canvas (HTML5) and table. You can go to

https://github.com/jeromeetienne/ jquery-qrcode

Get the latest code.

How to use

1. First add the jquery library file and qrcode plug-in to the page

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
Copy after login

2. The QR code needs to be displayed on the page Add the following code:

<div id="code"></div>
Copy after login

3. Call the qrcode plug-in

qrcode supports two methods of canvas and table for image rendering. The canvas method is used by default, which is the most efficient. Of course, the browser must support html5

Direct call:

$(&#39;#code&#39;).qrcode("http://www.jb51.net.com"); //任意字符串
Copy after login

Advanced attributes:

$("#code").qrcode({
render: "table", //table方式
width: 200, //宽度
height:200, //高度
text: "www.helloweba.com" //任意内容
});
Copy after login

More articles related to the method of generating QR code with jQuery qrcode Please pay attention to PHP Chinese website!


Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template