Home > Web Front-end > JS Tutorial > Example of WeChat QR code image generator implemented in JavaScript

Example of WeChat QR code image generator implemented in JavaScript

高洛峰
Release: 2017-01-20 14:51:35
Original
2182 people have browsed it

jquery.qrcode.js is a jquery plug-in that can generate matrix QR code QRCode on the client. It can be used to easily generate 2D barcodes on the page.

QRCode.js

QRCode.js is a javascript implementation library for QR code (QRCode) production and generation. QRCode.js has good cross-browser compatibility (the higher version uses HTML5 Canvas, and the lower version IE uses table elements to draw), and QRCode.js has no dependencies. Just need to quote a JS.

This plug-in can be used independently, and the size is relatively small, less than 4kb after using gzip compression. Because it is a barcode generated directly on the client, there is no image downloading process and it can be generated quickly. It is encapsulated based on a multi-language class library and does not rely on other additional services.

Note* It also supports using SVG to draw QR codes

Basic use

Note* First you need to add qrcode.js Reference and create an empty DIV

<div id="qrcode"></div> <script type="text/javascript"> new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie"); </script>
Copy after login

There are more parameters to choose from

var qrcode = new QRCode("test", {
 text: "http://jindo.dev.naver.com/collie",
 width: 128,
 height: 128,
 colorDark : "#000000",
 colorLight : "#ffffff",
 correctLevel : QRCode.CorrectLevel.H
});
Copy after login

You can dynamically change the QR code image, Very fast

qrcode.clear();
qrcode.makeCode("http://naver.com");
Copy after login

Browser support

Almost supports all browsers: IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android , Windows Mobile.

DEMO address: http://davidshimjs.github.io/qrcodejs

Note* There is a server side that uses Node.JS to generate 2D A library of code pictures. Interested students can also study it: https://github.com/soldair/node-qrcode

The above is the entire content of this article. I hope it will be useful for everyone’s learning. Help, and I hope everyone will support the PHP Chinese website.

For more examples of WeChat QR code image generator implemented in JavaScript, please pay attention to the 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