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

Example of WeChat QR code image generator implemented in JavaScript

高洛峰
高洛峰Original
2017-01-20 14:51:352118browse

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>

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
});

You can dynamically change the QR code image, Very fast

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

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!

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