Summary of generating QR code images with JavaScript_javascript skills

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>

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>

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>

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