Home > Developer > Web Develop

4 ways to generate two-dimensional code (JS control canvas to draw a two-dimensional code)

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

transferred from: http://www.cnblogs.com/webers/p/4172313.html

With the rapid development and development of the network, the application of QR code will be more and more. At the same time a lot of just a very ordinary two-dimensional code, please pick up your hand to the two-dimensional code design it up. Here are a few very good QR 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 barcode form is composed of a multi-line short-cut one-dimensional 5 code stack; matrix two-dimensional bar code in the form of a matrix, the corresponding elements of the matrix with a "point" for the binary "1", with "empty" means binary "0", "point" and "empty" arrangement of the code.

Recently, the two-dimensional code has been interested in the two-dimensional code generated here the term QRCode fault tolerance is higher.

Data representation method The Dark module represents the binary "1" and the light module represents the binary "0".
Error correction capability · L-level: about 7% of the data code Word can be corrected
· M-class: approx. 15% Data code Word Error
· Q-level: About 25% of the data code Word can be corrected
· H-Class: About 30% of the data code Word can be corrected

The above design is perfect to take advantage of QRCode's fault tolerance, very nice and very creative!!

1.google interface

123456789 <?php               $urlToEncode="http://www.csd2n.net";//要生成二维码的网址               generateQRfromGoogle($urlToEncode);               function generateQRfromGoogle($chl,$widhtHeight =‘150‘,$EC_level=‘L‘,$margin=‘0‘)               {               $url = urlencode($url);               echo ‘.$widhtHeight.‘x‘.$widhtHeight.‘&cht=qr&chld=‘.$EC_level.‘|‘.$margin.‘&chl=‘.$chl.‘" alt="QR code" widhtHeight="‘.$size.‘" widhtHeight="‘.$size.‘"/>‘;//Google API接口，若失效可到Google网址查询最新接口               }               ?>

　　

2..js code conversion to canvas (focus) demo:http://hxend.com/jsqrcode/test/
1234567 <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. Image Interface
1 "http://qrcoder.sinaapp.com?t=hello world">

　　

4.demo inside http://hxend.com/jsqrcode/test/code
12345678910111213141516171819202122232425262728293031323334353637383940 <!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>                图片: //hdimg.qiniudn.com/Uploads/141889425189.png>                <label><input id=qrclearedges type=checkbox checked>清理边缘</label>            </div>            <div><input id=fimg type=file></div>            <div>文本: <textarea id=qrtext>http://www.btgoogle.com</textarea></div>            <div>大小: <input id=cellSize type=range min=2 max=10 value=6></div>            <table>                <tr>                    <td rowspan=2>效果:</td>                    <td colspan=3><input id=cellEffect type=range min=-50 max=50 step=5 value=0></td>                </tr>                <tr id=cellEffectStops>                    <td align=left><a href=# data=l>液体</a></td>                    <td align=center><a href=# data=s>方块</a></td>                    <td align=right><a href=# data=r>圆</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>生成</button>         </div>        <div id=qrcode></div>        <script src="http://files.cnblogs.com/webers/take.js"></script>    </body>

Look at me write so good demo and share such a good QR code design give me a recommendation. The demo Github:https://github.com/hxend/jsqrcode

4 ways to generate two-dimensional code (JS control canvas to draw a two-dimensional code)

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