4种方法生成二维码 (js 控制canvas 画出 二维码)
随着网络的迅速发展 发展 发展,二维码的应用将会越来越多。同时很多只是很平凡的二维码,请拿起你的手 把这个二维码 设计起来吧。下面分享了几个非常好的二维码设计。
二维码原理:
二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码。 堆叠式/行排式二维条码形态上是由多行短截的一维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 (重点)
1 2 3 4 5 6 7 | <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. 图片接口
1 | <img src= "http://qrcoder.sinaapp.com?t=hello world" > |
4.demo 里面http://hxend.com/jsqrcode/test/ 代码
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= "https://files.cnblogs.com/webers/qrcode-light.js" ></script> <script type= "text/javascript" src= "https://files.cnblogs.com/webers/qrgen.js" ></script> </head> <body> <div> <h1>二维码生成</h1> <div> 图片: <img id=qrimg src=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=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= "https://files.cnblogs.com/webers/take.js" ></script> </body> </html> |
标签:
JavaScript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验