首页 > 代码库 > 4种方法生成二维码 （js 控制canvas 画出 二维码）

4种方法生成二维码 （js 控制canvas 画出 二维码）

2024-10-01 07:26:02   217人阅读

转自：http://www.cnblogs.com/webers/p/4172313.html

随着网络的迅速发展 发展 发展，二维码的应用将会越来越多。同时很多只是很平凡的二维码，请拿起你的手 把这个二维码 设计起来吧。下面分享了几个非常好的二维码设计。

 二维码原理：

二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码。 堆叠式/行排式二维条码形态上是由多行短截的一维5条码堆叠而成；矩阵式二维条码以矩阵的形式组成，在矩阵相应元素位置上用“点”表示二进制“1”， 用“空”表示二进制“0”，“点”和“空”的排列组成代码。

最近对二维码产生了兴趣 研究了一下二维码 这里生出的术语 qrcode  容错性较高。

数据表示方法
深色模块表示二进制“1”，浅色模块表示二进制“0”。
纠错能力
· L级：约可纠错7%的数据码字
· M级：约可纠错15%的数据码字
· Q级：约可纠错25%的数据码字
· H级：约可纠错30%的数据码字

技术分享技术分享技术分享技术分享技术分享

技术分享技术分享技术分享技术分享技术分享

上面的设计 就很完美的利用了 qrcode的容错性，非常nice  也非常有创意！！

1.google 接口

1
2
3
4
5
6
7
8
9
<?php
               $urlToEncode="http://www.csd2n.net";//要生成二维码的网址
               generateQRfromGoogle($urlToEncode);
               function generateQRfromGoogle($chl,$widhtHeight =‘150‘,$EC_level=‘L‘,$margin=‘0‘)
               {
               $url = urlencode($url);
               echo ‘<img src="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接口，若失效可到Google网址查询最新接口
               }
               ?>

　　

2..js代码 转换为 canvas （重点）
demo: http://hxend.com/jsqrcode/test/
1
2
3
4
5
6
7
<script type="text/javascript" src=http://www.mamicode.com/"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. 图片接口
1
<img src=http://www.mamicode.com/"http://qrcoder.sinaapp.com?t=hello world">

　　

4.demo 里面http://hxend.com/jsqrcode/test/ 代码
                </tr>
                <tr id=cellEffectStops>
                    <td align=left><a href=http://www.mamicode.com/# data=http://www.mamicode.com/l>液体
                    <td align=center><a href=http://www.mamicode.com/# data=http://www.mamicode.com/s>方块
                    <td align=right><a href=http://www.mamicode.com/# data=http://www.mamicode.com/r>圆
                </tr>
            </table>
            <div>
                Foreground color: <input id=colorFore type=color value=http://www.mamicode.com/#4169e1>
                Background color: <input id=colorBack type=color value=http://www.mamicode.com/#ffffff><br>
                Outside-border color: <input id=colorOut type=color value=http://www.mamicode.com/#cd5c5c>
                Inside-border color: <input id=colorIn type=color value=http://www.mamicode.com/#191970>
            </div>
            <button id=qrgen>生成</button>
        </div>
        <div id=qrcode></div>
        <script src=http://www.mamicode.com/"http://files.cnblogs.com/webers/take.js"></script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html>
    <head>
        <title>QRCode</title>
        <script type="text/javascript" src=http://www.mamicode.com/"http://files.cnblogs.com/webers/qrcode-light.js"></script>
        <script type="text/javascript" src=http://www.mamicode.com/"http://files.cnblogs.com/webers/qrgen.js"></script>
    </head>
    <body>
        <div>
            <h1>二维码生成</h1>
            <div>
                图片: <img id=qrimg src=http://www.mamicode.com/http://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=http://www.mamicode.com/6>
            <table>
                <tr>
                    <td rowspan=2>效果:</td>
                    <td colspan=3><input id=cellEffect type=range min=-50 max=50 step=5 value=http://www.mamicode.com/0>

　　看在我写这么好的demo  和 分享这么好的二维码设计 给我一个推荐吧。该demo github:https://github.com/Hxend/jsqrcode

4种方法生成二维码 （js 控制canvas 画出 二维码）


联系
我们