Home > Web Front-end > JS Tutorial > Summary of methods for generating QR codes_javascript skills

Summary of methods for generating QR codes_javascript skills

WBOY
Release: 2016-05-16 16:24:24
Original
1539 people have browsed it

With the rapid development of the Internet, there will be more and more applications of QR codes. At the same time, many are just ordinary QR codes. Please pick up your hand and design this QR code. Here are some very good QR code designs shared.

QR code principle:

2D barcode/QR code can be divided into stacked/lined 2D barcode and matrix 2D barcode. The stacked/lined 2D barcode is formed by stacking multiple rows of short one-dimensional 5 barcodes; the matrix 2D barcode is composed of a matrix, and "dots" are used to represent binary "dots" at the corresponding element positions of the matrix. 1", using "empty" to represent binary "0", the arrangement of "dot" and "empty" constitutes the code.

I recently became interested in QR codes and studied QR codes. The term qrcode born here is more fault-tolerant.

Data representation method

Dark modules represent binary "1" and light modules represent binary "0".
Error correction ability
· Level L: Can correct approximately 7% of data codewords
· M level: approximately 15% of data codewords can be corrected
· Q level: Can correct approximately 25% of data code words
· Level H: Can correct approximately 30% of data codewords

The above design makes perfect use of the fault tolerance of qrcode, which is very nice and creative! !

1.google interface

Copy code The code is as follows:

                    $urlToEncode="http://www.csd2n.net";//The URL to generate the QR code
Generate QRfromGoogle($urlToEncode);
              function generateQRfromGoogle($chl,$widhtHeight ='150',$EC_level='L',$margin='0')
                                               {
$url = urlencode($url);
echo 'http://chart.apis.google.com/chart?chs='.$widhtHeight.'x'.$widhtHeight.'&cht=qr&chld='.$EC_level.' |'.$margin.'&chl='.$chl.'" alt="QR code" widhtHeight="'.$size.'" widhtHeight="'.$size.'"/>'; //Google API interface, if it fails, you can check the Google website for the latest interface
                }
                   ?>
 

2..js code converted to canvas (emphasis)

demo: http://hxend.com/jsqrcode/test/

Copy code The code is as follows:

Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template