QRCode.js – 用于JavaScript的跨浏览器QRCode生成器[web前端]

QRCode.js - 用于JavaScript的跨浏览器QRCode生成器

QRCode.js – 用于JavaScript的跨浏览器QRCode生成器[web前端]

QRCode.js是用于制作QRCode的JavaScript库。QRCode.js通过HTML5 Canvas和DOM中的表格标签支持跨浏览器。QRCode.js没有依赖关系。

  • 项目地址:https://github.com/davidshimjs/qrcodejs
  • 菜鸟学院:https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html

QRCode.js – 用于JavaScript的跨浏览器QRCode生成器[web前端]-度崩网-几度崩溃

基本用法:

  1. <div id="qrcode"></div>
  2. <script type="text/javascript">
  3. new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
  4. </script>

控制选项:

  1. <div id="qrcode"></div>
  2. <script type="text/javascript">
  3. var qrcode = new QRCode(document.getElementById("qrcode"), {
  4. text: "http://jindo.dev.naver.com/collie",
  5. width: 128,
  6. height: 128,
  7. colorDark : "#000000",
  8. colorLight : "#ffffff",
  9. correctLevel : QRCode.CorrectLevel.H
  10. });
  11. </script>

你可以使用一些方法:

  1. qrcode.clear();
  2. // clear the code.
  3. qrcode.makeCode("http://naver.com");
  4. // make another code.

浏览器兼容性

IE6〜10,Chrome,Firefox,Safari,Opera,Mobile Safari,Android,Windows Mobile,ETC。

如何使用?

您需要先加载 jquery.js 和 qrcode.js 这两个JS,(页底提供压缩包)

  1. <script type="text/javascript" src="./js/jquery.min.js"></script>
  2. <script type="text/javascript" src="./js/qrcode.min.js"></script>

这是一个简单的用法

  1. <div id="value1">https://www.npc.ink/#</div>
  2. <div id="qrcode-n"></div>
  3. <script>
  4. abc = $("#value1").text();
  5. //document.write(abc);
  6. new QRCode(document.getElementById("qrcode-n"), abc);
  7. </script>

扩充:

在网页快速生成二维码的演示

  • 代码来源:https://www.dpaoz.com/166

只使用一个插件,不使用任何动态编程语言,不调用jq等插件。生成二维码,生成的二维码没有徽标以及背景图。

此代码中,无法去除上一次生成的二维码。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title> JS 生成二维码</title>
  6. </head>
  7. <body>
  8. 内容:<input type="text" id="content" value="https://i.csdn.net/#/uc/profile" /> <br><br>
  9. 尺寸:<input type="text" id="size" value="150"><br><br>
  10. 背景:<input type="text" id="color" value="#fff"><br><br>
  11. 前景:<input type="text" id="colorr" value="#000"><br><br>
  12. <button id="btn">生成二维码</button><br><br>
  13. <div id="qrcode"></div>
  14. </body>
  15. <script src='qrcode/qrcode.js'></script>
  16. <script type="text/javascript">
  17. //声明变量啊~~
  18. let qrcode;
  19. let content;
  20. let size;
  21. let color;
  22. let colorr;
  23. // 设置点击事件
  24. document.getElementById("btn").onclick =function(){
  25. // 获取内容
  26. content = document.getElementById("content").value;
  27. // 获取尺寸
  28. size = document.getElementById("size").value;
  29. // 获取背景
  30. color = document.getElementById("color").value;
  31. // 获取前景
  32. colorr = document.getElementById("colorr").value;
  33. // 清除上一次的二维码
  34. if(qrcode){
  35. qrcode.clear();
  36. }
  37. // 创建二维码
  38. qrcode = new QRCode(document.getElementById("qrcode"), {
  39. width : size,
  40. //设置宽高
  41. height : size,
  42. colorLight : color,
  43. colorDark : colorr,
  44. });
  45. qrcode.makeCode(document.getElementById("content").value);
  46. }
  47. </script>
  48. </html>

 

1
QRCode.js – 用于JavaScript的跨浏览器QRCode生成器[web前端]
2

    WEB前端

    知音漫客付费漫画弹窗隐藏tampermonkey脚本(超详细)[Web]

    2020-1-7 16:00:43

    WEB前端

    Vux:基于Vue和WeUI的移动UI组件[移动UI组件]

    2020-6-2 11:44:06

    本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
    ⚠️
    本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策
    若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索