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

How to generate QR code with jQuery qrcode_jquery

WBOY
Release: 2016-05-16 15:06:43
Original
1563 people have browsed it

QR codes are becoming more and more popular now. 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 QR codes 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 implements graphics rendering and drawing by using jQuery. It supports 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. Add the following code to the page where the QR code needs to be displayed:

<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:

$('#code').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
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