Home > Web Front-end > JS Tutorial > jQuery implements the 'scan code reading' function_jquery

jQuery implements the 'scan code reading' function_jquery

WBOY
Release: 2016-05-16 16:18:33
Original
1403 people have browsed it

Today I saw a user posting a topic, "It's troublesome to type in the URLs on the PC one by one to open them on the mobile. Is there any good way?".

It is true that we are now in the mobile era, and reading on mobile devices will gradually become mainstream. If a website does not have a convenient way for users to read on mobile devices, it would be a bit outdated, so I thought about it and made a "scan code reading" ” function. In fact, it is very simple, just generate a QR code from the URL.

Whether it is generated using PHP or JavaScript, it is easier to use JavaScript in terms of code changes. So let’s use jQuery here. There happens to be an extension of jquery.qrcode.js on the Internet that you can use. It’s also very simple to use, like this:

Then use WeChat, Alipay wallet, etc. to scan it and open it in the mobile browser. It is very convenient. Thanks to the author of jquery.qrcode.js.

The code to generate QR code is as follows:

Copy code The code is as follows:




jquery.qrcode.js actually uses jQuery to achieve graphics rendering and drawing, and supports canvas (HTML5) and table. The canvas method is used by default, which is the most efficient. Of course, the browser must support html5. Direct call as follows:

Copy code The code is as follows:

jQuery('#code').qrcode("http://www.xxx.net/");

If the browser does not support HTML5, or you want to configure the size of the image, you can use this method:

Copy code The code is as follows:

jQuery("#code").qrcode({
render: "canvas", //canvas or table mode
width: 150, //Width
height:150, //Height
text: 'http://www.xxx.net/' //Content
});

Now there is a QR code generated on the right side of each article on the blog, which can be scanned and read on your mobile phone.

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