Home > Others

_javascript techniques for generating two-dimensional code method

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

With the rapid development and development of the network, the application of two-dimensional code will be more and more. At the same time many just very ordinary two-dimensional code, please take up your hand to design this two-dimensional code. Here are a few very good two-dimensional code designs to share.

Two-dimensional code principle :

Two-dimensional barcode/Two-D code can be divided into stacked/row-type two-dimensional barcode and matrix two-dimensional barcode. Stacked/row-type two-dimensional bar code is formed by the stacking of one-dimension 5 yards with multiple lines of short section. Matrix two-dimensional bar code in the form of a matrix, in the corresponding elements of the matrix in the position of "point" to represent the binary "1", with "null" to represent the binary "0", "point" and "empty" the arrangement of the code.

Recently, interest in two-dimensional code has been studied. The term born here has a high tolerance of qrcode.

Data representation method

The Dark module represents the binary "1", and the light module represents the binary "0".
Error correcting ability
· L-level: approximately 7% data code words can be corrected
· M-level: Approximately 15% data code words can be corrected
· Q-level: About 25% Data code words can be corrected
· H-level: About 30% Data code words can be corrected

The above design is perfect to use the QRCode fault-tolerant, very nice also very creative!!

1.google interface

Copy Code code as follows:

<?php
$urlToEncode = "http://www.csd2n.net";//URL to generate a two-dimensional code
Generateqrfromgoogle ($urlToEncode);
function Generateqrfromgoogle ($chl, $widhtHeight = ' _level= ', $EC ' L ', $margin = ' 0 ')
{
$url = UrlEncode ($url);
Echo ' ';//google API interface, if invalid can go to Google URL to query the latest interface
}
?>
　　

2..js Code conversion to canvas (emphasis)

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

Copy Code code as follows:

<script type= "Text/javascript" src= "Http://sandbox.runjs.cn/uploads/rs/142/gjxgxu0g/qrgen.min.js" ></ Script>
<div id=qrcode></div>
<script type= "Text/javascript" >
QRCode (document.getElementById (' QRCode '), {
Data: ' Http://geraldl.net '
});
</script>
　　

3. Picture interface

Copy Code code as follows:



4.demo inside http://hxend.com/jsqrcode/test/Code

Copy Code code as follows:

<!doctype html>
<title>QRCode</title>
<script type= "Text/javascript" src= "Http://files.cnblogs.com/webers/qrcode-light.js "></script>
<script type= "Text/javascript" src= "Http://files.cnblogs.com/webers/qrgen.js "></script>
<body>
<div>
<div>
Photo:
<label><input id=qrclearedges type=checkbox checked> cleanup Edge </label>
</div>
<div><input id=fimg type=file></div>
<div> text: <textarea id=qrtext>http://www.btgoogle.com</textarea></div>
<div> size: <input id=cellsize type=range min=2 max=10 value=6></div>
<table>
<tr>
&LT;TD rowspan=2> Effect:</td>
&LT;TD colspan=3><input id=celleffect type=range min=-50 max=50 step=5 value=0></td>
</tr>
<tr id=celleffectstops>
&LT;TD align=left><a href=# data=l> Liquid </a></td>
&LT;TD align=center><a href=# data=s> Square </a></td>
&LT;TD align=right><a href=# data=r> Circle </a></td>
</tr>
</table>
<div>
Foreground color: <input id=colorfore type=color value= #4169e1 >
Background color: <input id=colorback type=color value= #ffffff ><br>
Outside-border color: <input id=colorout type=color value= #cd5c5c >
Inside-border color: <input id=colorin type=color value= #191970 >
</div>
<button id=qrgen> Generation </button>
</div>
<div id=qrcode></div>
<script src= "Http://files.cnblogs.com/webers/take.js "></script>
</body>

The above 4 kinds of methods, the 3rd is the simplest, the second is I recommend, the degree of freedom, small partners according to their own needs to choose

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More