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

Summary of generating QR code images with JavaScript_javascript skills

WBOY
Release: 2016-05-16 15:23:12
Original
1388 people have browsed it

Summary:

This is how Baidu Encyclopedia introduces QR codes: QR code (Quick Response Code), also known as 2D barcode, is a black and white code that uses specific geometric figures distributed on a plane (two-dimensional direction) according to certain rules. The alternate graphics are a key to all information data. In modern commercial activities, a wide range of applications can be realized, such as: product anti-counterfeiting/tracing, advertising push, website links, data downloads, commodity transactions, positioning/navigation, e-commerce applications, vehicle management, information transmission, etc. Nowadays, the application of the scan (referred to as 313) function on smartphones has made QR codes more common. With the vigorous development of the domestic Internet of Things industry, more QR code technology application solutions have been developed, and QR codes have become the entrance to the mobile Internet. Really become a reality.

We can see QR codes everywhere when surfing the Internet, so how to generate QR codes on the front end? Today I will share the front-end generation of QR codes.

Introduction:

QRCode.js is a js library that supports HTML5 canvas and table markup in the DOM across browsers. What we use is based on QRCode.js.

Browser:

IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.

jquery-qrcode:

jquery-qrcode features: simple operation, small size, only 14k after compression, but does not support Chinese encoding.

<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>
Copy after login

Effect:

qrcodejs:

Features of qrcodejs: The Chinese-generated QR code will not appear garbled when scanned, and you can choose which element to use to draw the QR code.

<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>
Copy after login

Use 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>
Copy after login

Effect:

Configuration parameters:

render string

Configure which node element is used to draw the QR code. The options are table, svg and canvas

The default selection order is canvas -> svg -> table

text string

String to encode

Default: ""

width number

The length of the QR code, the unit is px

It should be noted that when using table or svg to draw the QR code, it will be appropriately reduced so that the dimension of the QR code matrix can be divided.

Default: 256

height number

The width of the QR code, the unit is px

It should be noted that when using table or svg to draw the QR code, it will be appropriately reduced so that the dimension of the QR code matrix can be divided.

Default: 256

correctLevel number

The error correction level can be 0, 1, 2, or 3. The larger the number, the greater the required error correction level

Default: 3

background color

Background color

Default: #FFFFFF

foreground color

Foreground color

Default: #000000

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